Feature requests — DataTables forums

Editor datatime suggestion: Delete button similar to tags

Loren Maxwell — Thu, 05 Jun 2025 10:30:35 +0000

I have a form with both tags and a datetime and every time I use it I find myself thinking it would be nice to have that little delete button to the right of the datetime just like the tags has

Nested editing default value

marianidiego — Thu, 15 Aug 2024 16:26:57 +0000

Link to test case:
https://editor.datatables.net/examples/datatables/nested.html

Description of problem:
What happens when nothing is selected? Or better, if the user deselect all?
Being able to define a default value for this case would be very practical.

Column Buttons not copying the breaks setup in the table column names

minifiredragon — Tue, 25 Jun 2024 03:06:44 +0000

I added this to the table:
buttons: [ { extend:'columnsToggle', }, ]

Which give me the nice row of column buttons at the top to show and hide the columns with a click. HOWEVER! It does not copy the
that I put in my table names to shorten the column widths so my column button row does not sit nicely above the table.

Looking at the generated code on the web page, I can see the
in my table column, but not in my column buttons. And no amount of text wrapping to wrap on space is changing the button.

Anyway to fix this or add it into a future update?

Code optimization

marianidiego — Fri, 12 Apr 2024 10:51:10 +0000

Link to test case:
https://editor.datatables.net/examples/simple/inTableControls.html

I don't know if it is a problem, or if I just don't know how to do it....

But in the above example, I would like to optimize the code:

**Description of problem 1 **:

When I call the editor for example like here:

editor.remove(this.closest('tr'), {
        title: 'Delete record',
        message: 'Are you sure you wish to delete this record?',
        buttons: 'Delete'
    });

Isn't it possible that it automatically loads the default title and button and message?

**Description of problem 1 **:

In the above code, I would like to not put the code I need to add the row change every time...

Is it not possible to use edit datatables.default.js, so that this is inserted automatically?

Or, not possible to create a function that adds a column?

I simply would like to write much less than :

            {
                data: null,
                defaultContent:
                    '' +
                    ' ' +
                    ' ' +
                    '' +
                    '',
                className: 'row-edit dt-center',
                orderable: false
            }
    ....


    // Activate an inline edit on click of a table cell
    table.on('click', 'tbody span.edit', function (e) {
        editor.inline(table.cells(this.closest('tr'), '*').nodes(), {
            cancelHtml: '',
            cancelTrigger: 'span.cancel',
            submitHtml: '',
            submitTrigger: 'span.edit'
        });
    });

    // Delete row
    table.on('click', 'tbody span.remove', function (e) {
        editor.remove(this.closest('tr'), {
            title: 'Delete record',
            message: 'Are you sure you wish to delete this record?',
            buttons: 'Delete'
        });
    });

Is it possible to make column.defaultContent to load itself into the data field?

minifiredragon — Tue, 16 Jan 2024 04:14:18 +0000

As per the answer to https://datatables.net/forums/discussion/41038/about-defaultcontent-and-render-options,

Is it possible to store that information into the actual data field so the column.render function does not need additional branching code to handle undefined/null data?

Also can the manual for column.defaultContent be updated to make it clear that using it does not affect the column.render function and additional coding should be added to handle undefined/null values. The way it is currently worded leads one to believe it would be used by the column.render.

rowspan on table

yu yen kan — Thu, 28 Sep 2023 00:51:34 +0000

Is there anyway I customize on rowspan usage of table? I would like to enhance abit on the usage of rowspan on both header and body to support below structure

2 row header	top row header
2 row header	bottom row header
2 row column	top row column
2 row column	bottom row column

Allow columns.title to be a function

Loren Maxwell — Mon, 17 Jul 2023 08:03:43 +0000

I've started using Handlebars and one of the items that would be nice is to allow columns.title to be a function.

My use case is that I'd like a column with an icon to open each child row (˅), but in the header an icon to close all the child rows (˄).

| ˄ | Heading | Heading | Heading |
-----------------------------------
| ˅ | Data    | Data    | Data    |
| ˅ | Data    | Data    | Data    |
| ˅ | Data    | Data    | Data    |

I obviously can do that now:

        {
            data: null,
            title: "",
            def: ""
        },

Or:

        {
            data: null,
            title: "",
            render: ()=> ""
        },

But if I want to change the icons then I have to do it on all the tables on the site where I use those icons.

With Handlebars it would look like this:

        {
            data: null,
            title: ()=> Handlebars code for close-all-child-rows icon ˄,
            render: ()=> Handlebars code for open-child-row icon ˅
        },

And then I would just change the Handlebars template.

I can actually do that now EXCEPT when ordering is true I get the following error because it's expecting a string for the title instead of a function:

Uncaught TypeError: i.sTitle.replace is not a function

Anyway -- the ability to use a function for columns.title even when ordering is true would help my particular case and maybe someone else with something similar!

Accessibility Improvements for Table Headers

phax — Wed, 12 Jul 2023 14:06:12 +0000

Hi Allan,

We are continuously improving our WCAG compliance and Datatables is an important control.
We are using the Bootstrap 4 UI, so please bare that in mind, when reading the requests.

a) According to our experts, the "aria-label" in a element is read out aloud for every table cell. So we would like to have it removed, if possible.

b) The sorting icons, that are added via CSS :before and :after are read out as "black upwards pointing triangle" - also for every cell. The best way to modify this, would be to place it in a separate element that uses the aria-hidden="true" attribute.

c) Additionally, if a column is clickable, the header text is placed in a

Accessability improvement for paginagion

phax — Thu, 19 Jan 2023 16:13:03 +0000

Feature request based on DataTables 1.13.1

Description of problem:

Our WAI experts suggested the following improvements to the pagination control:

The active page should get the following attribute: aria-current="page"
In front of the pagination, some "Screenread only text" like to result page should be added. The class "sr-only" is the "Screenreader only" class from Bootstrap 4. Unfortunately, the current DOM model does not allow such a modification
Inactive links (like the very first "Back" button or the "Ellipsis" (...) button) can be focused via the keyboard (and are read by Voice Over) but are inactive. The suggestion is to make these links not focusable (remove href attribute, add attribute role="link", add attribute aria-disabled="true")

I hope that makes sense
Best regards,
Philip

Allow "smart" quotes to enclose phrase when searching

elnjensen — Sun, 18 Jun 2023 13:31:44 +0000

The option to search for an exact phrase in a table by enclosing it in double quotes is very useful. However, it doesn't work as intuitively as it might for mobile Safari users (e.g. iPhone, iPad) since those browsers insert smart (curly) quotes by default from the keyboard, and the DataTables search then uses that as part of the search string (i.e. it searches for that smart quote character in the table). It is possible for those users to make phrase search work by using a long press on the double-quote key to get a straight quote instead of a curly quote, but the number of users who figure that out is likely to be small.

Allowing smart quotes to enclose a search phrase would solve this, though presumably it would also remove the ability to search for those characters in the table (only a mild downside IMO, but I don't know the range of use cases people have).

Adding callback / holding current pagination to $.fn.dataTable.pipeline script

tdmohr — Tue, 18 Apr 2023 22:25:42 +0000

I'm using the $.fn.dataTable.pipeline script (https://datatables.net/examples/server_side/pipeline.html) and am really missing the ability to add a callback and hold the pagination position on table reload. Ideally we could add similar functionality to the script as we can when using the plain ajax reload method (https://datatables.net/reference/api/ajax.reload()).

Is there any possibility we could shoehorn this functionality into the dataTable pipeline workflow?

Tim

Make preCreate and preEdit async

Red Sniper — Wed, 29 Mar 2023 08:30:41 +0000

Hello there,

I have been wondering, if there would be any issue in making preCreate and preEdit async.
Problem is, I usually have to make some http request to update row data based on what was typed by the user, and before the new row is being added to datatable.

Maybe this feature already exists (for these events or similar ones), in case just let me know where to find it.

Best regards
Davide

Add additional parameter to ajax request

Mausino — Sun, 02 Apr 2023 12:37:16 +0000

Link to test case:

https://datatables.net/examples/server_side/custom_vars.html
https://datatables.net/reference/option/ajax.data

Here are examples how to add extra parameters/extra http variables.

https://datatables.net/reference/api/ajax.params()
Here is example how i get the parameters which i am sending in ajax.

Will possilble somehow ??? to add new parameters to ajax call like

        var table = $('#example').DataTable( {
            ajax: "data.json",
            serverSide: true
        } );

        var visibleStatusOfIcon = 'true';

        table.on( 'xhr', function () {
            table.ajax.setParams(visibleStatusOfIcon);
        } );

the method/function setParams() is only my idea.... is the way how to add additional parameters to ajax call additionaly if in default ajax call i have parameters but i want add new one there from other place ???

Thank you

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

Scheduling Reports to save or email

Ambient — Fri, 20 Jan 2023 11:22:08 +0000

This is a rather simple one. My boss is looking to port perhaps to full editable datatables. However, the main concern he has is this...we currently have the ability to schedule reports to trigger in Crystal and these can be set to email or save to folder a html, doc, csv, pdf file . This can be set on a schedule. I.E. Every night at 3:00 a.m email report as pdf to x@mail.com or save report to xls in folder C:\Reports\x.xls Are there plans to incorporate scheduling into the datables library and if so, what kind of time frame are we talking? If this is in the pipeline are there any plugins anyone could suggest to do this?

How can I know about the new versions of datatable files.

Hindus Software — Mon, 28 Nov 2022 06:13:49 +0000

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

Is there an option to set a button in date picker to clear the date (setnull) ?

Lapointe — Sun, 02 Aug 2020 08:51:48 +0000

In date picker there is no option (I think) that allow to reset (null or else) current date time field.
If allowing keyboard action it can be do, but ...

Do you think it will be possible to get an option like this ?

Nested datatables and multi row reordering

debduttac — Tue, 11 Oct 2022 04:18:18 +0000

We have a requirement for a proper nested grid. It could be of 'n' level nesting. All we want this with inline editor. Is there any solution to this? Do you have any plans to have a nested grid in future ?

We want:
1. Row reordering, row select should be there even in child grids
2. Editor should work on any parent / child grid with just on click

Example:

Level 1
-- Level 1.1
-- -- Level 1.1.1
-- -- -- Level 1.1.1.1
....
Level 2
-- Level 2.1
-- Level 2.2

Also, we would be very happy to see if users can select multiple rows and drag and change line position (row reorder). Currently we have created a custom button with check boxes on grid lines to move multiple rows at a time.

Looking forward for your reply.
Thanks
Deb

Oracle and SSP

zajc — Fri, 26 Aug 2022 12:13:57 +0000

Can you fix SSP not working in Oracle? I found out the main problem is rownum. On 1st page everything is OK, because in the where condition is where rownum < x. The problem is when you construct where rownum between x and y. The problem is that Oracle understand only where rownum is less then..., for example where rownum < 100. There are several approaches how to avoid this limitation.

Use arrays to set className for multiple indentures in RowGroup

Loren Maxwell — Tue, 26 Jul 2022 13:56:47 +0000

First -- RowGroup had no category here in the forum!

Anyway, when setting rowGroup.className for a multiple-level RowGroup, the classes are applied to all the levels.

Would like to have an ability to set different classes for each level using arrays:

rowGroup: {
        dataSrc: [
                "first-level",
                "second-level"
                . . .
        ],
    className: [
        ["first-level-class", "another-first-level-class"],
        ["second-level-class", "another-second-level-class"],
        . . .
    ]
}

Something similar should be implemented with rowGroup.startClassName, rowGroup.endClassName, and rowGroup.emptyDataGroup as well.

Option to show table headers below the RowGroup

Loren Maxwell — Tue, 26 Jul 2022 14:29:25 +0000

For RowGroup, would like an option to show the headers below the row groups.

The current RowGroup layout is:

**Hdr1**        **Hdr2**        **Hdr3**
Group 1
Cell 1-1        Cell 1-2        Cell 1-3
Cell 2-1        Cell 2-2        Cell 2-3
Cell 3-1        Cell 3-2        Cell 3-3
Group 2
Cell 4-1        Cell 4-2        Cell 4-3
Cell 5-1        Cell 5-2        Cell 5-3
Cell 6-1        Cell 6-2        Cell 6-3

But would like the option to show:

Group 1
**Hdr1**        **Hdr2**        **Hdr3**
Cell 1-1        Cell 1-2        Cell 1-3
Cell 2-1        Cell 2-2        Cell 2-3
Cell 3-1        Cell 3-2        Cell 3-3
Group 2
**Hdr1**        **Hdr2**        **Hdr3**
Cell 4-1        Cell 4-2        Cell 4-3
Cell 5-1        Cell 5-2        Cell 5-3
Cell 6-1        Cell 6-2        Cell 6-3

Search Builder - Cell Right-Click to Add a Filter

mattreba — Thu, 24 Mar 2022 16:08:56 +0000

As a frequent user of ServiceNow I have found the right-click context options of 'Filter Out' and 'Show Matching' in list views to be extremely efficient and intuitive ways to build a filter list. Each operation simply adds an AND filter with Not or Equals for the column and value clicked. It doesn't look like Search Builder currently supports a method to push rules into the search criteria but I may have overlooked it. Would something like this be possible in the future?

Editor: add extra fields on upload many

f.talamini@stmingegneria.eu — Sat, 15 Jan 2022 08:23:51 +0000

In Editor it would be great to have the possibility to associate extra fields on each file upload while using upload many.
Thanks
Franco

[Accessibility][Pagination] Using actual buttons instead of links

alno — Thu, 27 Jan 2022 10:09:18 +0000

Hello, for accessibility purposes I realized that what looks like buttons in the pagination panel is currently built with links ( tags) instead of using actual buttons (

Map Columns and Values while importing

TheHans — Wed, 12 Jan 2022 18:54:14 +0000

Hi,

I am new to CloudTables. We doe have an import requirement.

I looked up the importer sample https://editor.datatables.net/examples/extensions/import, which does a great job already. We would need a second screen. After mapping all columns from a csv file to CloudTable database, we like to map option values for single and multi select fields as well. Is there already a function to do so? I found a similar solution here: https://docs.optimizory.com/display/rmsis0160/Generic+CSV+Import+Function but this is integrated in a system already and not usable for our own database.

Thanks
Hans

Displaying a notice after successful saving

pisisler — Sat, 12 Feb 2022 10:10:04 +0000

Original discussion: https://datatables.net/forums/discussion/71557

I think the Editor should process an advanced result set allowing it to save fields with a notice.

Right now, Editor saves the form only when it receives an explicit true from server side. And if it receives anything else, it considers that the returned result is an error message.

I think it can return true with a message which is not necessarily an error. Think of this kind of use cases;

"Price is saved, now you should consider printing the new price label"
"You saved an international phone number, you better check if PBX would allow calling it"
"Your appointment is saved. Please don't forget to bring your test results as it is not present in your patient log".

Right now, Editor expects return true; or return $error; from the server. It could be something like this instead;

return [true, 'You are eligible for the gift box! Check your inbox to see how you can receive it.'];

A note: In the original discussion, I proposed that it could also be field based but maybe it is not in harmony with the base logic of a crud table. Like for example when you have an error in salary field, it doesn't matter if you have typed a valid value into the name field; it can (and maybe should) discard all of it telling you to correct the error first. Guess there is no point in saving one field while giving an error for another field. I firstly proposed this because my use case is a bit extraordinary where it required integrating a Datatables field into a third party service. So saving a valid field despite the other erroneous field would be useful in this kind of special cases which makes it less worthy to invest on. But nevertheless, displaying a notice after saving could be very useful.

Live Grid update with pulse effect.

Uzairkhan92 — Wed, 02 Feb 2022 09:49:13 +0000

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:
I need datatable grid like in the image, My grid update after every one minute with updated value so I want when grid update so pulse background effect will show like in the image.

Uzair.

Requesting an isSelected() method in the API

Loren Maxwell — Wed, 26 Jan 2022 21:49:10 +0000

I'd like to make a feature request for an isSelected() method in the API, such as:

cell().isSelected()
column().isSelected()
row().isSelected()

It seems at the moment jQuery's hasClass is the only way to determine is the row is selected:
https://www.datatables.net/forums/discussion/comment/148900/

Browse file system, read file metadata of existing files/folder and save it to database using Editor

d00mboy — Thu, 13 Jan 2022 18:05:23 +0000

I am working on an internal document management web application that runs against our internal NAS file system. The webserver hosting this app is the NAS server.

I would like to be able use something like the 'Browse' button in the Upload() field type so the user can select local files or a folder, read file metadata from the selected file(s) and then save that metadata to a database, without uploading the file.

This information would then be used in a datatable to create clickable URLS or UNC paths, alongside descriptive fields allowing filtering of the document database to only show documents relevant to the specific user.

I have done many things like this using file metadata bulk loaded from operating system script output, but I'm hoping for a way for users to do so interactively.

I assume this is something that would require a custom field type? Am I missing some reason this is impossible? Does anyone have any pointers on where to start assuming it is not?

Ted

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

ESM/ES6 module support

cdalxndr — Wed, 14 Jul 2021 15:55:26 +0000

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:
The package from npm doesn't support the modern es6 module standard... this should be added to adapt to modern changes.
This will allow import directly in browser without any third party module loader.

Column name instead of index

mahalux — Thu, 23 Dec 2021 12:55:08 +0000

This is a feature request.

All places, where column index can be specified, like https://datatables.net/reference/option/order , must support column name.

Column index can be easily resolved internally and accepting column name improves the code quality of the datatables configuration.