cardView.responsiveBreakpoint

Since: CardView 1.0.0

Set the responsive breakpoint automatic card view.
Please note - this property requires the CardView extension for DataTables.

Description

When operating in auto mode (cardView.mode), CardView will automatically determine if it should show the card view, or the table. It does this by finding the content container's width (note, not the screen or browser width!), and then comparing it to the number given by this parameter. If the content width is smaller, card view will be activated automatically (i.e. a good layout for small screens!), while if the value is larger, the table view will be used.

For each of use, and to keep values in sync, this parameter can be given as a string, which will perform a lookup on the cardView.breakpoints array.

Types

number

As a number, this value is the point at which the DataTable will switch to card view (pixel count for the content container - not the screen width).

string

As a string, the pixel size for the responsive breakpoint will be determined from the values in cardView.breakpoints.

Default

  • Value: medium

The value for the breakpoint will be taken from the third value in the breakpoints array.

Example

Change the auto breakpoint to 'small' from the breakpoints array:

new DataTable('#myTable', {
	cardView: {
		responsiveBreakpoint: 'small'
	}
});