Class logic

Responsive has three modes of operation for controlling the visibility of columns in a table:

• Automatic - whereby Responsive will automatically determine if a column should be shown or not
• Manual - where you tell Responsive what columns to show on what screen sizes.
• Priority - Using columns.responsivePriority to tell Responsive which columns should be given visibility priority - see priority documentation - (2.0.0).

These three modes are not mutually exclusive in a table, columns of all three types can be used in a single table.

Manual mode is triggered by assigning a specific class to a column - one which matches a set of logic rules for the breakpoints defined in Responsive. This is fully detailed below. The class can be added either to the plain HTML table before the DataTable is initialised, or by using the DataTables columns.className option.

If Responsive does not detect a class name for a column that matches a breakpoint, or one of the special cases noted below (all, none and control), the column visibility will be controlled automatically with the column priority defining the hiding order.

Breakpoints

To define which columns are displayed on screen for different screen sizes, Responsive has the concept of breakpoints. A breakpoint is a width, in pixels, of the browser viewport at which a breakpoint is activated. For example, a tablet breakpoint might be activated at 1024 pixels while a mobile phone breakpoint would be 480 pixels. By naming these breakpoints we can add classes to the table to control if a column is visible at those breakpoints. As an example, if a column has the class tablet it will be visible on tablet devices, but not mobile or desktop browsers.

The breakpoints are not "bottom up" - the table can be in a single breakpoint at any one time, and assigning a column to a small breakpoint does not mean that it will appear in a larger one. For example, a column assigned mobile will not appear in tablet and desktop breakpoints. To have a column appear over multiple breakpoints it must be assigned to each one. This can be done with the columns.className option - e.g. className: 'tablet desktop' to appear on tablet and desktop screen widths.

Responsive has five breakpoints built in:

Name	Width (x) range
desktop	x > 1024
tablet-l (landscape)	768 < x <= 1024
tablet-p (portrait)	480 < x <= 768
mobile-l (landscape)	320 < x <= 768
mobile-p (portrait)	x <= 320

Breakpoints can be customised using the responsive.breakpoints initialisation option, or by modifying the $.fn.dataTable.Responsive.breakpoints array which contains the default breakpoints.

Special classes

In addition to detecting classes based upon class name, Responsive will also detect the following special classes:

• all - Column will always be visible, regardless of the browser width
• none - Column will never be visible, regardless of the browser width, but the data will be shown in a details view
• never - Column will never be visible, regardless of the browser width, and the data will not be shown in a details view (1.0.2).
• dtr-control - This is a special class which is used by the column option for the responsive.details.type option to designate which column is the control column in the table. This allows the Responsive stylesheet to add the required styling information for the column.

These classes can be used on any column and will take precedent over a breakpoint class.

Also, be aware that DataTables' column visibility (columns.visible) will affect the display Responsive uses. If a column is marked as hidden, it will not be shown in the details view.

Breakpoint logic operations

Using the full breakpoint names you can specify exactly which columns are to be shown at each breakpoint, but this can be quite verbose. For example, if you wanted to specify a column should be visible at all breakpoints but the desktop breakpoint, four classes would be needed. You can do that, but to make complex combinations more succinct Responsive provides the ability to add logic operations to a class name for a breakpoint:

• Prefix:
  • not- - Visible in all but the named breakpoint. For example not-desktop would be visible at mobile and tablet widths only.
  • min- - Visible in breakpoints greater or equal in width to the named breakpoint. For example min-tablet-l would be visible at tablet-l and desktop widths only.
  • max- - Visible in breakpoints less than or equal in width to the named breakpoint. For example min-tablet-p is visible at the tablet-p and mobile breakpoints.
• Postfix:
  • The -l and -p options to designate the landscape and portrait breakpoints for tablets and mobiles are optional. This makes it easier to specify a column's visiblity for a device group. For example tablet will be visible at the tablet-l and tablet-p breakpoints.
  • The postfix (or rather, the lack of a postfix) and also be used in combination with the prefix logic operations. For example min-tablet will be visible in the tablet and mobile breakpoints.

Logic reference

The following table lists the class names that Responsive will automatically detect.

Class name	Breakpoints included in
desktop	desktop
not-desktop	tablet-l, tablet-p, mobile-l, mobile-p
min-desktop	desktop
max-desktop	desktop, tablet-l, tablet-p, mobile-l, mobile-p
tablet	tablet-l, tablet-p
not-tablet	desktop, mobile-l, mobile-p
min-tablet	desktop, tablet-l, tablet-p
max-tablet	tablet-l, tablet-p, mobile-l, mobile-p
tablet-l	tablet-l
not-tablet-l	desktop, tablet-p, mobile-l, mobile-p
min-tablet-l	desktop, tablet-l
max-tablet-l	tablet-l, tablet-p, mobile-l, mobile-p
tablet-p	tablet-p
not-tablet-p	desktop, tablet-l, mobile-l, mobile-p
min-tablet-p	desktop, tablet-l, tablet-p
max-tablet-p	tablet-p, mobile-l, mobile-p
mobile	mobile-l, mobile-p
not-mobile	desktop, tablet-l, tablet-p
min-mobile	desktop, tablet-l, tablet-p, mobile-l, mobile-p
max-mobile	mobile-l, mobile-p
mobile-l	mobile-l
not-mobile-l	desktop, tablet-p, tablet-l, mobile-p
min-mobile-l	desktop, tablet-l, tablet-p, mobile-l
max-mobile-l	mobile-l, mobile-p
mobile-p	mobile-p
not-mobile-p	desktop, tablet-l, tablet-p, mobile-l
min-mobile-p	desktop, tablet-l, tablet-p, mobile-l, mobile-p
max-mobile-p	mobile-p