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)?

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

"columnControl": {
  "2": {
    "searchList": [],
    "searchInput": {
      "logic": "contains",
      "type": "text",
      "value": ""
    }
  },
  "3": {
    "searchList": [],
    "searchInput": {
      "logic": "contains",
      "type": "text",
      "value": ""
    }
  },
  "4": {
    "searchList": [],
    "searchInput": {
      "logic": "contains",
      "type": "text",
      "value": ""
    }
  },
  "6": {
    "searchInput": {
      "logic": "contains",
      "type": "text",
      "value": ""
    }
  },
  "7": {
    "searchList": [],
    "searchInput": {
      "logic": "contains",
      "type": "text",
      "value": ""
    }
  }
},

If we add a new column it has no way to know how to map the saved data to the correct (updated) columns as it's mapping by column index instead of column name. This ends up breaking all of the existing saved states. Am I missing something or don't have StateRestore/ColumnControl configured properly so that it stores this data by column name instead?

Fwiw we're running DataTables 2.3.8, StateRestore 1.4.3 and ColumnControl 1.2.1.

Thanks.

Ben

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!

Hello,

I'm having a small problem using the FixedColumns component with dates in ISO 8601 format.

In a test case, searching for a specific date doesn't work.

However, sorting is functional, and I can search for dates before or after. Only the exact date doesn't work.

Just to clarify, my regional settings are in French.

Ex. Sorting on date: OK

Ex. Filtering on a later date: OK

Ex. Filtering on a exact date: KO

However, the date 2025-11-09 does exist in the table.

Just to clarify, I don't use Moment.js or Luxon.

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

Lolo

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:

<!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>Datetest</title>

    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script src="https://cdn.datatables.net/2.3.7/js/dataTables.js"></script>
    <script src="https://cdn.datatables.net/columncontrol/1.2.0/js/dataTables.columnControl.js"></script>
    <script src="https://cdn.datatables.net/columncontrol/1.2.0/js/columnControl.dataTables.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.30.1/moment.min.js"></script>
    <script src="https://cdn.datatables.net/datetime/1.6.3/js/dataTables.dateTime.min.js"></script>

    <script src="https://cdn.datatables.net/buttons/3.2.6/js/dataTables.buttons.js"></script>
    <script src="https://cdn.datatables.net/buttons/3.2.6/js/buttons.dataTables.js"></script>
    <script src="https://cdn.datatables.net/select/3.1.3/js/dataTables.select.js"></script>
    <script src="https://cdn.datatables.net/select/3.1.3/js/select.dataTables.js"></script>

    <link rel="stylesheet" type="text/css" href="css/generator-base.css">
    <link rel="stylesheet" type="text/css" href="css/editor.dataTables.min.css">

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/2.3.7/css/dataTables.dataTables.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/columncontrol/1.2.0/css/columnControl.dataTables.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/datetime/1.6.3/css/dataTables.dateTime.min.css">

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/3.2.6/css/buttons.dataTables.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/3.1.3/css/select.dataTables.css">
    <script type="text/javascript" charset="utf-8" src="js/dataTables.editor.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/table.datetest.js"></script>
</head>

<body class="dataTables">

    <div class="container">
            <h2>stateSave set to true</h2>
        <table cellpadding="0" cellspacing="0" border="0" class="display" id="datetest" width="100%">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Date</th>
                </tr>
            </thead>
        </table>
        <BR>
<hr>
    <h2>stateSave commented out</h2>
                <table cellpadding="0" cellspacing="0" border="0" class="display" id="datetest1" width="100%">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Date</th>
                </tr>
            </thead>
        </table>

    </div>
</body>

</html>

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

<?php
include( "lib/DataTables.php" );
use
    DataTables\Editor,
    DataTables\Editor\Field,
    DataTables\Editor\Format,
    DataTables\Editor\Mjoin,
    DataTables\Editor\Options,
    DataTables\Editor\Upload,
    DataTables\Editor\Validate,
    DataTables\Editor\ValidateOptions;


$db->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": []
}

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();

Example
Using modified code from this https://editor.datatables.net/examples/advanced/upload-many.html example:

Editor::inst( $db, 'users' )
    ->fields(
        Field::inst( 'users.id' ),
        Field::inst( 'users.first_name' ),
        Field::inst( 'users.last_name' ),
    )
    ->join(
        Mjoin::inst( 'files' )
            ->link( 'users.id', 'users_files.user_id' )
            ->link( 'files.id', 'users_files.file_id' )
            ->fields(
                Field::inst( 'id' )
                    ->upload( Upload::inst( $_SERVER['DOCUMENT_ROOT'].'/uploads/__ID__.__EXTN__' )
                        ->db( 'files', 'id', array(
                            'filename'    => Upload::DB_FILE_NAME,
                            'filesize'    => Upload::DB_FILE_SIZE,
                            'web_path'    => Upload::DB_WEB_PATH,
                            'system_path' => Upload::DB_SYSTEM_PATH
                        ) )
                        ->validator( Validate::fileSize( 500000, 'Files must be smaller that 500K' ) )
                        ->validator( Validate::fileExtensions( array( 'png', 'jpg', 'jpeg', 'gif' ), "Please upload an image" ) )
                    )
            )
    )
    ->where( 'id', $_GET['userId'] )
    ->process( $_POST )
    ->json();

If there is no user with id requested in $_GET['userId'], you get zero records in data array, but all existing server files in files array.
I guess this is not a bug, but it's how Mjoin works. Any ideas how to filter correctly?
This might be huge security concern.

    inline: {
      onBlur: 'submit',
      submit: 'allIfChanged',
    },

as we want the full row data submitted on every change.

https://editor.datatables.net/reference/type/form-options#submit

We're also using AutoFill. However, with AutoFill it only seems to submit partial row data. This means we have to merge it with that row's data before we submit it. Is there a way to configure AutoFill to submit all the data for the row just like the inline setting does above?

Thanks.

Ben

    get: function ( conf ) {
        return conf._quill.getText();
    },
  
    set: function ( conf, val ) {
        conf._quill.setText( val !== null ? val : '' );
    },

by

    get: function ( conf ) {
        return conf._quill.root.innerHTML;
    },
 
    set: function ( conf, val ) {
        conf._quill.root.innerHTML = val !== null ? val : '';
    },

    // preDraw.dt (camelCase) is the correct DataTables event name; returning false cancels the draw.
    _dt_table.on('preDraw.dt', function() {
        if (scan_mousedown) {
            console.log('preDraw.dt: draw blocked by scan-action-btn guard');
            return false;
        }
    });

Maybe I missed something, but I can't find a way to do it.

Here are more details on what I'm trying to do:

I have two tables:
- Table "items"
- item_id
- item_name
- ...
- Table "subitems":
- subitem_id
- item_id
- subitem_name
...

I want to be able to perform CRUD operations on my subitems directly from the "items" editor.

My first idea was to use a nested editor like this: https://editor.datatables.net/examples/datatables/nested (or multiple version).
However, that isn't the solution because the nested editor lists all the "subitems", and the user needs to select them.
I only want to be able to CRUD "subitems" linked to the current "item" through the "subitems.item_id".

Is there a way to do that with a nested editor?

If not, how could I do it?

Thanks, Renaud

    columnDefs: [
      {
        targets: 0,
        className: 'select-checkbox'
      }
    ],

stopped working.
It seems that it happened in version 3.1.1.

Checkbox works with DataTables styling.

Test case:
https://live.datatables.net/moyefodo/1/edit

KR,
Björn H

https://jsfiddle.net/sancorUI/f85sgzwv/

Debugger code (debug.datatables.net):

-

Error messages shown:

-

Description of problem:

The fixedHeader extension miscalculates the width of all table headers when responsive is configured with a control column and that specific control column is hidden

I think the bug is in this function

_api_registerPlural("columns().widths()", "column().width()", function() {
    var columns = this.columns(":visible").count();
    var row = $("<tr>").html("<td>" + Array(columns).join("</td><td>") + "</td>");
    $(this.table().body()).append(row);
    var widths = row.children().map(function() {
        return $(this).outerWidth();
    });
    row.remove();
    return this.iterator("column", function(settings, column) {
        var visIdx = _fnColumnIndexToVisible(settings, column);
        return visIdx !== null ? widths[visIdx] : 0;
    }, 1);
});

widths has the array of width but this.iterator starts in column 1 (0 is the responsive control column but is hidden)