DataTables Checkbox Selection with Columns Configuration Option

ryan_ryan

This page:

https://datatables.net/extensions/select/examples/initialisation/checkbox.html

shows how to add integrated row selectors in the form of checkboxes. The example on the aforementioned page uses columnDefs, which does not require all columns to be specified.

I would like integrated checkbox functionality, but due to other constraints of a complex design, I am also using the "columns" option.

https://datatables.net/reference/option/columns

My understanding is that the columns option specifies the output and parameters of each column, and further that it requires all columns to be specified. In that case, how can the integrated checkbox functionality be "passed through" when also using the "columns" option?

Thanks,

Ryan

kthorngren

You can use columns and columnDefs simultaneously. This link explains the priority of the options between the two.

You can define the row selection checkbox in columns like this:

{
    data: null,
    defaultContent: '',
    className: 'select-checkbox',
    orderable: false
 },

The key is to set data: null.

Kevin

ryan_ryan

This looked like it would solve the problem, but it didn't work.

When I specify:

select:
    {
        style: "os",
        selector: "td:first-child"
    },
columns: [
    {
        data: null,
        defaultContent: "",
        className: "select-checkbox",
        orderable: false
    },
    {
        defaultContent: "",
        render:
            function( data, type, row ) {
                return row.data_type;
            }
    },
    ...
    ]

either with or without

columnDefs: [
    {
        orderable: false,
        className: "select-checkbox",
        targets: 0
    }
    ]

and

<thead>
    <tr>
        <th>Checked</th>
        <th>Data Type</th>
        ...
    </tr>
</thead>

as my header, what I see is a table with a totally empty first column and the rest of the columns displayed as I want and expect. No checkboxes appear. Thank you for the help so far. Can you offer any other suggestions?

Ryan

kthorngren

Have you included the select CSS and JS? The select CSS contains the config to display the checkboxes.

You only need to define the checkbox in either columns or columnDefs. But having it in both should work.

Kevin

ryan_ryan

No I hadn't. All working now; sorry about that. Your time wasn't in vain, though. I would have needed the first response even without my silly oversight.

Thank you!