responsive.breakpoints

Since: Responsive 1.0.0

Set the breakpoints for a Responsive instance.
Please note - this property requires the Responsive extension for DataTables.

Description

The visibility of columns in a DataTable with Responsive enabled can be controlled by breakpoints and class names matching those breakpoints (and other logical operations) . This provides the ability to exactly control which columns in a table will be visible for each device type. See the Responsive manual for more information.

The breakpoints that are used by a Responsive instance are unique to that instance (i.e. each table) allowing different breakpoints to be set for different tables is needed. The table can be "in" only a single breakpoint mode at any one time. If you wish a column to appear over multiple breakpoints, the classes assigned to the column must reflect that (e.g. className: 'tablet desktop').

The default breakpoints defined by DataTable.Responsive.breakpoints is:

[
    { name: 'desktop',  width: Infinity },
    { name: 'tablet-l', width: 1024 },
    { name: 'tablet-p', width: 768 },
    { name: 'mobile-l', width: 480 },
    { name: 'mobile-p', width: 320 }
]

Note that if you define your own array of breakpoints, ordering of the breakpoints is not important. Responsive will automatically sort the array into its required internal order before using it.

Please note that as with all other configuration options for Responsive, this option is an extension to the default set of DataTables options. This property should be set in the DataTables initialisation object.

Type

array

Description:

An array of objects, where each object contains two properties that describe each breakpoint:

name - the breakpoint name allowing class targeting. This can be a single word, or append \-[a-z] to provide sub-breakpoints, similar to the defaults, to allow, for example, tablet, tablet landscape or tablet portrait breakpoints.
width - the width (pixels) of the page viewport at which this breakpoint will apply. The value given is the maximum size at which this breakpoint will be applied, and it will be used until the next breakpoint is found. For example, if using the default breakpoints (above), the tablet-l breakpoint will be applied for 768 < x <= 1024 (where x is the viewport width).

Default

Value: DataTable.Responsive.breakpoints

The default breakpoints used by Responsive are defined by the static array defined in this object. This provides the ability to set common breakpoints that are used by all tables easily, if required.

Examples

Set custom breakpoints in the DataTables initialisation:

new DataTable('#myTable', {
	responsive: {
		breakpoints: [
			{ name: 'desktop', width: Infinity },
			{ name: 'tablet', width: 1024 },
			{ name: 'fablet', width: 768 },
			{ name: 'phone', width: 480 }
		]
	}
});

Set custom breakpoints using the defaults:

DataTable.Responsive.breakpoints = [
	{ name: 'desktop', width: Infinity },
	{ name: 'tablet', width: 1024 },
	{ name: 'fablet', width: 768 },
	{ name: 'phone', width: 480 }
];

new DataTable('#myTable', {
	responsive: true
});