To see the issue, first reorder the position column, it should work as expected.

Then try to reorder the name column. You'll see it does not draw the correct template, and instead duplicates the position data

The reverse happens if Name is moved first, and Position second.

I also tested this on the 3.0 beta versions, same behavior occurs.

Description of problem:

The test case (React) doesn't work as expected as example showed in the website: https://datatables.net/extensions/scroller/examples/initialisation/state_saving.html

After the DataTable is unmounted and mounted again, Scroller should restore the saved scroll position and render the rows visible at that position.

Actual behavior:
The scroll position and display range are restored, but the Scroller viewport is blank.

For example, the information element shows: "Showing 49,991 to 50,000 of 50,000 entries" but no rows are rendered in the viewport.

Steps to reproduce:
1. Open the test case.
2. Scroll to any position.
4. Click "display table/hide table" button to conditionally unmount the DataTable.
5. Mount the DataTable again.
6. The saved position is restored, but the viewport is blank.

PS: I also tested on my side locally with createPortal implementation of the DataTables component for React, it still shows the same problem.

Seems like it has something to do with draw()?

I thought I could do with something like the script below but apparently not. Can someone help me out and let me know the best way to accomplish this?

if($_SESSION['uid']=== 1983){
$uk_where = "->where( function ( $q ) {
$q
->where('crm.primary_profile.country', 'WLS', '=')
} ); ";
}else{
$uk_where = ' ';
}

and echoing out $uk_where after the joins but it doesn't work. Any help would be appreciated

When searchList collects options from a column containing localized text (UTF8), it converts all localized characters to the corresponding Latin letter. But search is running correctly.
There is no such problem if the options are passed from the server side with ajax.
I tried different columns.type options - 'string-utf8', 'html-utf8' - nothing changes.

Here is an example of what it looks like:

Here is an example of ajax data:

If I try to export this table to CSV or any other option, data is exactly exported as is. If it's exported to Excel however, the value for "18E03778" is converted to #NULL!
If I change it to "18F03778" it exports just fine. It seems this is data specific, where the export to Excel interprets data and sees some as text, others as numbers and this one possibly as hex or something?
Because this is textual data in the JSON it should render as just text in Excel.

Is there a workaround to force this to render as text (even though I feel this shouldn't happen)?

I’m trying to understand the recommended workflow for customizing or modifying DataTables source code.

From the build documentation, it looks like DataTablesSrc needs to be built first because the source files are combined into the final library file. That makes sense, but I’m wondering what the best development workflow is when actively editing the source.

For example, with some other libraries (e.g., plotly.js), there is a dev server or watch mode where I can edit source files and quickly see the result in the browser. With DataTablesSrc, should I run npm run build-debug npm serve after every change and then refresh the examples? Or is there an official / recommended watch or live-reload setup?

I’ve contributed to plotly.js a few times and find their devtool (test dashboard) for development quite useful for debugging/developing. There are so many sample templates (mock data) there that you can switch between and preview.

In general, how do contributors usually work on DataTables core or extensions when testing source changes locally?

Right now, I'm editing/debugging directly from the dist file (.mjs/.js)... (Of course, isn’t the minified file, lol)

Thanks!

I'm seeing performance issues when using the DataTables 3 beta with FontAwesome JS+SVG icons.

Compared to DataTables 2, the same dataset and rendering pattern results in significantly increased rendering time (~10× slower). My table has numerous <span class="fa..."> elements being generated by render functions.

Profiling shows FontAwesome's MutationObserver callbacks increasing from ~85 samples in DataTables 2 (6.3%) to ~6195 samples (84%) in DataTables 3, with nearly all time spent in the observer callback itself.

Example using DT3beta: https://jsfiddle.net/htqrkc4y/
Same example using DT2: https://jsfiddle.net/pfowrdqx/
DT3beta "fixed" example: https://jsfiddle.net/k8myha6d/

(The performance issue is hopefully very noticeable if you try to reorder the columns, etc).

As shown in the 3rd link, Disabling Font Awesome’s mutation observer and manually calling FontAwesome.dom.i2svg() once, via the initComplete option, seems to resolve the issue, perhaps suggesting that increased DOM mutation frequency or timing differences in DT3 may be triggering excessive Font Awesome processing?

Thanks, can't begin to say how much I love DataTables and am looking forward to DT3!

I am successfully implementing the functionality described by "Always shown checkbox".
I am also using '"stateSave: true' and colVis functionality.

The problem I have is that is that when I hide the checkbox (the 'active' column in my example), the system throws an error as below.

table.issue2.js:71 Uncaught TypeError: Cannot set properties of null (setting 'checked')
at ce.rowCallback (table.example.js:71:53)
at datatables.min.js:22:47893
at Array.map (<anonymous>)
at Z (datatables.min.js:22:47868)
at x (datatables.min.js:22:27520)
at Ie (datatables.min.js:22:28208)
at datatables.min.js:22:37013
at Object.t [as success] (datatables.min.js:22:32936)
at c (datatables.min.js:14:25266)
at Object.fireWith [as resolveWith] (datatables.min.js:14:26015)

I have therefore tried to use .noVis to make sure that the column does not get displayed in the "Column Visibility" pull down menu, but it does not work for the checkbox. ( The "Active" column is always in the list). In my example I can make .noVis work with the other (type text) columns.

In my example I have **not **used the jquery-ui css or js files, but the base Datatables ones. However, I have tested it using all the files in the "Always shown checkbox example" and the issue is the same.

The problem can be demonstrated by going to https://dt.taskmgr.co.uk/ and selecting "colVis .noVis does not work with checkbox".

Thank you in advance for your help.

Files used are:

    <!doctype html>
    <html>

    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1">

        <title>issue2</title>

        <link rel="stylesheet" type="text/css"
            href="https://cdn.datatables.net/v/dt/jq-3.7.0/moment-2.29.4/dt-2.3.8/b-3.2.6/b-colvis-3.2.6/cr-2.1.2/cc-1.2.1/date-1.6.3/rr-1.5.1/sl-3.1.3/datatables.min.css">
        <link rel="stylesheet" type="text/css" href="css/generator-base.css">
        <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
        <link rel="stylesheet" type="text/css" href="css/editor.dataTables.min.css">

        <script type="text/javascript" charset="utf-8"
            src="https://cdn.datatables.net/v/dt/jq-3.7.0/moment-2.29.4/dt-2.3.8/b-3.2.6/b-colvis-3.2.6/cr-2.1.2/cc-1.2.1/date-1.6.3/rr-1.5.1/sl-3.1.3/datatables.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
        <script type="text/javascript" charset="utf-8" src="js/dataTables.editor.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="js/table.issue2.js"></script>
    </head>

    <body class="dataTables">
        <div class="container">
            <h1>colVis .noVis does not work with checkbox</h1>
            <table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%">
                <thead>
                    <tr>
                        <th>Item</th>
                        <th>Description</th>
                        <th>Active</th>
                    </tr>
                </thead>
            </table>
        </div>
    </body>

    </html>

    <?php

    /*
     * Editor server script for DB table example
     * Created by http://editor.datatables.net/generator
     */

    // DataTables PHP library and database connection
    include( "lib/DataTables.php" );

    // Alias Editor classes so they are easy to use
    use
        DataTables\Editor,
        DataTables\Editor\Field,
        DataTables\Editor\Format,
        DataTables\Editor\Mjoin,
        DataTables\Editor\Options,
        DataTables\Editor\Upload,
        DataTables\Editor\Validate,
        DataTables\Editor\ValidateOptions;

    // The following statement can be removed after the first run (i.e. the database
    // table has been created). It is a good idea to do this to help improve
    // performance.
    $db->sql( "CREATE TABLE IF NOT EXISTS `issue2` (
        `id` int(10) NOT NULL auto_increment,
        `item` varchar(255),
        `description` varchar(255),
        `active` varchar(255),
        PRIMARY KEY( `id` )
    );" );

    // Build our Editor instance and process the data coming from _POST
    Editor::inst( $db, 'issue2', 'id' )
        ->fields(
            Field::inst( 'item' ),
            Field::inst( 'description' ),
            Field::inst( 'active' )
                ->setFormatter( function ( $val, $data, $opts ) {
                    return ! $val ? 0 : 1;
                } )
        )
        ->process( $_POST )
        ->json();

    /*
     * Editor client script for DB table example
     * Created by http://editor.datatables.net/generator
     */

    addEventListener("DOMContentLoaded", function () {
        var editor = new DataTable.Editor({
            ajax: 'php/table.issue2.php',
            table: '#example',
            fields: [
                {
                    "label": "Item:",
                    "name": "item"
                },
                {
                    "label": "Description:",
                    "name": "description"
                },
                {
                    "label": "Active:",
                    "name": "active",
                    "type": "checkbox",
                    "separator": ",",
                    "separator": '|',
                    "options": [{ label: '', value: 1 }]
                }
            ]
        });

        var table = new DataTable('#example', {
            ajax: 'php/table.issue2.php',
            columns: [
                {
                    "data": "item"
                },
                {
                    "data": "description"
                },
                {
                    data: 'active',
                    render: (data, type, row) =>
                        type === 'display'
                            ? '<input type="checkbox" class="editor-active">'
                            : data,
                    className: 'dt-body-center'
                }
            ],
            columnDefs: [
                { "targets": 0, "className": 'noVis' },
                { "targets": -1, "className": 'noVis' },
            ],
            "stateSave": true,
            layout: {
                topStart: {
                    buttons: [
                        { extend: 'create', editor: editor },
                        { extend: 'edit', editor: editor },
                        { extend: 'remove', editor: editor },
                        { extend: 'colvis', columns: ':not(.noVis)', popoverTitle: 'Column visibility' },
                    ]
                }
            },
            select: {
                style: 'os',
                selector: 'td:not(:last-child)' // no row selection on last column
            },

            rowCallback: function (row, data) {
                // Set the checked state of the checkbox in the table
                row.querySelector('input.editor-active').checked = data.active == 1;
            }
        });

        table.on('change', 'input.editor-active', function () {
            editor
                .edit(this.closest('tr'), false)
                .set('active', this.checked ? 1 : 0)
                .submit();
        });
    });

Description of problem: According to the doc, searchBuilder.rebuild() has two arguments, but the typing is missing the newly added boolean type redraw and the doc might also need be updated too. It says: searchBuilder.rebuild() takes one argument...

If I use:

dt.searchBuilder.rebuild()

I got: TS2554: Expected 1 arguments, but got 0

Same issue for the typing of searchBuilder.getDetails().

or

If I use:

dt.searchBuilder.rebuild(stored)

I got:

TS2345: Argument of type

Required<Pick<SearchBuilderDetails, "criteria">> & SearchBuilderDetails

is not assignable to parameter of type IDetails
Types of property criteria are incompatible.
Type SearchBuilderCriterion[] is not assignable to type Group[]
Type SearchBuilderCriterion is missing the following properties from type Group: classes, dom, c, s, and 23 more

If I use:

dt.searchBuilder.getDetails(false)

I got: TS2554: Expected 0 arguments, but got 1

This example includes copy and column visibility options:

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

I have included some buttons via this code:

$(document).ready(function () {
    var table = $('#example').DataTable({
        order: [],
        bLengthChange: false,
        responsive: true,
        colReorder: true,
        pageLength: 365,
        // sDom: '<"top"lfip>rt<"bottom"ip<"clear">',
        mark: true,
        layout: {
            topStart: {
                buttons: ['copy', 'csv', 'excel','colvis']
            }
        }
    });

});

However - as per this 2nd example - I'd like to use sDom to change the layout as follows:

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

Using this code:

$(document).ready(function () {
    var table = $('#example').DataTable({
        order: [],
        bLengthChange: false,
        responsive: true,
        colReorder: true,
        pageLength: 365,
        sDom: '<"top"lfip>rt<"bottom"ip<"clear">',
        mark: true,
        layout: {
            topStart: {
                buttons: ['copy', 'csv', 'excel','colvis']
            }
        }
    });

});

However - using sDom then removes the buttons.

I can't work out what I need to include in the sDom line to ensure that the buttons also appear?

Thanks

DataTables.net for React does not re-render or update when the columns prop changes.

To force it to reflect new column definitions, the only way I found is to to use the key prop.

However, this causes the entire table to unmount and re-mount, which can lead to performance issues and loss of internal states.

For simple case, for example, if one just want to update the name of column, that is possible with API:

const api = table.current?.dt({visible: true, api: true});
if (api) {
   $(api.column(5).header()).html("new name");
}

It is intuitive that the table should also change when the columns prop changes. (That's why I use react component!)
However, this is not the case when we don't use the key prop to destroy the old table and mount a new one. (?)

I have a use case where I have 91~100 columns, with the first 1~10 columns being dynamically generated, followed by 90 columns that are always present. Depending on the user's selection, the generated columns can change from 1 to 10 columns (different titles and data). In this case, I updated the columns prop, but the table is not updated, only the data is updated!

To make it reactively update the columns, I have to use key prop, like I showed in the example.
But this is not optimal for very large table I think.
So I wonder if it is possible to update the columns dynamically without destroy/reinit the table?

this.setScrewTable?.clear();
/this.setScrewTable?.rows.add(this.SetScrews.map((SS, idx) => $(SS.getSetScrewDetailHTML(idx)))).draw();/
this.setScrewTable?.rows.add(this.SetScrews.map((SS, idx) => [
'',
SS.RotationalLocation.buildFieldWrapHTML(),
SS.Thread.buildFieldWrapHTML(),
SS.SetScrewDiameter.buildFieldWrapHTML(),
SS.SetScrewLength.buildFieldWrapHTML(),
SS.DriveType.buildFieldWrapHTML(),
SS.LockingType.buildFieldWrapHTML(),
SS.TipType.buildFieldWrapHTML(),
])).draw();

language.thousands
language.decimal

These options seem to work correctly for thousand-scale numbers, but not for million-scale numbers.
Example that works as expected

Input:

88.208,03

Expected parsing result sent to backend:

88208.03

✅ This works correctly.
Example that does NOT work

Input:

33.109.205

Expected parsing result:

33109205

Actual result:

33109.205

❌ The parser incorrectly treats the last dot as a decimal separator instead of a thousands separator.

Expected Behavior

With:

language: {
  thousands: '.',
  decimal: ','
}

I expect all thousand separators to be removed correctly, regardless of the number length, and the value to be parsed as a pure number.

Actual Behavior

Works for values like 88.208,03

Fails for values like 33.109.205

The last separator is incorrectly interpreted as a decimal point.

Is this a limitation or a known issue in SearchBuilder’s numeric parser?
Is there a recommended way to handle locale-specific thousand separators for large numbers?

My question is about grouping items using the layout. My desired behavior is something like a combination of the top2 and top5 shown here: https://datatables.net/examples/layout/grid.html. Id like to have something on the far left, something in the middle, and 2 things on the far right.

Is there a way for me to accomplish this?
I tried something like this:

// Layout
layout: {
    topStart: null,
    topEnd: null,
    top: {
        rowClass: 'dt-layout-row table_title',
        features: [
            'pageLength',
            {
                div: {
                    text: this.getAttribute('title'),
                }
            },
            {
                features: [
                    'search',
                    colVisTemplate
                ]
            }
        ]
    },
},

with colVisTemplate as a cloned element - but this produces the 4 elements evenly distributed across the header.

Is there a way I can create a div, and then add the standard 'search' inside of it?

Also I noticed that when I add the rowClass option, it removes the default dt-layout-row class from the row - is that intended behavour?

Thanks,
Seth.

Description of problem:

I'm using the filterChanged function to update a div to show the currently selected filters from searchPanes. This is similar to the question https://datatables.net/forums/discussion/comment/186843 and in the linked example I have it working and updating as the filter items are selected:

However, I'm also using saveState, so that when the page is reloaded the filters are active, but the list is not populated:

In my filterChanged function I'm getting the selected rows from the table API:

var items = $('.dtsp-searchPane table').DataTable().rows({
    selected: true
}).data().map( (item) => item.display);
document.getElementById('filterItems').innerHTML = count > 0 ? items.join(', ') : '';

But because I'm using a button with searchPanes, the table doesn't exist on page load, only after it's been clicked.

It looks like I should be able to get the selections from the main datatable state: $('#example').DataTable().state().searchPanes.selectionList which in the example contains the same values as the display, but in my actual code these are just ids and not the display values.

Is there a better way to do this? Is there some way to initialise the table in the background without clicking the button? Do I need to use the values from the state selectionList, and somehow look up the display values - if so how do I find the data?

Thanks!

The docs say

The special character * is automatically replaced with the value read from the host document's title tag

So in the callback can I access this value?

something like this? (I know this doesn't work)

filename: function () {
    let title = '*';
    return title.toLowerCase().replace(/ /g, '-') + '-' + new Date().toISOString();
}

or some other way?

Setup: Table with 11 columns; columns 3–8 have className: 'text-right' for right-aligned numeric data. Column 9 has visible: false. Column 10 has orderable: false. Initial order: [[0, 'desc']].

Symptom: Clicking on the order indicator icon (.dt-column-order span) inside a right-aligned <th> registers as a click on the NEXT column (data-dt-column index + 1). Clicking on the column title text (.dt-column-title span) registers on the correct column.

Diagnostic from instrumented click handler (delegated on thead for th, fires before DT's own handler):

CLICK on Sales (data-dt-column=5), target=SPAN.dt-column-title, closest th=5 // text click — correct
CLICK on Adjustments (data-dt-column=6), target=SPAN.dt-column-order, closest th=6 // icon click on Sales' visual icon — WRONG, lands on Adjustments
Geometry inspection shows .dt-column-order for each column renders at the LEFT edge of its own <th> (e.g. Sales th boundary L=865/R=955, indicator L=873/R=885). Visually this places the indicator next to the right-aligned text of the previous column. When the user clicks what looks like Sales' indicator, it's actually inside Adjustments' <th>.

Expected: Click on .dt-column-order should sort the column whose <th> contains it (matches closest('th')).

Actual: The delegated handler reports closest('th') correctly, but DT's internal sort applies to a different column — suggests the issue is in event-target → column-index resolution inside DataTables itself when the click target is the order-indicator span.

Visual workaround that DOES fix click routing for icon-clicks on the same column (but introduces other regressions): CSS display:flex; flex-direction:row-reverse; on .dt-column-header for .text-right headers. This puts the indicator inside its own cell visually next to the right-aligned title text. After this fix, icon-clicks still misroute by +1, confirming the issue is not purely visual.

Happy to provide a minimal reproduction page.

Alternatively, is it easy to remove the paging nav option, but still show only 10 rows?

I hope that makes sense? Image attached to show the issue.

We're using ColumnControl with the numberRange content type for numeric columns (height, horsepower, torque, etc.) and it works well. The two-input min/max pattern is
functional, but a dual-handle range slider would be a much better UX for these kinds of bounded numeric filters.

A few questions:

1. Is there a built-in slider content type planned for ColumnControl?

   Something like { extend: "rangeSlider" } that renders a two-handle slider and fires the same dt.draw() on change would be ideal. The value output could map directly to the
   existing field[gte]/field[lte] API params we're already using.

2. Is the numberRange content type extensible enough to swap in a library like noUiSlider?

   Looking at the custom content type API, it seems like it should be possible to replace the init function:

   DataTable.ColumnControl.content.rangeSlider = {
   defaults: { columnName: null, min: 0, max: 100 },
   init(config) {
   const el = document.createElement('div');
   // noUiSlider.create(el, { ... })
   // on update → dt.draw()
   return el;
   }
   };

   Has anyone done this integration? Any gotchas with how ColumnControl reads values back from a custom content type after draw() is called?

3. Context: DataTables 3.0 beta + ColumnControl 2.0 beta

   We're running datatables.net-bs5 3.0.0-beta.2 and datatables.net-columncontrol-bs5 2.0.0-beta.1 with Bootstrap 5 / Symfony UX. Loving the beta — the new layout API and
   ColumnControl are a big step up. I'll put the repo up for a live demo shortly.

https://meili.survos.com/admin/browse/app_marvel
https://meili.survos.com/admin/browse/app_car

Still quite a bit to do, including documentation.

For Symfony developers, the big plus is that there's no custom javascript coding here. It relies heavily on attributes in the entity class, and you can customize columns and such in either the PHP attributes or in twig. But all the javascript is wrapped in a ux twig controller that uses stimulus.

All open source: https://github.com/survos/SurvosApiGridBundle for the bundle, https://github.com/survos-sites/meili for the app, which was originally just for meili searches (which is how I'm doing my search panes now).

If there's interest, I can provide more documentation. I expect to be making improvements while datatables.net is in beta. FWIW, it's also Symfony 8.1 BETA 1.

admittedly, very little value. Just an idea.