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

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

Description of problem:
I have a table that users can edit by clicking a row to open inline editing. Because our users might be on mobile, they always aren't able to press the return key to submit a row edit - so we've added an inline save button.

When a user makes a change to the table linked above (i.e. checking or unchecking the checkbox, that's all I've configured my postman endpoint to handle), and presses return, the edit applies beautifully.

However, if the user takes the same action and instead clicks my save button (which only has one action, calling editor.submit()), the editor window closes briefly and shows the pre-save value for a brief moment before reloading the row and showing the data that was returned from the server.

Ideally, I'd like both the return key and save button to behave the same - i.e. not showing the old value once the save button is clicked.

I've tried a bunch of things, including manually modifying the row's underlying data() value and forcing a redraw at each of presubmit/postsubmit/submitcomplete, but I can't get the old values to stop showing up for that brief moment when clicking the save button. Any help would be vastly appreciated.

Looking at the "Options via Ajax only" example it shows how searchList dropdowns can be populated by values returned in columnControl when the table is loaded via ajax.

This is nice, but for my requirement I already know what specific items I want in each dropdown and because I'm using ajax I want them to stay the same, even if the values do not currently exist in the corresponding column of the currently rendered table.

Is there a way of pre-loading the values in columnControl rather than them being returned with every ajax request and thus reducing the size of the response?

i did all steps described in
https://datatables.net/forums/discussion/62113/how-to-reverse-excel-pdf-columns-order-to-rtl#latest
but not worked for me as i attashed to you

i did it as discribed

columnDefs: [
{
targets: '_all',
render: function(data, type, row) {
if (type === 'PDF') {
return data.split(' ').reverse().join(' ');
}
return data;
}
}

but not worked for me

I have an address page that utilizes saved states & state restores with a button that opens a google map with whataver addresses are being shown. Each map icon contains a link to edit the address which opens page to edit (which is the same source page but opens the second page in a new tab) , I pass the addressaid so it knows what is being edited.

In this second page, I want to remove any saved states & serches but I don't want to affect the original page and states applied if & when I refresh.
I currently have this in datatable configuration:
stateLoadParams: function(settings, data) {
if (pAddressAID !==0 ) {
data.search.search = '';
return false;
}; //if (pAddressAID !==0 ) {
},

pAddressAID is the addressID that is being edited passed from the map.

this seems to work but when I refresh my original page, the state is no longer selected and I have to reselect.

I would like to remove current searcheds & searchbuilder in the second page and have it not affect the first address page.

Hi, i'm trying to use an autocomplete field type where options are a label->value pair.
When i select a result from the option list, i expect the input shows me the label and "behind" it has the ID saved to be sent.
This does not happens.

Try it here: https://live.datatables.net/holeqaca/3/edit
Create a new item, select an Office and it will show the ID instead of the office name.

It's not cool to show the user the id...

Any way to solve this?
Thank you

Below is code I am using to populate my DT:

    var maintable = new DataTable('#Stats', {
        serverSide: false,
        processing: true ,
        
         ajax: { url:'php/Stats.php', 
        type: 'POST',
              data: {
                pageAID: thisPageAID,
               groupLevel: (document.getElementById("txtGroupBy")).value,
               vsTimeIncrementHrs: (document.getElementById("txtpVs")).value,

            }
        },

I added buttons which sets the value in the two text fields (txtGroupBy & txtpVs) & issues a dt.ajax.reload, but when I inspect the posted parameters in Stats.php, the values are always set to the initial default values.

buttons: [
                        {
                            text: 'Ward, District, Party',
                            action: function (e, dt, node, config) {
                                pGroupLevel='Ward, District, Party';
                                    (document.getElementById("txtGroupBy")).value = pGroupLevel;
                    dt.ajax.reload(); // Reloads the data from the server
                            }
                        },

from stats.php
```js
if ( isset($_POST['groupLevel']) ) {
$groupLevel = $_POST['groupLevel'];

};
log_message("groupLevel " . $groupLevel, '../logs/debug.log', 'DEBUG', $_SERVER['PHP_SELF'], False);

```js

Hello!
I am getting that "DataTables warning: table id=table_1 - Cannot reinitialise DataTable."

https://lakeeriefallbrawl.com/fb2025/roster/

I've tried several of the snippets here in an attempt to remedy this issue, but have not been successful.

Just to be clear, I am inserting these various code snippets into the "wpDatatables > Settings" section. Is this correct, or am I part of the problem?

The error appears when the table is fully rendered.

Alternately - and I understand this is by no means a solution - would it be possible to change the error message to something like "Thanks for your patience. The official roster is loaded. You can search by your first or last name".

Thanks in advance,
EZ Fall Brawl

I am using DataTables to access and view my collection of ancient roadmaps.
Data of the maps is in a CSV and via the presented table one can link to a zoomable version of a map.
Presentation is done with OpenSeaDragon.
See: https://wbeulink.nl/publiek/zoomables/
Works fine thanks to DataTables.
There is a different way to view cards in OpenSeaDragon called: Collectionmode.
A view to a combination of related cards.
See: https://wbeulink.nl/publiek/Kaarten/show.php?name=ANWB-50-Stadsplattegronden-1917
OpenSeaDragon needs information for this view in a simple file.
Example with 3 items:

var tileSources = [
'/sometext/data from row1 columnx/data from row1 column-y.dzi',
'/sometext/data from row2 columnx/data from row2 column-y.dzi',
'/sometext/data from row3 columnx/data from row3 column-y.dzi'
];

var tileNames = [
'data from row1 column-z',
'data from row2 column-z',
'data from row3 column-z'
];
Until now I made such files in a static way.
But I want to be more flexible.
So select and sort via DataTables and then use a button to create the file and start the view.

Is there a way to achieve this.
First step would be the creation of the file (constant name and every time overwritten by new vesion).

Any help is very welcome.

Thanks in advance Willem

$sqlStr = '(select * from tvf_StatReport2(' . $IsProd . ',' . $groupLevel . ',' . $vsTimeIncrementHrs . ' ) ) as JYStats';
Editor::inst( $db, $sqlStr, 'StatsAID' )
the above os giving me:
An SQL error occurred: SQLSTATE[42S22]: [Microsoft][ODBC Driver 17 for SQL Server][SQL Server]Invalid column name '1'.

when I look at the console devmode, the query looks like:

.. FROM (select * from tvf_StatReport2(0, [1], 0 ) ) JYStats...

Hi everyone,

I’m using DataTables with FixedColumns, and I’ve split a single datetime value (in yyyymmddHHMMSS format) into two separate columns: Date and Time.

I’m trying to implement a linked sort behavior, where these two columns are always sorted together and both should remain visually active when sorted.

Requirements

1. Two linked columns (Date + Time)
* The table shows:
** Date→ formatted as YYYY-MM-DD
** Time→ formatted as HH:mm:ss
* Sorting must always consider both columns:
** Primary sort → Date
** Secondary sort → Time

There are 4 valid combinations:
* Date ↑ + Time ↑
* Date ↑ + Time ↓
* Date ↓ + Time ↑
* Date ↓ + Time ↓

When the user clicks on the Dateheader, only the Date direction should toggle,
and when clicking the Time **header, only the Time direction should toggle — but **both should stay active.

2. UI requirement
* When Date/Time sorting is active, **both **headers should visually display sorting arrows (sorting_asc / sorting_desc).
* When any other column is sorted, only that single column should be active (the normal DataTables behavior).

3. Other columns
* For all other columns, sorting should behave normally (single-column sort, with only one active sort indicator).

The issue

Technically, I can handle the sorting logic (since the source data has the combined yyyymmddHHMMSS field — extracting date/time parts for comparison works fine, Date ↑ + Time ↑, Date ↓ + Time ↓ worked).
However, the UI part is problematic.

After sorting, DataTables automatically resets sorting classes and aria-sort attributes,
so only one column (the last sorted one) keeps sorting_asc or sorting_desc,
while the other column (e.g., Date) is reset back to just sorting.

Even when I reapply classes in drawCallback, DataTables overwrites them again.
It seems that DataTables internally supports only one “active” sorted column at a time.

Question

Is there a way to configure DataTables to visually keep two columns active at once (both with sorting icons and aria-sort attributes)?
Or should this be handled completely outside DataTables (e.g., manual sorting + custom header styling)?

If anyone has implemented or seen an example of two linked columns with synchronized sort UI,
please share your approach — I’d really appreciate it.

Thanks in advance!

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

It is probably a stupid question but I am not able to do the following things below:
1./ How to copy, export, ... all lines from a DataTable if no lines are selected (even if I see 10 lines on 50)

Yet in this example it works just fine without doing anything special:
https://datatables.net/extensions/buttons/examples/html5/simple.html

2./ How to avoid to select a line when clicking on the button "Action" (see DataTable without checkbox)

Othewise, if you select all lines (with checkbox in header) and unselect all, there is a small issue in html (see screenshot)

can you confirm this behavior.

thanks in advance for your help and have a nice day.

Link to test case: https://live.datatables.net/gepalawi/1/
Error messages shown: none
Description of problem:
hi
minor issue, i hope the test case is setup properly, this is linked to editor
when using a button collection for the editor functionality the edit button is functioning but visually it is not "disabled" when no row is selected.
example also shows an inline edit button which works fine (using 'btn' class) but the drop downs use the 'dt-button' and visually appear the same (new - edit) regardless of selection.

i think its related to

<li class="dt-button buttons-selected buttons-edit disabled" aria-controls="example">
<a href="#" tabindex="0" class="dropdown-item">Edit</a></li>

the disabled class is being set on the <li> and possibly should be on the <a>
ref:https://getbootstrap.com/docs/5.3/components/dropdowns/#disabled

thanks in advance for any help
pete

I am incorporating websocket/STOMP update notifications to make our ajax based datatables more responsive.

As part of this effort, I would like to determine if an updated data object still matches the DataTables search specification (we are using column based search), and do an in-place replacement if the updated data still meets the search criteria (instead of calling draw and triggering an ajax call).

I prefer to just not call draw() for every update (it causes screen jitter and the drop down menus that we have in some column values get rebuilt so they disappear under the user's cursor. It's just not a great experience.

Instead of re-implementing the search logic, I'd ideally like to be able to re-use the DataTables implementation, is there a way to get at that? The key is that this is an ajax driver DT, we just have a few operations where we want to be more surgical than loading the entire table.

BTW, the update algorithm I'm using is as follows:

When we receive a STOMP update notice, it includes the record id that was changed. We loop the existing DataTable rows to see if any of them contain that id. If we find a matching row, we then do an ajax call to get only that record, then do a dtRow.data(newData).invalidate(); This causes only that row to be redrawn.

What I would like to do is detect if the newData no longer matches the search(), and if that happens, then visually mark the row (change the opacity or something) and start a 1500ms interruptible refresh timer. When the UI settles down, the timer will expire, and we would then trigger a draw() to get the updated version of the paged data (effectively removing the row). Same approach for deleted rows.

If this isn't possible, another idea I'm kicking around is to trigger the ajax call, but add an additional parameter for the id of interest (table.ajax.params() + '&id=123'). If that returns no records, then we would use the removal approach I describe above.

Any thoughts?

Hello Allan and Community

I would like to report another PHP deprecated warning related to null being passed on to a function.

We have installed DataTables version 2.3.4 and Editor version 2.5.0. PHP is currently set to version 8.1 but it is intended to upgrade it to a higher version.

The tables were programmed quite a while ago and did not have this issue while they were running on PHP 7. But we have done a server upgrade, with up-to-date Linux, and running PHP 7 is no option anymore; PHP 8 must now be used.

This is the PHP deprecated warning that occurs:

Deprecated: str_replace(): Passing null to parameter #3 ($subject) of type array|string is deprecated in /var/www/vhosts/.../lib_2.5.0/Editor/Format.php on line 261

This is the function where it occurs:

public static function toDecimalChar($char = ',') {
  return static function ($val, $data) use ($char) {
    return str_replace('.', $char, $val);
  };
}

It is a major undertaking to go through all the tables and make adjustment for this problem in the tables themselves.

As a quick fix I decided to edit the affected section in the Format.php file itself. Here is a possible workaround for this problem:

public static function toDecimalChar($char = ',') {
  return static function ($val, $data) use ($char) {
    if (isset($val) && $val != null)
      return str_replace('.', $char, $val);

    else
      return null;
  };
}

I hope this posting will be helpful to fix these small issues and make this great software more compatible with future PHP versions.

Sincerely,
Gevorg

Link to test case:

Difficult to provide as DataTables debugger does not work on a custom element, with a shadow-root. See below.

Debugger code (debug.datatables.net):

     function outerHTML(node) {
         // if IE, Chrome take the internal method otherwise build one
         return node.outerHTML || (function (n) {
             if (n === document) {
                 return "";
             }
             var div = document.createElement('div'), h;
             div.appendChild(n.cloneNode(true));            <<<<<< This line fails
             h = div.innerHTML;
             div = null;
             return h;
         })(node);
     }

Error messages shown:

Browser console shows:

Uncaught NotSupportedError: Failed to execute 'cloneNode' on 'Node': ShadowRoot nodes are not clonable.

Description of problem:

I'm unable to create a test case for my actual problem because the shown function in the debugger breaks on the call to cloneNode.

I tried to override the file in the browser, and edit the code to return a few lines earlier (at if (n === document) but that breaks later with a JSON parse error "alert" dialog.

Link to test case:

I'm unable to provide one due to https://datatables.net/forums/discussion/81470. Pending that, I have included hopefully useful info below.

Debugger code (debug.datatables.net):

Error messages shown:

None.

Description of problem:

I am using DataTable and the Editor, with Bootstrap 4. COnfiguration is:

DataTables 2.3.4, Editor 2.5.0, AutoFill 2.7.1, Buttons 3.2.5, Column visibility 3.2.5, HTML5 export 3.2.5, Print view 3.2.5, ColReorder 2.1.2, ColumnControl 1.1.1, DateTime 1.6.1, FixedColumns 5.0.5, FixedHeader 4.0.4, KeyTable 2.12.1, Responsive 3.0.7, RowGroup 1.6.0, RowReorder 1.5.0, Scroller 2.4.3, SearchBuilder 1.8.4, SearchPanes 2.3.5, Select 3.1.3, StateRestore 1.4.3

I have a slightly unusual setup in two regards:

1. All the data in the DataTable instance is in a JS Array with 2 columns representing the "key"s and "value"s of a Python dict; there is no server involved. Although the documentation suggests that the ajax option is not required when local data is in use, I have one set as follows to convert the data into the form needed by the Editor:

       this.editor = new DataTable.Editor({
               table: tableSelector,
               idSrc: this.INDEX_KEY,
               fields: this.fields,
               //
               // Modify the data in the table without actually doing a server
               // round trip.
               //
               ajax: function(method, url, data, success, error) {
                   //
                   // Convert the object representation used by DataTables into the
                   // Array needed.
                   //
                   data.data = Object.values(data.data).map(row => this.fields.map(field => row[field.name]));
                   success(data);
               }.bind(this),
           });
   

2. The first "key" column has field.type = "readonly". The second "value" column starts off as a "text" but because each row has a different type, I have the following event handler which updates the "value" column's field to give it an appropriate type when a row is clicked:

       this.dt.dtApi.on("click", "tbody td", function (e) {
               const [key, value] = dicteditor.dt.dtApi.data()[this._DT_CellIndex.row];
               //
               // Replace the value field with one which is type aware. Note
               // that we just leave the replacement in place till next time.
               //
               const field = Object.assign({}, dicteditor.fields[dicteditor.INDEX_VALUE]);
               if (/^-{0,1}\d+(\.{0,1}\d*)$/.test(value)) {
                   field.type = "text";
                   field.attr = {type: "number"};
               } else if (value === "true" || value === "false") {
                   field.type = "checkbox";
                   field.options = [{label: '', value: "true"}];
                   field.separator = '';
                   field.unselectedValue = "false";
                   ...
               } ...more of the same...
               }
               //
               // Get value from editor and push to data source.
               //
               field.getFormatter = function (val) {
                   if (this.type !== "textarea" && this.type !== "checkbox") {
                       if (this.attr?.type !== "number") {
                           val = JSON.stringify(val);
                       }
                   } else if (this.type === "checkbox") {
                       val = val === "true" ? "true" : "false";
                   }
                   return val;
               }.bind(field);
               //
               // Set value pulled from the data source on editor.
               //
               field.setFormatter = function (val) {
                   if (this.type !== "textarea" && this.type !== "checkbox") {
                       val = JSON.parse(val);
                   } else if (this.type === "checkbox") {
                       val = this.actualValue === "true" ? "true" : "false";
                   }
                   return val;
               }.bind(field);
               dicteditor.editor.clear(dicteditor.COLUMN_VALUE);
               dicteditor.editor.add(field);
               //
               // If the value column is clicked, enable inline editing.
               //
               if (this._DT_CellIndex.column === dicteditor.COLUMN_VALUE) {
                   dicteditor.editor.inline(this, dicteditor.COLUMN_VALUE, {
                       onBlur: 'submit',
                       onComplete: 'submit',
                       onReturn: 'submit',
                       submit: 'all',
                   });
           }
           return true;
     });
   

As you can see:

1. The type detection logic is a cutdown example for the purposes of reporting the problem. But you can see how the field is updated.
2. I use getFormatter() and setFormatter() to manage the movement of data between the Editor and the DataTable.
3. I only enable inline() when the second column is the one that is clicked.

So, when the first column is clicked, I can use the Edit button to bring up the full row modal editor, and that works find in that I can view/change/update the data in the table as desired. However, when inline editing is invoked, the correctly typed field ("text", or "text"-with-"type=number", or "datetime", or "textarea", or "checkbox") is shown, and can be interacted with. But any attempt to save the value seems to be ignored. As you can see, I have set onBlur and friends.

Any pointers welcome.

P.S. I reviewed several seemingly related issues without success.

I have been using server side pagination with angular 14 but using angular components to display the data in the html file similar to how it is done here https://stackblitz.com/edit/responsive-server-side-1264?file=app%2Fapp.component.ts

I am now upgrading to angular 17 so I upgraded datatables.net to 2.3 and this is not working now. Angular is not rending any of the data, the datatable just displays sorry not matching items found. Is there a way to use server side pagination but use angular components to display the data in datatables.net 2.3?

I have 4 DataTables on a page (inside tabs) that all share a common "Ticker" column in the same position. When a user sorts any table by clicking a column header, I want the other 3 tables to automatically reorder their rows to match, using the Ticker as the common identifier.
My current approach:

1. Listen for order.dt event on each table
2. When triggered, extract the Ticker order from the sorted table
3. Reorder the other tables by:
   
   • Mapping Ticker values to row data
   • Clearing the table with .clear()
   • Re-adding rows in new order with .rows.add()
   • Calling .draw() to render

Issues I'm running into:

Calling .draw() on target tables sometimes triggers their own order.dt events, creating cascades
Need to prevent infinite loops.
Hidden tables (in inactive tabs) require .rows().invalidate() before .draw() to display correctly

Question: What's the recommended DataTables pattern for programmatically syncing row order across multiple tables? Is there a way to reorder rows without triggering events, or a better approach entirely that I'm missing? Any guidance on the proper API methods or event handling strategy would be appreciated!

                 $('#IndustryDt').DataTable({
                    columnControl: [ 'order', [
                        { "serverSide": true,   target: 1, extend: 'searchList', ajaxOnly: true,  className: 'dtcc-row_no-top-padding',
                                           ajax: function (data, callback, settings) {
                                               debugger;
          $.ajax({
            url: '/api/GetLocationNames',
            dataType: 'json',
            success: function (json) {
              callback(json);
            }
          });
        },
                        // ajax: {
                        // url: '/api/GetLocationNames',  // your server endpoint for location filter options
                        // type: 'GET',
                        // dataType: 'json'
                        //    }
                        }]],
                  destroy: true,
                //  stateSave: true,
                 "processing": true,     // Display a 'Processing' indicator
                 "serverSide": true,     // Enable server-side processing
                 "orderMulti": false,    // For simple ordering
                 "bInfo": true,
                  searching: true,
                 "ajax": {
                     "url": "/Industry/GetIndustryData", // Your ASP.NET Core API endpoint
                     "type": "POST",
                     //"datatype": "json",
                              dataSrc: 'Data'
                 },
                 ordering: {
                   indicators: false,
                      handler: false
                 },
                 columns: [
                 { 'data': 'IndustryId', name:'IndustryId' },
                 { 'data': 'IndustryName', name: 'Industry', autoWidth: true,

                 },
                 { 'data': 'Description', name: 'Description', autoWidth: true },
                 {
                     'data': null,
                     'className': 'dt-center editor-edit',
                     'render': function (data, type, row) {
                                             return '<a onclick="editIndustryDetails(\'' + row.IndustryId + '\')" data-id="'+row.IndustryId+'"  href="#" id="editModal" ><span class="fa fa-edit"></span> </a> &nbsp;<a  href="#"  onclick="DeleteIndustryDetails(\'' + row.IndustryId + '\');"><span class="fa fa-trash"></span> </a>';
                     },
                     orderable: false,
                     width: '10%'
                 }],

             });

Would be nice to be able to specify the default height of a textarea when the form is displayed.

Sometimes I want a rather small textarea, such as 5rem, and other times I want a rather large one, such as 20rem, depending on how much I want to encourage someone to write.

{
    type: 'textarea',
    label: 'Summary:',
    name: 'summary',
    height: '5rem',
    attr: {
        placeholder: 'Please enter a brief summary here (limit 255 characters)'
    }
},
{
    type: 'textarea',
    label: 'Description:',
    name: 'description',
    height: '20rem',
    attr: {
        placeholder: 'Please enter a full description here'
    }
}

I’ve been trying to get a way of using fixedheaders on a wide table for a couple of days. I finally managed to get it working the same on desktop and mobile (I don’t want this to be responsive), but there is one slight problem. If the screen is scrolled when anywhere except the absolute left of the table, once the fixedheader is attached, it starts at the left, so it appears out of line. However, what causes it to realign straight away, is to just scroll horizontally either left of right and it suddenly jumps back into position. When you scroll back up and the fixedheader detaches once again, the problem above is repeated.

I’ve tried loads of suggestions with no luck including table.columns.adjust() and table.fixedHeader.adjust();.

I use the table inside a div to contain it, and this nearly works as I wanted.

<div style="overflow: auto; max-width: 100%;">
    <table class="datatable table table-striped table-bordered" id="datatable" style="width: auto; margin: 0;">

I’ve read about scrollX and fixedheaders not being being 100% compatible, but I seem to be so close to this working after trying so many combinations.

I use Bootstrap 5 and have all the latest versions from the downloads page. I have fixedHeader: true, scrollX: true,.

Is there a way something can be triggered to fix this like just a quick horizontal scroll does? I’ve attached a couple of demo screenshots and I’m hoping there might be something I can try without the need for a test case. I hope I’ve given enough detail.

I used https://editor.datatables.net/examples/extensions/import as a reference to create an import process, however I am getting, "Too many rows edited at the same time (tech info: max_input_vars exceeded)."

I may not have the ability to expand max_input_vars because of where the server is hosted.
I am trying to find a workaround without retooling a bunch of stuff.

Is there a way to auto-batch through the data being uploaded so it only uploads X number of records at a time?

Looking for a debug process as I am not sure why it's not saving.

I am testing the import / upload csv with a small file and had it working with a generic table. then I retooled it with a different table / server side php file and everything appears to be working but it's not saving any records. I have the debug set in the PHP and I do not see any errors. I am also writing out the $_POST data the PHP receives and I see all the data. dev mode does not show any errors returned from the PHP.

I am wondering what else I should look at to debug/determine why it's not saving?

Below is the $_POST from my server side PHP utilizing editor:

{"data":[{"VotingAID":"","VotedAddedDT":"","UserAID":"","CacheAID":"","VoteInactive":"","VoteInactiveCacheAID":"","LivesInPrecinct":"CITY OF xx 09-05","Name":"","LastName":"test1","FirstName":"test1f","MiddleName":"A","Suffix":"","VotedAtPollPrecinct":"","BallotStyle":"","BallotType":"Regular","VoterID":"X014754","ResidentAID":"","MatchNotes":"","AutoMatched":"","ManMatched":"","ManMatchedUserAID":"","ManMatchedDT":""},{"VotingAID":"","VotedAddedDT":"","UserAID":"","CacheAID":"","VoteInactive":"","VoteInactiveCacheAID":"","LivesInPrecinct":"CITY OF xx 13-02","Name":"","LastName":"test2","FirstName":"test2f","MiddleName":"","Suffix":"","VotedAtPollPrecinct":"","BallotStyle":"","BallotType":"Regular","VoterID":"M035631","ResidentAID":"","MatchNotes":"","AutoMatched":"","ManMatched":"","ManMatchedUserAID":"","ManMatchedDT":""}],"action":"create"}

Would it be possible to implement a debouncing logic to the ColumnControl's search input fields? Currently, when operating server-side and especially when using ColumnControl's search fields, requests are sent as soon as the user types something. This could potentially introduce slowdowns if the server is slower to execute.

My understanding is DataTables already has a searchDelay option, used for the global search. Could ColumnControl take advantage of that to debounce each input's search?

This code snippet will show the Buttons, but not the Entries Per Page control:

        $('#example').DataTable( {
             paging: true,
             lengthMenu: [10, 25, 50, 100, -1],
             buttons: ['copy', 'csv', 'excel', 'pdf', 'print'],
             layout: {
                topStart: 'buttons'
             },

When I comment-out "topStart: 'buttons'" the Entries Per Page control appears sans buttons of course.

What does one have to do in order to have both Buttons and the Entries Per Page control to simultaneously appear?

It seems that an async/await handler is not an expected argument for event handlers; e.g.

editor.on("preSubmit", async () => {
    try {
        return (await jQuery.ajax(...)) as boolean;
    } catch (e: any) {
        alert(e);

        return false;
    }
});

Is this type of programming structure acceptable when using event handlers?

As far as I know, currently the Responsive extension places the arrow toggle on the first column. You can modify that via these settings (in this case to appear on the 2nd column):

responsive: {
    details: {
        type: "column",
        target: 1
    }
}

However, the toggle arrow still remains on the first one. The 2nd column is now used to toggle between opened and closed state, but the CSS doesn't reflect that.
You can manually set the arrow like so, where dtr-control-custom is a class added to each column:

table.dataTable.dtr-column.collapsed > tbody > tr {
    > td.dtr-control-custom,
    > th.dtr-control-custom {
        cursor: pointer;
        
        &:before {
            display: inline-block;
            box-sizing: border-box;
            content: "";
            border-top: 5px solid transparent;
            border-left: 10px solid rgba(0, 0, 0, 0.5);
            border-bottom: 5px solid transparent;
            border-right: 0;
            margin-right: 1rem;
        }

        .dtr-expanded &:before {
            border-top: 10px solid rgba(0, 0, 0, 0.5);
            border-left: 5px solid transparent;
            border-bottom: 0;
            border-right: 5px solid transparent;
        }
    }
}

A common use case for this might be if you have a selector column as the first, using DataTable.render.select() as a render function.

Is it some setting I'm missing, or does DataTables add the dtr-control class to the 1st column unnecessarily, when another should have it?

Thank's for the fantastic work you are doing!

Link to test case: https://live.datatables.net/xewekefi/1/
Description of problem: Seems like FixedHeader 4.0.3 introduced a bug when combining with FixedColumns.
Ref test case: Use a narrow window and scroll to the left to show the fixed column. Then scroll down. The headers are not aligned as shown in the picture attached:

All works fine with FH 4.0.2 ...

Link to test case: https://www.wd4g.com/WCGateway/rowReorder_Debug.wc
Debugger code (debug.datatables.net): n\a
Error messages shown: no error message
Description of problem:
rowReordering was working fine until recently, now each time we do a rowReorder (or just drag the row to the top of the dt) we get a new rows inserted above the actually data rows (but below the column headers), this new row contains the datatables_length elements, and the datatable_filter elements. Also, we get a new rows below the data rows, (but above the table footer), this row contains the datatable_info and datatable_pagnation elements. This happen for each rowReOrder, so it duplicates each time.

I have tried removing all recent global changes to do with datatables, but the issue remains.

So, I'm struggling to find the cause of this issue.
If someone could please take a look and offer any advice that would be really appreciated.

Thanks, Chris

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

I have created a table with filters below each column. These filters can be cleared using the “Clear 2” button in my test case.
I have also added the “ColumnControl” extension to enable filtering. Those filters can be cleared using the “Clear 1” button in my test case.

I would like to have a single button that clears all these filters at once. Is that possible?

Kind regard,
Anthony