Column priority

Responsive will automatically hide columns in a table so that the table fits horizontally into the space given to it. This means that a single HTML table can be written and will be displayed nicely for desktop, tablet and mobile web-pages, all without modification of the table.

When Responsive removes columns from the display, it does so, by default, from right to left (i.e. the rightmost column will be removed first). Although this is the default bahaviour, you may wish to assign your own column visibility priority to the columns, telling Responsive which columns it should remove before others. This can be particularly useful if, for example, the rightmost column includes actions buttons (edit / delete) or contains particularly important information.

The visibility priority of columns in a Responsive table can be assigned through:

• Use of the columns.responsivePriority initialisation option
• A data-priority option in the HTML tag for the column header cell.

Priority order

Priority order in Responsive is a numerical value, where a lower value equates to a higher priority. For example a column with a priority of 2 will be removed from the display before a column with a priority of 1.

Columns are automatically assigned a priority value of 10,000, which is used unless configured otherwise. If multiple columns share the same priority value, the rightmost will be removed first.

Configuration option

Priority order can be set using the columns.responsivePriority option, which can be defined in the columns or columnDefs arrays of the DataTables configuration. Consider the following:

$('#myTable').DataTable( {
    responsive: true,
    columnDefs: [
        { responsivePriority: 1, targets: 0 },
        { responsivePriority: 2, targets: -1 }
    ]
} );

Here the leftmost column (target:0) is assigned a priority of 1, while the rightmost column (target:-1) is assigned a priority of 2. All other columns in the table will use the default priority of 10,000 and thus be removed before either of these two columns. As the table is made narrower, eventually only the first column will be shown.

Priority data attribute

It is also possible to assign the priority using data-* attributes in the HTML. This is a particularly convenient way of passing information between the HTML and Javascript since no additional configuration options need be specified. Simple add a data-priority attribute to the column header cells, with the value denoting the priority to assign for the column.

Consider the following table:

<table id="example" class="display nowrap" width="100%">
    <thead>
        <tr>
            <th data-priority="1">First name</th>
            <th>Last name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
            <th>E-mail</th>
            <th data-priority="2">Extn.</th>
        </tr>
    </thead>
    <tbody>
        ...
    </tbody>
</table>

This exactly matches the Javascript example given above - the leftmost column has priority 1, the rightmost priority 2 and all the others a default priority.