// 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;
        }
    });

We're initiating a datatable within a HTML <dialog>, with the colvis extension to enable the user to show and hide specific columns at user discretion.

But when enabling a column that has been set as initially hidden, e.g. visible: false, the dialog window starts to expand in an infinite loop. When looking at the console in Safari I'm getting the error message "ResizeObserver loop completed with undelivered notifications.". The same thing happens in Firefox as well.

The exact same code works flawlessly when the datatable is initated directly on the page, e.g. when it's not inside the <dialog> element.

(I've yet been able to create this problem in live.datatables.net, intially because I can't find the col vis extension in the library popup menu there, only the button extension.)

The CSS for the dialog is set as:

dialog {
border-width: 2px;
border-color: #495057;
z-index: 20;
margin: 0;
left: 50%;
top: 300px;
width: fit-content;
height: fit-content;
}

(Don't know if this is relevant or not)

console.log($('#Status').val()); //['Prospect', 'Active']
api.column(3).search($('#Status').val(), false, false, false);

1.12
columns[3][search][value] Prospect,Active

2.3.8
columns[3][search][value][] Prospect
columns[3][search][value][] Active

Is this change intentional?
Should find and add in the all places in code .join to turn arrays into strings?
Should I instead change the server side model binding to handle both string and array for same variable?
Or is this breaking change unintentional and be reverted?
If it's intentional, the documentation on these pages should be updated
https://datatables.net/manual/server-side
https://datatables.net/upgrade/2

Thanks!

This config code works...

const BRANDS_CONFIG = {
    fadeInDuration: CONFIG.web_site.fadeInDuration || 2000,
    ajaxUrl:    "assets/ajax/ajax-brands.php",
    pageLength: 14,
        select:     false,
    layout:     { topStart: { pageLength: { menu: [10, 20, 30, 50] } },
                    topEnd:   { search:     { placeholder: 'Search'  } },
    },
    columnIndex: {
        name:   0,
        regNum: 1,
        page:   2,
        remark: 3,
        id:     4,
    },
};

The dataTables implementation...

    oTable = $("#mainTable").DataTable({
        ajax:       BRANDS_CONFIG.ajaxUrl + params,
        columns:    getTableColumns(),
        layout:     BRANDS_CONFIG.layout,
        pageLength: BRANDS_CONFIG.pageLength,
            select:     BRANDS_CONFIG.select,
            search:     { search: searchParam },
            stateSave:  searchParam ? false : undefined,

            initComplete: function () {
              hideAlphaLetters(this.api());
        },
    });

This config code for the that doesn't work...

const MEMORIALS_CONFIG = {
    fadeInDuration: CONFIG.web_site.fadeInDuration || 2000,
    ajaxUrl: "assets/ajax/ajax-memorials.php",
    pageLength: 10,
    lengthMenu: [10, 20, 30, 50],
    columnIndex: {
        name: 0,
        birthDate: 1,
        deathDate: 2,
        available: 3,
        cemetery: 4,
        id: 5,
    },
};

And the implementation that doesn't work...

    oTable = $("#mainTable").DataTable({
        ajax: ajaxUrl,
        columns: getTableColumns(),
        layout: {
            topStart: 'pageLength',
            topEnd: 'search',
            top2: 'alphabetSearch',
            top1: 'paging',
            bottom: 'info',
        },
        pageLength: MEMORIALS_CONFIG.pageLength,
        lengthMenu: MEMORIALS_CONFIG.lengthMenu,
        lengthChange: true,
        searching: true,
        ordering: false,
        stateSave: false,

        stateSaveParams: function (settings, data) {
            data.selected = $("span.active").index();
        },

        initComplete: function () {
            handleTableInitComplete(this.api());
        },
    });

    // Attach event handlers after table initialization
    attachTableEventHandlers();
}

I also use a global dataTables extend as follows...

$.extend($.fn.dataTable.defaults, {
    layout: {
        top2: "alphabetSearch",
        top1: "paging",
        bottom: "info",
    },

    paging: {
        type: "full_numbers",
    },

    language: {
        paginate: {
            first: "First",
            previous: "Prev",
            next: "Next",
            last: "Last",
        },
        lengthMenu: "Display _MENU_ records",
    },

    ordering: true,

    order: [],

    pageLength: 12,

    seaching: false,

    select: { style: "single", info: false },

    stateSave: true,

    visible: true,

    initComplete: function () {
        hideAlphaLetters(this.api());
    },

    drawCallback: function () {
        hidePagingAreas(this.api());
    },
});

Here are links to the two modules...

https://txdelta.org/brands - this displays the pageLength and search box

https://txdelta.org/memorials/033/pecan-gap - this does not display the pageLength and search box

I spent over 45 minutes on a chat with Claude Sonnet 4.5 via vsCode and could not get a resolution. Hope somebody here might have an answer.

TIA for any assistance
James A Wilson

I can create the associated test cases if needed, but hopefully not. I'm noticing some header differences between 1.x and 2.x. I can ignore these but they're a bit annoying. In 1.x the header is bold and justified left, but in 2.x it's normal and justified right. I think the th element in 2.x has more classes like dt-type-numeric which might be getting in front of the jquery ui css.

Note I'm using jquery ui styling.

1.13

2.3.8

I don't know if this is normal, but there's a strange file named EditorFramework.zip in the DataTables v2.3.8 package folder.
See https://datatables.net/releases/DataTables-2.3.8.zip

Also, the changelog URLs for the differents extensions are no longer there.
See https://datatables.net/download/packages.

So, what's new in version 2.3.8?

Thank you in advance for your reply, and have a nice day.

Is there a recipe somewhere for the migration requirements?

     /* ANY ADDED ROW SHOULD HAVE THE 'DATA' CLASS ADDED */
    createdRow: function ( tr ) {
        $(tr).addClass('data');
    },

but i think this kills the hover/highlight function on the dataTable tbody rows. if i remove the createdRow function the highlighting works on hover but i lose the css from the color scheme i have

Any assistance is greatly appreciated.
Thanks in advance!

In the example https://editor.datatables.net/examples/datatables/parentChild.html

The user count is conditioned with a render.

var siteTable = $('#sites').DataTable({
ajax: '../php/sites.php',
columns: [
{ data: 'name' },
{
data: 'users',
render: function (data) {
return data.length;
}
}
],

Since this is not persistent data (client display only) I would like to update the displayed values on Add actions and Delete Actions. Seems unnecessary to round trip reloading the table to get the counters adjusted.

Thanks in advance.

1. there is a horizontal scrollbar on top of the table above the table headers
2. the first three columns need to be fixed when scrolling horizontally
3. the headers need to be fixed (sticky) on the top of the page when scrolling down
4. when scrolling down and right, the column headers need to stay fixed on the top of the page but they need to scroll horizontally, while not overlapping the headers of the left 3 fixed columns.

I don't want programming help right now, I just wonder if anyone has created an online example with these or similar properties. Is this technically possible at all? The examples I found for sticky headers [https://datatables.net/extensions/responsive/examples/column-control/fixedHeader.html] are too simple and don't scroll horizontally and don't have sticky columns.

Can you help me to display each item per line like that :
crea_identifiants
crea_mdp, verif_doublon
adhesion_rev

BR from Francis

PHP variable output with a single-row example data

columnsDef: array (
  0 => 
  (object) array(
     'title' => '<input  type=\'checkbox\'  id=\'configCboToggle\' style=\'padding:4px 0 0 0;\' value=\'0\' title=\'alle\'/>',
     'visible' => true,
     'className' => 'dt-head-center dt-body-center',
     'orderable' => false,
     'searchable' => false,
     'targets' => 
    array (
      0 => 0,
    ),
  ),
  1 => 
  (object) array(
     'title' => 'ID',
     'visible' => true,
     'className' => 'dt-head-center dt-body-center',
     'orderable' => true,
     'searchable' => true,
     'targets' => 
    array (
      0 => 1,
    ),
  ),
)

data: array (
  0 => 
  array (
    0 => 
    array (
      'text' = '<div class="chkWrap configCbo" style="display:inline-block;"><input type="checkbox" id="configCbo0" />
               <i class="fa-regular fa-trash-can fa-custom-hl fa-lg icon-rowDel" title="not deletable"></i>
               <i class="fa fa-gear fa-custom-hl fa-lg icon-rowAction" title="no action!"></i>
             </div>'
      'dataConfig' => 'id&trade;ID&#9638;12&#9638;fedit1&#9638;12&loz;rowdel&trade;1&loz;rowedit&trade;1&loz;rowzaction&trade;1&loz;idza&trade;',
    ),
    1 => '17',
  ),
)

js snippet setting the data into the table

  rowCallback: function(nRow, aData) {
      $('td:eq(0)', nRow).html(aData[0].text);
      $('td:eq(0)', nRow).attr('data-config', aData[0].dataConfig);
  }

html code looks like

<tr>
 <td class="dt-head-center dt-body-center"
    data-config="id&trade;Spalte1&#9638;17&#9638;fedit1&#9638;17&#9638;Spalte9&#9638;&#9638;fedit10&#9638;&loz;rowdel&trade;2&loz;rowedit&trade;1&loz;rowzaction&trade;0&loz;idza&trade;COL1&OElig;17~COL2&OElig;ROUTE1~COL4&OElig;K'KGGGOOO~COL5&OElig;"
    style="cursor: pointer;">
    <div class="chkWrap configCbo" style="display:inline-block;">
        <input type="checkbox" id="configCbo0">
        <i class="fa-regular fa-trash-can fa-custom-hl fa-lg icon-rowDel" title="not deletable"></i>
        <i class="fa fa-gear fa-custom-hl fa-lg icon-rowAction" title="no action!"></i>
    </div>
</td>

</tr>

How can I use the new select extension without losing my custom div

The line in the below code that is the issue (I think) is ' var rows = DataTables_Table_0.rows({ selected: true }).indexes();' which does not work. I attempted using the ID from inspect since there is no obvious instantiation of the datatable in question (at least that I can see).

Any ideas?

Thanks in advance!

{
    label: 'Users:',
    name: 'users.site',
    type: 'datatable',
    editor: usersEditor,
    submit: false,
    optionsPair: {
        value: 'users.id'
    },
    config: {
        ajax: {
            url: '../controllers/NEWuser/users.php',
            type: 'post',
            data: function (d) {
                if (siteTable) {
                    var selected = siteTable.row({ selected: true });
                    if (selected.any()) {
                        d.site = selected.data().id;
                    }
                }
            }
        },
        buttons: [
            { extend: 'create', editor: usersEditor },
            { extend: 'edit', editor: usersEditor },
           //{ extend: 'remove', editor: usersEditor }
 
 
            {
            extend: 'selected',
            text: 'Delete',
            action: function (e, dt, node, config) {
 
 
                var rows = DataTables_Table_0.rows({ selected: true }).indexes();
 
                usersEditor
                    .hide(usersEditor.fields())
                    .one('close', function () {
                        setTimeout(function () {
                            // Wait for animation
                            usersEditor.show(usersEditor.fields());
                        }, 500);
                    })
                    .edit(rows, {
                        title: 'Delete',
                        message:
                            rows.length === 1
                                ? 'Are you sure you wish to delete this row?'
                                : 'Are you sure you wish to delete these ' +
                                  rows.length +
                                  ' rows',
                        buttons: 'Delete'
                    })
                    .val(
                        'removed_date',
                        new Date().toISOString().split('T')[0]
                    );
            }
        }                  
 
        ],
        columns: [
            {
                data: 'users.first_name',
                title: 'First name'
            },
            {
                data: 'users.last_name',
                title: 'Last name'
            },
            {
                data: 'users.phone',
                title: 'Phone'
            }
        ]
    }
}

JS Bin test case
https://live.datatables.net/teripiyu/1/edit

I want to add custom mark.js options, such as wildcard search, but it only works when I trigger the search manually.

$("#example").mark("R*os", {
    wildcards: "enabled",
    caseSensitive: true
});

Using the same settings to initialize the DataTable, the search functionality in the search field is not working when typing.

var table = new DataTable('#example',
 { mark:
    {  wildcards: "enabled",
      caseSensitive: true
    }
 }                         
);

https://live.datatables.net/mijifezi/1/edit?html,css,output

<div class="dt-layout-row">
  <div class="dt-layout-cell dt-layout-full"></div>
  <div class="dt-length"></div>
  <div class="custom-div">hallo</div>
  <div class="dt-search"></div>
</div>

current

what i want

I like how changing the data prop triggers a re-render. I utilized this behavior to implement a simple server-side fetch() that asynchronously populates the initial DataTable.

The following React component, called FetchDataTable, fetches the table data from a server using the browser API fetch. It is much easier to use than ajax for smaller tables.

FetchDataTable.jsx:

//
// FetchDataTable.jsx -- Wrapper for DataTables React component with fetch()
//

import { useState, useEffect, createContext } from 'react';

function useFetch(fetchUrl, fetchOptions) {
    const [tableData, setTableData] = useState([]/*empty table*/);
    const [isLoading, setIsLoading] = useState(true);
    const [errorMsg, setErrorMsg] = useState(null);

    useEffect(() => {

        const fetchData = async () => {

        try {
            setIsLoading(true);

            // fetch() default options
            const opts = Object.assign({
                method: 'GET', // or 'POST'
                cache: 'no-store',
                //credentials: 'same-origin', // default
                headers: { // if POST
                    'Content-Type': 'application/json; charset=utf-8',
                    //'Content-Type': 'application/x-www-form-url-encoded; charset=utf-8',
                },
                //body: JSON.stringify(data), // if POST
                redirect: 'error',
            }, fetchOptions);

            const response = await fetch(fetchUrl, opts);

            if (!response.ok) { // Got non-200 range response (404, etc)
                throw new Error(`Server request failed: Error ${response.status}`);
            }

            let text = await response.text();

            const json = JSON.parse(text); // Throws SyntaxError if bad JSON

            if (json.error) {
                throw new Error(json.error);
            }

            const data = json.data;

            if (Array.isArray(data)) {
                setTableData(data);
            } else {
                throw new Error('Server did not return data[]');
            }
        } catch(err) {
          setErrorMsg(err.message);
        } finally {
          setIsLoading(false);
        }
      };

      fetchData(); // Start the async data fetch

      return () => {
           // Do useEffect cleanup here
      };

    }, []/*once*/); // end useEffect()

    const props = {
        tableData,
        setTableData,
        errorMsg,
        isLoading
    };

    return props;
}

/*
Expected JSON response:
{
  data: [
        { "UserId": 123, "FirstName":"Bob", "LastName":"Smith", "Role": "Manager" },
        { "UserId": 456, "FirstName":"Roger", "LastName":"Kline", "Role": "Tech Support" },
        { "UserId": 789, "FirstName":"Julie", "LastName":"Adams", "Role": "Sales" }
  ]
}

If an error occurs, the expected JSON response is

{ error: "Error message" }
*/

////////////////////////////////////////////////////////////////////////////
//
// Wrapper for <DataTable data={tableData}>
//
//

// Context to pass the fetched data down to the DataTable component
export const FetchDataTableContext = createContext({});

export function FetchDataTable({fetchUrl, fetchOptions, children}) {

    // Note the use of braces {}, not []
    const {tableData, setTableData, errorMsg, isLoading} = useFetch(fetchUrl, fetchOptions);

    if (isLoading) {
        return (
            <h1>Loading data...</h1>
        );
    }

    if (errorMsg) {
        return (
            <p style={{ color: "red" }}>Error: {errorMsg}</p>
        );
    }

    const contextData = { tableData, setTableData };

    return(
        <FetchDataTableContext value={contextData}>
          {children}
        </FetchDataTableContext>
    );
}

The following is a simple React app that uses the FetchDataTable component to populate a DataTable.

The example uses Bootstrap 5.

App.jsx:

// Example App

import { createRoot } from 'react-dom/client';
import { useRef, useState, useEffect, useContext } from 'react';

import * as bootstrap from 'bootstrap';
import DataTable from 'datatables.net-react';
import DT from 'datatables.net-bs5';

import 'bootstrap/dist/css/bootstrap.css';

import { FetchDataTable, FetchDataTableContext } from './FetchDataTable';

DT.use(bootstrap);
DataTable.use(DT);

function MyDataTable()
{
    const dtTable = useRef(); // Create a DT ref (Normally only plain DOM elements are allowed here, but DataTable is a special case)

    //Provides context.tableData, context.setTableTable()
    const context = useContext(FetchDataTableContext);

    const options = {

        lengthMenu: [2, 10, 25, 50, 100],

        // Put other options here

        columns: [
            { data: 'UserId' },
            { data: 'FirstName' },
            { data: 'LastName' },
            { data: 'Role' },
        ],
    };

    return (
        <DataTable id="users" ref={dtTable}
              data={context.tableData}
              options={options}
              className="display table table-striped table-bordered">
            <thead>
                <th>UserId</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Role</th>
            </thead>
            <tbody>
            </tbody>
        </DataTable>
    );
}

/////////////////////////////////////////////////////////////////////////////
//
function App() {

    const fetchUrl = 'https://my-site-name/my-api'
    const fetchOptions = { 'method': 'GET' };

    return (
      <div className="container">
        <FetchDataTable fetchUrl={fetchUrl} fetchOptions={fetchOptions}>
          <MyDataTable />
        </FetchDataTable>
      </div>
    );
}

/////////////////////////////////////////////////////////////////////////////

export const root = createRoot(document.getElementById("root"));

root.render(
    <App />
);

{data: "reporting_header.balance_CLBD_amount_amount", render: DataTable.render.number(null, null, 2), className: 'dt-body-right' }

But I must add a condition statement which calculate the value of the column:

{data: null, render: function ( data, type, row ) {
     if (data.reporting_header.balance_CLBD_credit_debit_indicator === 'DBIT') {
          return -1 * data.reporting_header.balance_CLBD_amount_amount;
     } else {
          return data.reporting_header.balance_CLBD_amount_amount;
     }
}}

How can I add to the second code the formating of the first?

            'layout': {
                topStart: 'buttons',
                topEnd: 'search',
                bottomStart: {
                    info: {
                        text: 'Displaying _START_ to _END_ of _TOTAL_ events'
                    }
                },
                bottomEnd: ''
            },

I have made a short video which shows the problem. Please see https://berricktest.co.uk/datatablesScrollbarProblem.mp4

I created a large test case that covers all the features I'm trying to use with version 2 (v2.3.4 at the time of writing this post) of the DataTables component as well as almost all the extensions.

But first, here are the specifics of my example:
- The DataTable uses the columnControl extension and has two header rows.
- The table rows contain HTML code and controls, as well as SVG-type images.
- Some columns are intentionally hidden to be displayed as child rows (the "Column Visibility" button is for example purposes only).

Here is the list of points I would like to achieve:

1./ Avoid exporting specific columns

As you can see, when I click on the "copy" button, I get the result below:

id  Name    E-mail  Date    SKU Qty Code    Info    Actions
00001   Name 1  email1@domain.com   2025-09-01          123     Delete
00002   Name 2  email2@domain.com   2025-08-05          456     Delete

There shouldn't be the "Info" and "Action" columns and I'm also missing the values ​​for the "SKU" and "Qty" columns.

2./ Avoid being able to move columns by dragging and dropping cells in row 2

What option should I apply to prevent the 2nd row from allowing column movement?

3./ Avoid retrieving the HTML code of the column header

As you can see, I'm creating a child row with the names of the hidden columns as well as the cell contents associated with the column.
But when I retrieve the column name (see code below), I get the entire HTML code, not just the column title.
Is there a way to avoid this?

    lRow.columns(".col-in-row-child").every( function(colIdx) {
      var lCell = oTable.cell(rowIdx, colIdx);
      var lColHeader = oTable.column(colIdx).header();
      if (lCell.data() !== "") {
        lExtraInfo += "<p><strong>" + $(lColHeader).html() + " : </strong>" + lCell.data() + "</p>";
      }
    } );

4./ In the SearchBuilder component, there should not be the 2 columns "Info" and "Action"

I used a class named .no-col-extended-search and set the "columnDefs" property to normally prevent them from being visible, but it didn't change anything.
What did I forget to do?

5./ In the SearchPanes component, the "SKU" and "Qty" columns are missing

What did I miss knowing that they appear well in the SearchPanes component.

6./ Would it be possible to have an option to reset the columnControl component's search field via the ESC keyboard key?

When you enter a filter with the keyboard, it is much faster to reset the field via a keyboard key than having to pick up your mouse again to click on the cross.

7./ Problem when refreshing DataTables when deleting a row

I'm providing a link to a problem I've already encountered so that you don't forget that it exists ;-)

https://datatables.net/forums/discussion/81377/problem-to-delete-a-row-in-datatables-works-in-v1-but-not-in-v2

cf. code below:

  $("body").on('click', 'button.btn[data-action="delete"]', function () {
    // Works well
    //mytable.row($(this).parents('tr')).remove().draw();

    // Does not work well
    deleteRow(this);
  });

  function deleteRow(ele) {
    var objInfo = $(ele).closest("tr");
    //console.log(ele);
    oTable.row($(objInfo)).remove().draw(false);
  }

8./ Problem when SearchPanes or searchBuilder is on the right of the layout

We have already discussed this issue and there is no solution to date. I am just bringing it up again so I don't forget ;-)

  var gDataTablesExtendedSearch = {
    "searchBuilder": {
      // If positionned to the right, searchBuilder is hidden on the right side (change "layout" comment to see the difference with right side)
    "searchPanes": {
      // If positionned to the right, searchPanes is hidden on the right side (change "layout" comment to see the difference with left side)

Thanks in advance for your help and I hope I could implement all these features to my DataTables, it would be just awesome!!!

Lolo.

I try to delete a row with DataTables v2.3.4

The code below works with v2 (extract from DataTables documentation)

var mytable = $("#dttable").DataTable(dataTableParam);

$("body").on('click', 'button.btn[data-action="delete"]', function () {
    mytable.row($(this).parents('tr')).remove().draw();
});

But this one does not work with v2.x (but works with v1.x)

var mytable = $("#dttable").DataTable(dataTableParam);

$("body").on('click', 'button.btn[data-action="delete"]', function () {
    deleteRow(this);
});

function deleteRow(ele) {
    var objInfo = $(ele).closest("tr");
    mytable.row($(objInfo)).remove().draw("page");
}

I suppose that something has changed with the new version but I would like to understand what is the difference between the 2 pieces of code

Otherwise nothing to do, is there a chance that the problem with Bootstrap 4 and Cards is resolved with the SearchPanes component when it is positioned to the right in the layout?

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

• Included libraries:
• DataTables 2.2.0, Editor 2.4.0, Buttons 3.2.0, Responsive 3.0.3, Select 3.0.0

The following code does not deselect the row but the check box is cleared.

For the table option I have

`            select: {
                style: 'os',
                selector: 'td:first-child'
            },`

On click of the check box

`        $('#invoiceTable tbody').on('click', '.selectPost', function (el) {
            //   var allData = invoiceTable.rows().data();
            let data = invoiceTable.row($(this).closest('tr')).data();
            let index = invoiceTable.row($(this).closest('tr')).index();
            let bank = ltgObj('sale.controlID').val();
            debugger;
            if (bank === '') {
                this.checked = false;
                //   invoiceTable.rows({ selected: true }).deselect();
                invoiceTable.row(index).deselect();
                ltgObj('sale.controlID').addClass('is-invalid');`

The class is updated and the checkbox is cleared but the row remains selected/highlighted and the footer shows one selected row. tried both rows and row option
Sorry but test case is difficult as no public access.
Thanks.

I tried using tblCountryCodes.column.adjust().responsive.recalc() but didn't make a difference.

<div>
    <table id="countryCodesTable" class="table table-striped table-bordered table-hover display responsive compact" **style="width:75%;"**>
        <thead>
            <tr class="info">
             <th>Country Code</th>
             <th>Country Name</th>
         </tr>
     </thead>
      <tbody>
      </tbody>
    </table>
    </div>
</div>

<script>
    function populateTable() {
        $.ajax({
            type: "POST",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            url: "Path to WebService API",
            cache: false,
            data: null,
        }).done(function (result) {
            tblCountryCodes.clear().draw();
            if (!result || result.d === "") {
            }
            else {
                jResult = JSON.parse(result.d);
                tblCountryCodes.rows.add(jResult).draw();
                tblCountryCodes.columns.adjust().responsive.recalc();
            }
        }).fail(function (jqXHR, textStatus, errorThrown) {
            //alert(textStatus + ' - ' + errorThrown + '\n' + jqXHR.responseText);
        });
    }

    var tblCountryCodes = $("#countryCodesTable").DataTable({
        ...
        order: [0, 'asc'],
        autoWidth: true,
        paging: false,
        columns: [
            {
                data: "COUNTRY_CODE"
            }, {
                data: "COUNTRY_NAME"
            }
        ],
        pageLength: -1,
        deferRender: true,
    });
</script>

How can I make these textboxes follow column width values?