Usage

Initialisation and configuration of CardView is performed through the cardView initialisation option for DataTables. This option can be given as a simple boolean value to enable CardView with its default values, or as an object to provide more granular control.

Simple initialisation

In its most simple case, you can enable CardView by simply setting cardView: true as an option in the DataTables initialisation:

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

This will initialise CardView with its defaults, which is to use the built in dl renderer and for the CardView to become active at the responsive breakpoint (768px content width). If the table is shown in a container smaller than that, CardView will switch to the card view automatically.

This is often enough, but it can be useful to know when the mode changes, for that the cardView-display event is available. There is also an API method available to control the display mode (cardView().mode()).

Options

For more complex cases, the cardView option can be used as an object allowing you to control the start up mode, the template used for cards and the responsive behaviour of the software. In the following example, CardView is enabled automatically on the table at start up.

new DataTable('#myTable', {
    cardView: {
        mode: 'cards'
    }
});

Reference

For a complete list of the options that CardView supports, please refer to the DataTables initialisation options reference. The CardView examples also demonstrate the options available.