ColumnControl — DataTables forums

ColumnControl header/control alignment not working for datetime

bg7 — Fri, 26 Jun 2026 16:09:45 +0000

We're using datetime columns and we'd like to have the ColumnControl headers/controls left/right alignment be consistent with all other column headers/controls (we'd prefer the controls on the right side). I found this page that explains how to do that:

https://datatables.net/extensions/columncontrol/examples/styling/alignmentBothLeft.html

However, while it works for date columns it doesn't appear to work for datetime columns. Here's an example:

https://live.datatables.net/mijusame/5/edit

This line in the example:

DataTable.type('datetime', 'className', 'dt-left');

doesn't seem to have any effect. Am I doing something wrong?

Thanks.

Ben

Date search does not always work

PaulVickery — Sun, 22 Feb 2026 18:13:11 +0000

Good morning, please can someone assist me

I have two issues, however as I cannot demonstrate them properly on the live.datatables.net site, I have created a test site at https://dt.taskmgr.co.uk/ (I needed to show the issues using ajax and a date format of "2026-05-25", i.e. 'Y-m-d'.

I have not seen any recent issues reported in this area, so apologies if this is a duplicate.

Issue 1)
I cannot get search working correctly with columnControl. I am using moment.js and I can order the dates correctly. However certain dates cannot be searched.
In the example, I have provided four dates, two can be searched, and two cannot.

Issue 2)
When stateSave is used in conjunction with columnControl, then even fewer dates can be searched. In the example, I have provided two displays, one that shows what happens when stateSave is set to “true” and one when it is commented out.

To reproduce using Chrome using the test site:

1) Clear the browser cache
2) Reload the page (F5)
3) In the Date columnControl search box where stateSave set to true, search for the four dates in turn

25/05/26 should fail
06/02/26 should pass
29/11/26 should pass
26/04/26 should fail

4) Repeat step 3 using the bottom table and the results should be the same.
5) Reload the page
6) Search again for the two dates that passed in step 3, i.e. 06/02/26 and 29/11/26 in the top table. Both should now fail
7) However, if you check in the bottom table, where stateSave is commented out, the results should be the same as in step 3.

Issue 1 can also be seen when looking at the example page https://datatables.net/extensions/columncontrol/examples/searchDates/rendering-moment.html and searching for 7th June 2011 in the “Start date” search box.

Relevant files are:




    
    

    Datetest

    
    
    
    
    
    

    
    
    
    

    
    

    
    
    

    
    
    
    




    
            stateSave set to true
        
            
                
                    Name
                    Date
                
            
        
        


    stateSave commented out
                
            
                
                    Name
                    Date

Javascript File

addEventListener("DOMContentLoaded", function () {
    var editor = new DataTable.Editor({
        ajax: 'php/table.datetest.php',
        table: '#datetest',
        fields: [
            {
                "label": "Name:",
                "name": "name"
            },
            {
                "label": "Date:",
                "name": "mydate",
                "type": "datetime",
                "format": "DD\/MM\/YY",
                displayFormat: 'DD\/MM\/YY',
                wireFormat: 'YYYY-MM-DD',
            }
        ]
    });

    var table = new DataTable('#datetest', {
        ajax: 'php/table.datetest.php',
        columnControl: [
            {
                target: 0,
                content: ['orderStatus']
            },
            {
                target: 1,
                content: ['search']
            }
        ],
        stateSave: true,
        ordering: {
            indicators: false
        },
        columns: [
            {
                "data": "name"
            },
            {
                "data": "mydate"
            }
        ],
        columnDefs: [
            {
                targets: [1],
                render: DataTable.render.datetime('DD\/MM\/YY'),
            }
        ],
        layout: {
            topStart: {
                buttons: [
                    { extend: 'create', editor: editor },
                    { extend: 'edit', editor: editor },
                    { extend: 'remove', editor: editor }
                ]
            },
            bottomStart: null,
            bottomEnd: null
        },
        select: true
    });
    var table = new DataTable('#datetest1', {
        ajax: 'php/table.datetest.php',
        columnControl: [
            {
                target: 0,
                content: ['orderStatus']
            },
            {
                target: 1,
                content: ['search']
            }
        ],
        //  stateSave: true,
        ordering: {
            indicators: false
        },
        columns: [
            {
                "data": "name"
            },
            {
                "data": "mydate"
            }
        ],
        columnDefs: [
            {
                targets: [1],
                render: DataTable.render.datetime('DD\/MM\/YY'),
            }
        ],
        layout: {
            topStart: null,
            bottomStart: null,
            bottomEnd: null
        },
        select: true
    });
});

PHP Controller file

sql( "CREATE TABLE IF NOT EXISTS `datetest` (
    `id` int(10) NOT NULL auto_increment,
    `name` varchar(255),
    `mydate` date,
    PRIMARY KEY( `id` )
);" );


Editor::inst( $db, 'datetest', 'id' )
    ->fields(
        Field::inst( 'name' ),
        Field::inst( 'mydate' )
            ->validator( Validate::dateFormat( 'Y-m-d' ) )
            ->getFormatter( Format::dateSqlToFormat( 'Y-m-d' ) )
            ->setFormatter( Format::dateFormatToSql( 'Y-m-d' ) )
    )
    ->process( $_POST )
    ->json();

Example data showing date format

{
  "data": [
    {
      "DT_RowId": "row_1",
      "name": "user1",
      "mydate": "2026-05-25"
    },
    {
      "DT_RowId": "row_2",
      "name": "user2",
      "mydate": "2026-02-06"
    },
    {
      "DT_RowId": "row_3",
      "name": "user3",
      "mydate": "2026-11-29"
    },
    {
      "DT_RowId": "row_4",
      "name": "user4",
      "mydate": "2026-04-26"
    }
  ],
  "options": [],
  "files": []
}

How to best programmatically read active filters in columncontrol?

henrik k — Wed, 13 May 2026 05:49:45 +0000

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

What's the best method to programmatically read what an end user has put in for search values in columns with the column control?

E.g. I have a column that's named 'name' and an end user has set a filter that only include names that contains henrik, how to extract that the filter contains is active with the data 'henrik'?

Possible memory leak on AutoFill and DateTime

hserveira — Wed, 13 May 2026 07:13:42 +0000

I have a SPA application that relies heavily on creating and destroying DataTables and Editors. It's been a while since I noticed that, over time, memory footprint increases, along with detached nodes. After trying to fix it several times I finally gave up, until today I gave Copilot access to my page and it found the following:

_Opening 'View Items' creates DateTime and AutoFill plugin listeners that are not fully unbound when the DataTable is destroyed. The leaked handler sources identify the plugins:
DataTables DateTime handlers:
function(t,e){e.oLanguage.datetime&&(g.extend(!0,o.c.i18n,e.oLanguage.datetime),o._optionsTitle())}

DataTables AutoFill handler:
function(){0 _

After this analysis, it came up with the following code, which to my surprise solved the increasing memory footprint:

const $ = window.jQuery;
const DataTable = $?.fn?.dataTable;

function normalizeNamespace(namespace) {
    if (!namespace) {
        return '';
    }

    return namespace.startsWith('.') ? namespace : `.${namespace}`;
}

function getEventEntries(target, eventName) {
    const events = $._data?.(target, 'events') || {};
    return Array.isArray(events[eventName]) ? events[eventName].slice() : [];
}

function getAddedEntries(beforeEntries, afterEntries) {
    const beforeSet = new Set(beforeEntries);
    return afterEntries.filter((entry) => !beforeSet.has(entry));
}

function appendNamespace(entry, namespace) {
    if (!entry || !namespace) {
        return;
    }

    const namespaceToken = normalizeNamespace(namespace).slice(1);

    if (!namespaceToken) {
        return;
    }

    const namespaceParts = (entry.namespace || '').split('.').filter(Boolean);

    if (!namespaceParts.includes(namespaceToken)) {
        namespaceParts.push(namespaceToken);
        namespaceParts.sort();
        entry.namespace = namespaceParts.join('.');
    }
}

function patchDateTime() {
    const DateTime = DataTable?.DateTime || window.DateTime;

    if (!DateTime?.prototype?._constructor || !DateTime?.prototype?.destroy) {
        return;
    }

    const originalConstructor = DateTime.prototype._constructor;
    const originalDestroy = DateTime.prototype.destroy;

    DateTime.prototype._constructor = function (...args) {
        const beforeEntries = getEventEntries(document, 'i18n');
        const result = originalConstructor.apply(this, args);
        const namespace = normalizeNamespace(this?.s?.namespace);

        if (!namespace) {
            return result;
        }

        const addedEntries = getAddedEntries(beforeEntries, getEventEntries(document, 'i18n'));

        addedEntries.forEach((entry) => appendNamespace(entry, namespace));

        return result;
    };

    DateTime.prototype.destroy = function (...args) {
        const namespace = normalizeNamespace(this?.s?.namespace);

        if (namespace) {
            $(document).off(namespace);
        }

        return originalDestroy.apply(this, args);
    };
}

function patchAutoFill() {
    const AutoFill = DataTable?.AutoFill;

    if (!AutoFill?.prototype?._constructor || !AutoFill?.prototype?.enable || !AutoFill?.prototype?.disable) {
        return;
    }

    const originalConstructor = AutoFill.prototype._constructor;
    const originalEnable = AutoFill.prototype.enable;
    const originalDisable = AutoFill.prototype.disable;

    AutoFill.prototype._constructor = function (...args) {
        const result = originalConstructor.apply(this, args);
        const namespace = normalizeNamespace(this?.s?.namespace);

        if (namespace && this?.s?.dt) {
            this.s.dt.on(`destroy${namespace}.cleanup`, () => {
                $(window).off(namespace);
            });
        }

        return result;
    };

    AutoFill.prototype.enable = function (...args) {
        const beforeResizeEntries = getEventEntries(window, 'resize');
        const beforeOrientationEntries = getEventEntries(window, 'orientationchange');
        const result = originalEnable.apply(this, args);
        const namespace = normalizeNamespace(this?.s?.namespace);

        if (!namespace) {
            return result;
        }

        const addedResizeEntries = getAddedEntries(beforeResizeEntries, getEventEntries(window, 'resize'));
        const addedOrientationEntries = getAddedEntries(beforeOrientationEntries, getEventEntries(window, 'orientationchange'));

        addedResizeEntries.forEach((entry) => appendNamespace(entry, namespace));

        addedOrientationEntries.forEach((entry) => appendNamespace(entry, namespace));

        return result;
    };

    AutoFill.prototype.disable = function (...args) {
        const result = originalDisable.apply(this, args);
        const namespace = normalizeNamespace(this?.s?.namespace);

        if (namespace) {
            $(window).off(namespace);
        }

        return result;
    };
}

if ($ && DataTable && !window.__dataTablesCleanupPatchInstalled) {
    window.__dataTablesCleanupPatchInstalled = true;
    patchDateTime();
    patchAutoFill();
}

Decided to leave this here in case you want to investigate or anyone else faces the same issue.

Regards,

click event on column control footer inputs

Mwhite007 — Mon, 11 May 2026 11:39:43 +0000

https://live.datatables.net/zezuyela/7/edit

the end goal is to deselect and de-focus any DataTable row or cell when i click in the search input in the footer. I think i have the code to do that but the problem i am having is firing the click event when i click in a footer input. clicking on an input is ignored. i have tried many variations and when it miraculously works i think i solved it but then it goes back to not working
this is the current iteration:

  /* deselect any table cells with focus  */
  $("input.form-control").on('click', function() {
    console.log("click on footer input");
    systemTable.rows( {selected: true } ).deselect();
    systemTable.cell({focused:true}).cell.blur();
  });

Problems with Disabling Column Control for Specific Columns

henrik k — Sun, 10 May 2026 18:24:06 +0000

Link to test case: https://live.datatables.net/hifoyuza/1/
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

var table = new DataTable('#example',
 {
columnControl:  [ { target: 0, content: [ 'orderAsc' ] }, { target: 1, content: [ 'search' ] } ],
  columnDefs: [{
        target: -1,
        columnControl: []
    },
              
              ]
});

I'm having problems do disable column control on specfic columns when column control has been initiated with a target of 2 header rows, as shown in the example above.

How can I use column specific column control in use cases like this?

how to align search input fields when target is tfoot

Mwhite007 — Wed, 01 Apr 2026 12:46:43 +0000

i have my column control search fields in the footer but i want the box on the left of the column if it's text and aligned right if it's numeric (same as body)

How to exclude first column (select checkbox) from columnControl where target is tfoot?

Mwhite007 — Mon, 30 Mar 2026 11:26:56 +0000

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

Server Side Processing, ColumnControl, searchDateTime, manually input invalid date format -> error

kschl — Wed, 18 Feb 2026 15:47:23 +0000

Hi,

I have this scenario:
* Server Side Processing (SSP)
* .NET Server Side library 2.5.2
* ColumnControl

ColumnControl option:
* searchDateTime

This error message appears, when I manually input date with invalid format:

Conversion failed when converting date and/or time from character string

Probably due to bad SQL date format. Without SSP: no error message.

As workaround, is it possible to set the input field to readonly?
Is there a way to intercept and validate input before it reaches the server or handle it on the server side?

Thank you very much for your help.

ColumnControl for Mjoined data

nlooije — Fri, 06 Feb 2026 09:27:08 +0000

Columncontrol is a great addition to Datatables.
Is there support for columnControl on mjoined data?

Help with programmatically setting filter type for a column in ColumnControl.

michael_657 — Tue, 03 Feb 2026 16:38:45 +0000

Link to test case: https://live.datatables.net/fahenuga/1/edit

Description of problem:
Having trouble programmatically setting the filter type for a column. Setting the selection option can be done but I'm unable to trigger the update of the associated search type icon ('.dtcc-search-type-icon') or the clear icon.

Saw this post but the 'triggerNative' function doesn't seem public or I'm using it wrong.

I'm using just a basic setup for the ColumnControl and attempting to change the filter type and icon.

{
    columnControl: {
        target: 'thead:1',
        content: ['search']
    }
}

const DtCCHead = $('#myTable > thead > tr:nth-child(2) > td[data-dt-column="2"] span.dtcc > div > div').eq(1);
DtCCHead.find('select').val('notEqual').trigger('change').trigger('click').trigger('mouseup').trigger('mousedown');
DtCCHead.find('input').val('Tokyo').trigger('change');

Basic search list example JS exception

kschl — Tue, 03 Feb 2026 11:30:46 +0000

Hi,

thank you very much for providing the wonderful ColumnControl extension.

Link to Test case:
https://datatables.net/extensions/columncontrol/examples/searchList/basic.html
Bootstrap 5
Edge, Version 144.0.3719.92 (Official Build) (64-Bit)

Description of problem:
1. Click Hamburger button of any column
2. Click in search field
3. Hit ESC key
→ Uncaught TypeError: Cannot read properties of undefined (reading 'parentNode')
in dropdown.js

No exception in other Bootstrap versions using Edge and Bootstrap 5 using Chrome, Version 144.0.7559.110 (Official Build) (64-bit)

ColumnControl - Auto focus the search input & select filtered results

hserveira — Fri, 23 Jan 2026 05:55:13 +0000

It seems I chose the incorrect category when posting this, and can't change or delete this post. Please help me change it

Users were asking for the search input inside the dropdown to be automatically focused, so they can start typing right after the dropdown opens, so I patched the dataTables.columnControl.js attachDropdown function. Here's the snippet:

function attachDropdown(dropdown, dt, btn) {
    // ... rest of the code

    // *** PATCH START *** [Line 242]
    // Auto focus the first input element in the dropdown
    var firstInput = dropdown.querySelector('input');
    if (firstInput) {
        firstInput.focus();
    }
    // *** PATCH END *** [Line 248]

    // ... rest of the code
}

Another requirement was quickly selecting the filtered options by pressing enter. For that, I patched the following functions:

    CheckList.prototype._redraw = function () {
        var buttons = this._s.buttons;
        var el = this._dom.buttons;
        var searchTerm = this._s.search.toLowerCase();
        el.replaceChildren();
        for (var i = 0; i < buttons.length; i++) {
            var btn = buttons[i];
            if (!searchTerm ||
                btn
                    .text()
                    .toLowerCase()
                    .includes(searchTerm)) {
                el.appendChild(btn.element());
            // *** PATCH START *** [Line 896]
            // Add a new 'visible' property which will be used on the selectFiltered function
                btn._s.visible = true;
            } else {
                btn._s.visible = false;                
            }
            // *** PATCH END *** [Line 901]
        }
        this._dom.empty.style.display = buttons.length === 0 ? 'block' : 'none';
        el.style.display = buttons.length > 0 ? 'block' : 'none';
    };

    function CheckList(dt, host, opts) {
         // ... rest of the code

        // *** PATCH START *** [Line 673]
        var searchKeypress = function (e) {
            if (e.key === 'Enter') {
                _this.selectFiltered();
                _this._s.handler(e, null, _this._s.buttons, true);
                _this._updateCount();
            }
        };
        // *** PATCH END *** [Line 681]

        // ... rest of the code

        // *** PATCH START *** [Line 690]
        // Listen for enter key on search to select filtered items
        dom.search.addEventListener('keypress', function (e) {
            if (e.key === 'Enter') {
                _this.selectFiltered();
                _this._s.handler(e, null, _this._s.buttons, true);
                _this._updateCount();
            }
        });
        // *** PATCH END *** [Line 699]

        dt.on('destroy', function () {
            // *** PATCH END*** [Line 705]
            dom.search.removeEventListener('keypress', searchKeypress);
            // *** PATCH START *** [Line 707]
        });
    }

And created this new function:

    /** PATCH START [Line 828]
     * Select filtered buttons
     *
     * @returns Self for chaining
     */
    CheckList.prototype.selectFiltered = function () {
        for (var i = 0; i < this._s.buttons.length; i++) {
            if (this._s.buttons[i]._s.visible) {
                this._s.buttons[i].active(true);
            }            
        }
        return this;
    };
    /** PATCH END */ [Line 841]

Help with using navbar with ColumnControl

PaulVickery — Mon, 08 Dec 2025 17:57:13 +0000

Please can someone help me with my issue.

I am using columnControl in conjunction with "navbar". The problem that I have is that when I select the dropdown menu, the ColumnControl "div.dtcc-search-type-icon" displays in front of the dropdown menu.
What happens is when I select the dropdown menu and move the mouse pointer down the menu items, the menu is lost if I move the pointer over the ColumnControl icon (highlighted in red in the attachment) and the example below.

Please see the following example: https://live.datatables.net/jififibe/1/edit
In the example I am using:

    columnControl: {
      target: 1,
      content: ['search']
    },

One a separate note, if I use the following instead, the issue does not occur.

columnControl: ['searchDropdown'],

I would be grateful for any help.

ColumnControl - Clear Search button not enabling on search

yajra — Sun, 21 Sep 2025 06:31:17 +0000

Using the same example as https://datatables.net/extensions/columncontrol/examples/search/clearAll.html, the clear button doesn't get enabled when doing a column search.

dt.columns().every(function () {
    // this always returns null
    if (this.search.fixed('dtcc') || this.search.fixed('dtcc-list')) {
        enabled = true;
    }
});

Any advice on what might have caused the issue? Thanks!

Placeholder in input search control

slolo — Wed, 01 Oct 2025 07:50:03 +0000

Link to test case: NA
Debugger code (debug.datatables.net): NA
Error messages shown: NA
Description of problem: Hello,

Can you tell me if it is possible to display in the HTML input text field of the columnControl component a specific placeHolder or one that would take the title of the column to which it is attached?

Thanks in advance for your answer and have a nice day.

Lolo

Unable to set target 1 for columnControl

henrik k — Sun, 28 Sep 2025 17:59:43 +0000

Link to test case:
Was unable to create a testcase in http://live.datatables.net with columnControl activated. The columncontrol didn't seem to load at all when using the sample code from the columnControl pages.

Debugger code (debug.datatables.net):
Error messages shown:

[Error] TypeError: undefined is not an object (evaluating 'header[target][column]')
__column_header (datatables.js:8734)
iterator (datatables.js:7190)
(anonym funktion) (datatables.js:7408)
(anonym funktion) (datatables.js:7280)
(anonym funktion) (datatables.js:28189)
ColumnControl (datatables.js:28064)
(anonym funktion) (datatables.js:28287)
(anonym funktion) (datatables.js:10168)
iterator (datatables.js:7190)
(anonym funktion) (datatables.js:7280)
(anonym funktion) (datatables.js:28275)
dispatch (jquery-3.7.1.min.js:2:40041)
trigger (jquery-3.7.1.min.js:2:70130)
(anonym funktion) (jquery-3.7.1.min.js:2:70734)
each (jquery-3.7.1.min.js:2:3134)
_fnCallbackFire (datatables.js:6708)
(anonym funktion) (datatables.js:4850)
_fnLoadState (datatables.js:6328)
_fnInitialise (datatables.js:4818)
(anonym funktion) (datatables.js:491)
each (jquery-3.7.1.min.js:2:3134)
DataTable (datatables.js:90)
(anonym funktion) (datatables.js:14065)
DataTable (datatables.js:69)
drawDatatable (datatablesControls.js:165)
primaryButton (areas.js:107)
userDialogResult (userDialog.js:471)
dispatch (jquery-3.7.1.min.js:2:40041)
trigger (jquery-3.7.1.min.js:2:70130)
(anonym funktion) (jquery-3.7.1.min.js:2:70734)
each (jquery-3.7.1.min.js:2:3134)
(anonym funktion) (userDialog.js:67:102)
dispatch (jquery-3.7.1.min.js:2:40041)

Description of problem:

When I'm setting { target: 0, content: ['search'] } , the columnControl initiates and works as expected.

But when setting target to 1m the initiation results in the error above.

I'm not using a pre-set header in the HTML code, the HTML that the Datatable is initiated to is just an empty

table>.

Using Datatables v.2.3.4 with ColumnControl v1.10.

Is it possible to set a preDefined search criteria in columnControl?

henrik k — Sun, 28 Sep 2025 18:07:49 +0000

Have started to implement the new columnControl as replacement for searchBuilder for some of the tables we use. So far the UI is cleaner and easier to understand. But I don't understand how do we use preDefined criterias when initiating a table with columnControl? E.g. previously I used the searchBuilder.preDefined parameter to have an initial search on the table, but how do I implement a similar functionality for columnControl searches?

ColumnControl searchList not updating when table data changes

bg7 — Wed, 23 Jul 2025 20:44:31 +0000

I have a table that uses the ColumnControl searchList. When data is added, updated or removed from the table the search list contents aren't updating. In this example if you add a new entry with unique field values and check the search list dropdowns the new values don't appear.

https://live.datatables.net/dufeciyo/1/edit

Is there a way to get them to stay in sync with the data in the table?

Thanks.

Ben

Different spacing in filter fields between String and Numeric types

slolo — Fri, 26 Sep 2025 06:52:13 +0000

Link to test case: https://datatables.net/extensions/columncontrol/examples/styling/bootstrap4.html
Debugger code (debug.datatables.net): NA
Error messages shown: NA
Description of problem: Hello,

Is it normal that the space between the left border and the text is not the same?

For string fields:

For numeric fields:

My example is taken from Bootstrap 4 but the behavior is essentially the same on other frameworks.

Also, do you think is could be nicer if you add the same space to the right?

Thanks in advance for your answer and have a nice day.

Problem in columncontrol / colReorder examples (Selected columns)

slolo — Sat, 20 Sep 2025 15:14:30 +0000

Link to test case: https://datatables.net/extensions/columncontrol/examples/colReorder/options.html
Debugger code (debug.datatables.net): NA
Error messages shown: NA
Description of problem: Hello,

If I click on the "Position" reorder button, the column goes to the left that is the default behavior.
But, in the example, columns 0 and -1 are not reorderable.

new DataTable('#example', {
    colReorder: {
        columns: ':not(:first-child, :last-child)'
    },
    columnControl: ['order', 'reorder'],
    columnDefs: [{
        targets: [0, -1],
        columnControl: ['order']
    }],
    ordering: {
        indicators: false,
        handler: false
    }
});

Then, I am not able anymore to move the "Position" column once is it has reach the left border.

Is it normal for you or is it a small "bug".

Thanks in advance for your answer and have a nice day.

Can ColumnControl show a searchList of dates for a column of dates/times?

bg7 — Mon, 25 Aug 2025 21:37:37 +0000

I have a column that is dates/times but I'd like to be able to provide the user with a searchList that is by date. By default the searchList includes the time which is too granular. In the example linked below there are two start dates with the exact same date/time so they only have one entry in the searchList. The other three start dates are all the same but the times are different. Ideally I'd like to see only entries by date in the search list which in this case would only be two dates. It would be great if was possible for both the search and searchList options. Currently, with the search option, when they pick a date from the calendar picker with the "equals" option set they get no results (because the time, which they can't select, doesn't match) which ends up being confusing.

https://live.datatables.net/maquxake/1/edit

Related to this, is there a way to set the calendar picker to be a date/time picker?

Thanks.

Ben

ColumnControl search regex

bg7 — Wed, 23 Jul 2025 17:33:20 +0000

When using the ColumnControl search content is it possible to enable regex? I'm using the search similarly to how it's shown in this example and would like to enable regex for the individual search fields for each column.

https://datatables.net/extensions/columncontrol/examples/initialisation/multipleRows.html

Thanks.

Ben

If you have ideas for what would be useful additions to ColumnControl, please let me know!

DTBLs — Mon, 23 Jun 2025 13:40:17 +0000

Link to test case: N/A
Debugger code (debug.datatables.net): N/A
Error messages shown: N/A
Description of problem: Not a problem and awesome as always @allan on the ColumnControl release! It's well over a decade now that I originally found datatables and I've been using it ever since. So perhaps going on almost 20 years! Amazing work as always and can't say thanks enough!!!!

During my code travels, I found this library back in the day. https://github.com/vedmack/yadcf Wonder if you want to check it out and diff or perhaps you are already aware of it? It proved quite useful back in the day and it looks like the developer has started some fresh work as well. Just some thoughts - great work as always!!!!!!!!!!

Thanks!!!!!

Several questions about some issues with the new ColumnControl extension

slolo — Tue, 03 Jun 2025 08:48:08 +0000

Link to test case: https://live.datatables.net/toziquka/1/edit
Debugger code (debug.datatables.net): NA
Error messages shown: NA
Description of problem: Hello,

I'm trying to use the new ColumnControl extension and I'm running into several small issues.

1./ How do I prevent the sorting from displaying on the "Action" column?

2./ How do I prevent the "Action" column from being moved via drag and drop?

3./ How do I prevent the "Action" column from appearing in the "SearchBuilder" component?

4./ Why aren't the field labels displayed in the SearchPanes component?

5./ Why don't the search fields take up the entire width of the column (given that with Bootstrap 4, a component with the form-control class has a size of 100%)?

It is really more visible when the content of the cell is longer.

If you have a look to this test case , you can see that it works well for the SearchPanes and SearchBuilder.

I'll continue to look for solutions in the meantime.

Thank you in advance for your help and I wish you a pleasant day.

columnControl Blank entries

ordco_pete — Wed, 04 Jun 2025 05:42:14 +0000

Link to test case:

Vanilla: https://live.datatables.net/seyufanu/1/edit
BS5: https://live.datatables.net/kivigedo/1/edit

Error messages shown: No error

Description of problem:

Hi, I searched but I have not seen anyone reporting this on the new columnControl extension.

This is a really minor issue.

Using Bootstrap 5 the blank option (Position Tiger Nixon in demos above) in search list is very small (few pixels high) at the top of the list. It was difficult to locate and different from searchBuilder - which seems to give that option a full row height. In bootstrap this is made a little more difficult by there being no contrast when moving the mouse over the searchlist or its not discernible on my monitor.

I included a vanilla example as this does have contrast on mouse so you can find it more easily but its still not the right height for users to be aware its even an option.

Please let me know if you need more info

thanks again for this awesome extension, and the global clear button which i just found after being unable to see where i had set a very restrictive filter...

pete

Missing translations into Internationalisation plug-ins (i18n)

slolo — Tue, 03 Jun 2025 08:17:22 +0000

Link to test case: NA
Debugger code (debug.datatables.net): NA
Error messages shown: NA
Description of problem: Hello,

Could you add please the missing fields into "Internationalisation plug-ins" for the new extension ColumnControl?

I can see the new sentences into dataTables.column Control.js file and I could add them myself into my own fr-FR.json file but it would be nice that everyone can translate them themselves on the web page https://datatables.net/plug-ins/i18n/

Thanks in advance for your answer and have a nice day.