Responsive, but prevent hiding of important column?

Jordan901

I'm using the Responsive plugin. I have a table with multiple columns (5), and have them prioritized so they hide in the right order.

Two of the columns are very important and can never disappear (the first is a column that holds the child-row expand button, and the second is a string that explains what the row in the table is for). Is there a way to tell the Responsive plugin that it is not allowed to ever hide that column, regardless of the viewport width? Instead, once it gets down to the last two columns, it should just wrap the text in the second column and increase the row's height to show multiple lines.

Code sample:

<table id='mydatatable'>
    <tr>
        <th></th><th>Important String</th><th>Info 1</th><th>Info 2</th><th>Info 3</th>
    <tr>
    <tr>
        <td></td><td>This string must never be hidden</td><td>Some info</td><td>More info</td><td>Another info</td>
    </tr>
</table>

<script>
    $(document).ready(function(){
        $('#mydatatable').DataTable({
            'columnDefs': [
                { responsivePriority: 1, targets: 1 },
                { responsivePriority: 2, targets: 2 },
                { responsivePriority: 3, targets: 3 },
                { responsivePriority: 4, targets: 4 }.
                {
                    className: 'control',
                    orderable: false,
                    targets:   0
                }
            ],
            'order': [1, 'asc'],
            responsive: {
                details: {
                    type: 'column'
                }
            }
        });
    });
</script>

Thanks!

allan

Try adding the class name all to your two important columns.

Perhaps having a responsivePriority: -1 option would make more sense!

Allan