buttons.buttons.split

Since: Buttons 2.0.0

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

Examples

Split dropdown button for printing options:

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

Split dropdown button with custom buttons:

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