{hero}

responsive.breakpoints

Since: Responsive 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 default breakpoints defined by $.fn.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: $.fn.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:

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

Set custom breakpoints using the defaults:

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

$('#example').DataTable( {
	responsive: true
} );