buttons.buttons.split

Since: Buttons 3.0.0

Split dropdown buttons.
Please note - this property requires the Buttons extension for DataTables.

Description

This option allows for split button functionality with all DataTables buttons.

To implement split buttons simply extend any existing button type to include the buttons.buttons.split config option, or include it within your custom buttons initialisation. The value of this option is an array that contains further buttons which are to be added as secondary buttons. The buttons within this array can be declared in the same form as the buttons.buttons option, please read that documentation for full details.

As of Buttons 2.0.0 it is possible to add custom html to collections. Simply include a string containing the html into the buttons.buttons.split array and it will be inserted in that order into the collection popover. This example shows how this can be used to create more powerful popovers.

Note: Bulma does not support split button dropdowns at the time of creating the styling integrations. Because of this, split buttons are not supported in Bulma. This will be updated in the future if Bulma begin supporting split buttons.

Type

array

Description:: This array contains further buttons which are to be added as secondary buttons which are displayed within a popover. The buttons within this array can be declared in the same form as the buttons.buttons option, please read that documentation for full details.

Default

Value: undefined

Examples

Split dropdown button for printing options:

new DataTable('#myTable', {
	layout: {
		topEnd: {
			buttons: [
				{
					extend: 'csv',
					split: ['pdf', 'excel']
				}
			]
		}
	}
});

Split dropdown button with custom buttons:

new DataTable('#myTable', {
	layout: {
		topEnd: {
			buttons: [
				{
					text: 'High priority',
					action: function () {
						/* ... */
					},
					split: [
						{
							text: 'Medium priority',
							action: function () {
								/* ... */
							}
						},
						{
							text: 'Low priority',
							action: function () {
								/* ... */
							}
						}
					]
				}
			]
		}
	}
});

Split dropdown button with a mix of custom buttons and built in buttons:

new DataTable('#myTable', {
	layout: {
		topEnd: {
			buttons: [
				{
					text: 'High priority',
					action: function () {
						/* ... */
					},
					split: [
						'pdf',
						{
							text: 'Medium priority',
							action: function () {
								/* ... */
							}
						},
						{
							text: 'Low priority',
							action: function () {
								/* ... */
							}
						}
					]
				}
			]
		}
	}
});

Custom HTML within popovers:

new DataTable('#myTable', {
	layout: {
		topEnd: {
			buttons: [
				{
					extend: 'collection',
					className: 'custom-html-collection',
					buttons: [
						'<h3>Export</h3>',
						'pdf',
						'csv',
						'excel',
						'<h3 class="not-top-heading">Column Visibility</h3>',
						'colvis',
						'colvis'
					]
				}
			]
		}
	}
});