What is the difference betweem 2 forms of columns initialization?

jstuardo

Hello,

what is the practical difference between these column initializations?

1 -

columns: [
                    {
                        data: function (row, type, val, meta) {
                            return '<div class="checkbox d-inline m-0 p-0"><input id="chk_' + row.id + '" type="checkbox" /><label for="chk_' + row.id + '" class="cr mb-0">' + data + '</label></div>';
                        },
                        width: 70,
                        orderable: false
                    },
                ]

2 -

columns: [
                        { data: "id", width: 70, orderable: false }
                    ],
columnDefs: [
                    {
                        targets: 0,
                        render: function (data, type, row, meta) {
                            return '<div class="checkbox d-inline m-0 p-0"><input id="chk_' + row.id + '" type="checkbox" /><label for="chk_' + row.id + '" class="cr mb-0">' + data + '</label></div>';
                        }
                    }
                ]

Both do the same thing so I am wondering why to choose one instead of the other. I have a grid that I mixed both forms. For one column I used first form, while for other column I used the second form.

Regards
Jaime

kthorngren

The idea of columnDefs is to allow for applying the same config to multiple columns through the use of columnDefs.targets. Generally if you are using columns its a good idea to place all the config options there. You can use both but if you have conflicting options in columns and columnDefs then one will override the other causing potential confusion with how the Datatable is configured.

Another case maybe where you have a DOM sourced Datatable and don't need to define the columns so you might use columnDefs to define some of them.

The docs provide more details on the above.

Kevin