Unable to get columnControl working

murday1983

I have my table set up and working correctly using the code below, but whenever I add
columnControl: ['order', ['searchList']]

I get the following error
Cannot read properties of null (reading 'appendChild')

Code

    let mainConfig = {
        ordering: true,
        order: [[0, 'asc'], [1, 'asc']],
        info:     true,
        responsive: true,
        pagingType: "simple_numbers",
        pageLength: 25,
        draw: 1,
        autoWidth: true,
        dom: "<'row'<'#col2.col-xs-12 col-md-6 text-right'fB><'#col1.col-xs-12 col-md-6 text-muted'i>>rt<'bottom'lp><'clear'>",
        buttons: [
            {
                extend: 'csv',
                title: 'CSV File - ' + moment(new Date()).format('YYYY.MM.DD')
            }
        ],
        data: data,
        columnControl: ['order', ['searchList']],
        columns: [
            { data: 'one', className: "text-capitalize", title: 'one' },
            { data: 'two', className: "text-capitalize", title: 'two' },
            { data: 'three', title: 'three' }
        ]
    }

    $('#my-datatable').dataTable(mainConfig).api();

If I take out the columnControl the table loads fine

I have the CSV button extension working fine. Note i am loading all CSS and JS files in the correct order

kthorngren

Your code works in this test case:
https://live.datatables.net/dosimiya/1/edit

Looks like the error on line 2647 is where ColumnControl is populating the header (assuming you are using version 1.1.1):

            this._dom.wrapper = document.createElement('span');
            this._dom.wrapper.classList.add('dtcc');
            this._dom.target.appendChild(this._dom.wrapper);

Do you have a header configured in you HTML table?

Can you provide a link to your page or test case that replicates the issue? Update mine if you wish. Maybe upde it with your HTML table configuration.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

allan

Seems to work just fine for me: https://live.datatables.net/rudozedo/1/edit .

Please link to a test case showing the issue so I can help to debug the problem.

Allan

powermarket

I had the same issue when using the most recent Column Control v1.1.1 and DataTables v1.10.12. My solution was to use DataTables v2.3.5, which gets rid of the error and everything works as expected. However, this involves extra work updating code to the new version.

allan

Column Control v1.1.1 and DataTables v1.10.12

ColumnControl will not work with DataTables 1.x. It uses API methods that weren't available in 1.x. In fact, it needs DataTables 2.3.2 or newer for the latest release of ColumnControl.

Allan