Responsive

There are two responsive aspects to CardView:

• Grid layout
• Auto-display breakpoint

Grid layout

When CardView is active, the cards are laid out in a grid which is primarily defined by the number of column (combine with the number of records to display per page to get the rows). The number of columns shown is dependant upon the content width of the container (i.e. the width of the host DataTable in pixels).

CardView allows five responsive breakpoints, at each of which the number of grid columns to be displayed for that breakpoint can be defined. The two initialisation properties that control this are cardView.breakpoints and cardView.gridColumns.

The latter property defines the number of columns are to be shown for each breakpoint, and the former defines what those breakpoints are (remember, this is for the content width of the container, not the viewpoint).

The code below shows the defaults for CardView:

new DataTable('#example', {
    cardView: {
        breakpoints: [
            1200, // huge
            992, // large
            768, // medium
            576, // small
            0 // tiny
        ],
        gridColumns: {
            huge: 5,
            large: 4,
            medium: 3,
            small: 2,
            tiny: 1
        }
    }
});

We can see that if the container is greater that 1200px wide, 5 columns will be displayed. If it is between 1200 and 992 pixels, then 4 columns will be displayed, etc.

With these two properties, you can customise CardView's breakpoints to suit those used by your site if these breakpoints don't match (they are based on the Bootstrap 5 breakpoints). You may also wish to alter the number of columns based on the content displayed in them - e.g. small cards could be packed in more densely, while complex cards might benefit from more space.

Auto-display breakpoint

CardView will automatically switch between the card view and table view (assuming the operating mode is auto, which it is by default). The point at which it will switch the view is controlled by cardView.responsiveBreakpoint.

This property can either be a string which matches the name of one of the keys in cardView.gridColumns (e.g. huge, large, etc), in which case it will that the corresponding value from the breakpoints array. Alternatively, a specific number can be given (the width in pixels).

The default is medium, which means CardView will automatically display the card display when the content width is smaller than 768 pixels.