{hero}

spacer

Since: Buttons 2.1.0

A special "button" which provides visual grouping between buttons.
Please note - this property requires the Buttons extension for DataTables.

Description

This button type is unique in Buttons in that it doesn't actually display a button or anything the end user can interact with. Rather it simply introduces a space between buttons, allowing easy visual grouping.

As a result the majority of options such as action, init and so on do not apply to this button. Only the options specified below are available.

Options

This button can have the following options set in its configuration object to customise its actions and display, in addition to those options which are available for all buttons (e.g. buttons.buttons.text):

style

This option can be set to:

  • empty: No background or border is shown - i.e. the spacing element is fully transparent.
  • bar: A 1 pixel bar is shown.

Typically the bar option would not be used with a text value as well.

text

  • Type: string
  • Default: Empty string

The button's display text. The text can be configured using this option (see buttons.buttons.text) or the buttons.spacer option of the DataTables language object. if specified it can be used to group options with a visual title, which is particularly effective inside collections.

Examples

Add a spacer between buttons:

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

Show with a bar:

new DataTable('#myTable', {
	layout: {
		topStart: {
			buttons: [
				'csv',
				'excel',
				'pdf',
				{
					extend: 'spacer',
					style: 'bar'
				},
				'copy',
				'print'
			]
		}
	}
});