Could it be possible to search by column, I mean it's a little bit tricky with jQuery Datatable (see : https://datatables.net/examples/api/multi_filter.html ) but I am trying to do the same with your plugin and I can't find a way to search by column...

Is there any way or any patch in way?

Thanks you.

Am I importing this wrong or does this lightweight data table code actually larger than the datatable.js code which is only 65kb?

Hello Simple-Datatablers! Like many of you I came here looking for a lightweight alternative to the excellent but over-featured jQuery DataTables library.

Simple-DataTables is fantastic except for that I would like to be able to select rows and have a selection event. I can do that by adding an event listener to the HTML table node myself, but a plugin would be nice and I will write one if there is not one already out there.

So
(1) is there a listing of Simple-DataTables plugins somewhere? If not, can you add one here on the wiki?
(2) has someone already written a row-selection plugin?

Thanks!!

Hi,

It will be very helpful if demos are listed in the description.

Best Regards

The below code results in the following error:
DataTable is not defined

How to resolve this?

<link href="https://cdn.jsdelivr.net/npm/simple-datatables@latest/dist/style.css" rel="stylesheet">
<div id="dt1"></div>
script src="https://cdn.jsdelivr.net/npm/simple-datatables@latest"></script>
let myTable = document.querySelector("#dt1");
let dataTable = new DataTable(myTable);

When using server side pagination (when totalPages is always 1) the Prev and Next pagination buttons are not visible when on the first and last pages respectively.

However when using client side pagination these buttons stay visible. More importantly they are operable, allowing you to select the previous page when on the first page, or next on the last page.

This can be fixed with
if (this.options.nextPrev && !this.onFirstPage) {
at
https://github.com/fiduswriter/Simple-DataTables/blob/master/src/datatable.js#L495

And
if (this.options.nextPrev && !this.onLastPage) {
at
https://github.com/fiduswriter/Simple-DataTables/blob/master/src/datatable.js#L524

i looked for a way to do this, but couldn't find it.

Thanks for this library! So far I've found it easy to work with and wire up, but I had one request -- is it possible to filter rows based on custom conditions before rendering? For example, I'd like to provide a dropdown that filters rows based on a single column, and I want to combine that logic with the existing text search logic. So far this is the closest I've gotten:

const origPaginate = DataTable.prototype.paginate;
DataTable.prototype.paginate = function() {
  const allRows = this.data.slice();
  const filterVal = document.querySelector("#my-dropdown").value;
  this.activeRows = allRows.filter(row => row.getAttribute("data-value") === filterVal);
  origPaginate.call(this);
};

but it doesn't combine well with the text search. Is this possible as the library currently exists, and if not, is it something you would consider adding?

On Windows (PowerShell) "npm install" throws this error:

> cat src/style.css > dist/style.css
'cat' is not recognized as an internal or external command,

Looks like you've got a typo here:
https://github.com/fiduswriter/Simple-DataTables/blob/master/src/datatable.js#L487
where it should be "onLastPage" as in :
https://github.com/fiduswriter/Simple-DataTables/blob/master/src/datatable.js#L439

which causes the "onlastPage" to be null and therefore "next" will always be this.currentPage + 1

Hi is there a way to change the order of headers, in the situation of inserting a JSON source in the back script??
I don't find any helpful resource in the WIKI.
Thanks.

ES2018 is not supported by 1-2% of internet browsers and for a project used mostly in serious production (DataTables is not some javascript toy) this is a serious disadvantage.
ES2018 is for node and server side where you can guarantee technology support, not for browsers.

Hello, I did see one ticket about export issue w/new datatable using ES2018.

What else do I need to have installed in my localhost in order for the import/exports to work?

I do not want to use node.js or typescript.! Just plain javascript.

Thank You.

There's an issue when filtering the table. I have a table with 15 entries, setted to a 5 entries per page. When I type on the search and the first result have more than 5 entries, and then filter again, the filter shows no results, but the pagination is still visible.

What to expect
I don't think that's how it should work, I expect that the pagination and the "Showing #..." won't be visibles, or at least, showing 0 of 0 and the pagination not visible.
I hope I made it clear, I'm not very good explaining.

I have an issue with sorting of table when there is only Font Awesome icon in the column header.

<table id="ranking-archive">
<thead>
    <tr>
        <th>Order</th>
        <th>Name</th>
        <th>Rank</th>
        <th><i class="fa fa-fw fa-bolt"></i></th>
        <th><i class="fa fa-fw fa-star-half-alt"></i></th>
        <th><i class="fa fa-fw fa-skull-crossbones"></i></th>
        <th><i class="fa fa-fw fa-crosshairs"></i></th>
        <th><i class="fa fa-fw fa-fire"></i></th>
        <th>Overall</th>
    </tr>
</thead>
</table>

When I add any character in-front of <i> tag, the sorting starts to work. But only when you click on that character. When you are clicking on the icon nothing happens.

Is it possible to make a table responsive? Something that removes the columns from the display. Like the datatables.net responsive extension?
https://datatables.net/extensions/responsive/

The rollup module bundler has a --format umd option to output a UMD version that would simplify using Simple-DataTables in many projects.

I want to create a button to click then call refresh or update the table with new data.

How can I do that? thanks!

Could it be possible to identify next/previous/first/last buttons in the event datatable.page?

I would like to achieve something like this:

dataTable.on('datatable.page', function(page, button) {
  if(button === 'first'){
    console.log('go to first page');
  }else if(button === 'last'){
    console.log('go to last page');
  }else if(button === 'previous'){
    console.log('go to previous page');
  }else if(button === 'next'){
    console.log('go to next page');
  }else{
    console.log('go to page', page);
  }
});

I could bind some event listeners directly to the li.pager elements to handle this, but I think it defeats the point of firing datatable.page.

Thanks.

When I use the render function on a column it is repeated twice.
I don't know if I'm doing something wrong or if it's a bug.

<script src="https://cdn.jsdelivr.net/npm/simple-datatables@latest" type="text/javascript"></script>
<script>
const dt_Games = new simpleDatatables.DataTable(document.querySelector('#games'),{
    columns: [
        {
            select: 2,
            render: function(data, cell, row){
                let id = row.querySelector('td').innerText;
                if(id == 253230){
                    console.log(data);
                }
                data = `<img src="${data}">`;
                return data;
            }
    }
    ],
    ajax: '/games.json'
});
</script>

Result:

Example.zip

This like vanillajs-datatable is compatible with pure TypeScript ?

Currently when I try to import the plugin :

import {DataTable} from 'simple-datatables';

I get

Cannot find module 'simple-datatables'.ts(2307)

Please see https://jsfiddle.net/968qevnk/2/

Adding an event listener to an element within the table removes the event. I have only tried this with click events but I would imagine it extends to others as well.

Hi Experts,

I created a simple HTML page with a table.

Then insert the following CDN settings, in the local *.js file, I wrote "import {DataTable} from "simple-datatables"".

but Chrome/Safari can't recognize the syntax "DataTable"

NodeJS is not installed, the problem is how can we use it as the traditional DataTables.
The intention is to remove jQuery, so don't add the dependency to NPM.

Could someone help me?
Thanks a lot!

Mingliang

Only strings are shown inside a datatable when importing from JSON.
How can I also get the numbers to be displayed?

I use the following JSON:

[
  {
      "Name": "Unity Pugh",
      "Ext.": 9958,
      "City": "Curicó",
      "Start Date": "2005/02/11",
      "Completion": "37%"
  },
  {
      "Name": "Theodore Duran",
      "Ext.": 8971,
      "City": "Dhanbad",
      "Start Date": "1999/04/07",
      "Completion": "97%"
  }
]

And the following js:

let dataTable = new DataTable(myTable, {
  ajax: {
    url: "someJSON.json",
  }
});

Sorting for file size with KB, MB...?

I have followed the documentation and added data-type="date" and data-format="DD-MM-YYYY h:mm" to the header of my date column. However, the sort seems to ignore this and simply sort via the numbers rather than the actual date.

Do I need to include the moment.js library separately or does Simple-DataTables already include it?

Given a date in the format "May 14, 2020," and using the the DayJS parsing data-format "MMMM D, YYYY," dates will not be sorted correctly.

This appears to be due to the following line:
const num = parseFunction(typeof content==="string" ? content.replace(/(\$|,|\s|%)/g, "") : content) which appears in columns.js. The replace is removing the commas and the space leading to the date being "May142020" before being parsed. For whatever reason, if the DayJS format is changed to "MMMMDYYYY" it ignores the day and interprets the year as "142020."

It appears that this could be resolved by creating a flag if the content is a date and testing against this before removing commas and spaces.

When clicking a header to sort the column, the next column is sorted instead

Greetings, there is some guide to start contributing, I am having the following problem when running "npm install".

"cp" is not recognized as an internal or external command,
program or executable batch file.

When you try to run the scripts found in the package.json:

"scripts": {
    "test": "npm run check_js",
    "check_js": "eslint src/",
    "compile": "npm run compile_js && npm run compile_js_umd && npm run compile_css && npm run compile_demo",
    "compile_js": "rollup -c",
    "compile_js_umd": "browserify dist/index.js --standalone simpleDatatables -o dist/umd/simple-datatables.js",
    "compile_css": "cp src/style.css dist/style.css",
    "compile_demo": "npm run compile_demo_js && cp node_modules/systemjs/dist/s.min.js demo/dist/nomodule/ && cp src/style.css demo/dist/style.css",
    "compile_demo_js": "rollup -c rollup.demo.config.js",
    "postcompile_demo": "cp -r dist/umd demo/dist",
    "prepare": "npm run compile"
  }

As I can solve that problem, I am new with npm and this is my first attempt to contribute.

When I try to pull, I get the following problem, why?
Maybe it has to do with what I have made the changes in master?

Can you please help me get started with Simple-Datatables? I used to have Vanilla-DataTables working fine, but I am having trouble here. Your help is much apreciated.

I am trying to use Simple-Datatables version 1.7.5.

I am using this to include the css:
<link rel="stylesheet" href="node_modules/simple-datatables/dist/style.css">

This to include the js:
<script src="node_modules/simple-datatables/dist/index.js"></script>

That will result in the following error:

ReferenceError: exports is not defined
at http://localhost:8080/www/dev/imviewer/node_modules/simple-datatables/dist/index.js:1:235

And if I use the following js code instead:
import {DataTable} from "./node_modules/simple-datatables/dist/index.js"

Then I will get the error:

SyntaxError: The requested module './node_modules/simple-datatables/dist/index.js' does not provide an export named 'DataTable'

I using the data-content on a Date column.
The sorting is working fine in this way
But the search is also using this data-content.

Are there a way to the search use the innerText?

Hello,
I would like to have a way to update my data efficiently. Actually I have tested this:

// Update the row index by deleting it and adding again at the end
// Limitation: datatable require fixed rows orders, like a primary key column
dataTable.rows().remove(index);
dataTable.insert([one_row_data]);
dataTable.columns().sort(0, 'asc');

I don't know the internal data structure, I suppose there is no relation between data and rows since rows are juste the rendered order of data. It would be nice having a rows.update(index) method.

Any ideas ?

Thank you

Thanks @hydrocat for your PR #53
that PR is what I (almost) needed.

Can we make maybe some improvments?

Make Filter as a Callback function

Sometimes you need extra functionallity checks like Date-Range, Validation, etc.
With the current setup we can only define Strings which will be checked with String.includes().

Old:

const config = {
    data,
    filters: {"Job": ["Assistant", "Manager"]},
};

New:

const config = {
    data,
    filters: {"Job": (colValue, colElement) => ["Assistant", "Manager"].indexOf(colValue) >= -1},
};

Make Public Method for Easy use on fly

Personally I want to create a Button, which will show me only entries which are in a Date-Range. This Button should toggle the filter on and off ever time.

I would prefer a Syntax like this:

// example like config filter callback
let filterId;

if(!filterId) {
    filterId = dt.applyFilter(colIndexOrName, (colValue, colElement) => {});
} else {
    dt.removeFilter(filterId);
    filterId = null;
}

Hi,
thank you for a useful library. It works great.
However, I could not find anywhere abou styling the layout. Can you provide a hint?
I would specifically want to style {info} {search} {select} and {pager}

Thank you!

If yes, where can I find it?

grateful!

The column render property seems to be ignored when using insert() and/or rows.add() to update the table data (I don't know if this is a bug or I'm just not using the option correctly).

I have a column where I am rendering icons and I am trying to filter by column. To do that, I am first removing all rows and then inserting the filtered rows (I've used the insert() and rows.add() methods). When the new rows are inserted on the table, the icons (which are initially rendered) don't render anymore. The same thing happens if I try to insert data or rows without filtering.

When no options are provided:

const elem = document.body.appendChild(document.createElement('table'));
new simpleDatatables.DataTable(elem);  //without options

TypeError: undefined is not an object (evaluating 'e.layout')

When options are provided:

const elem = document.body.appendChild(document.createElement('table'));
new simpleDatatables.DataTable(elem, {});  //empty options

No error is encountered.

It looks like this started in v2.1.9: b83f38e

@Mobius1
Is there a way to add more data to send to api as query params to implement server side pagination or search

Something like this.
ajax: { url: "/data", arguments: { page: 1, perPage: 15 }, load: loadHandler }

hi, i try to see if there's some server-side on demmand support just like jquery+datatable does.. but i cannot find any in the wiki! later I see there's no server-side dynamic request . i mean, there's serverside support, but not with "pagination trick on demand" like jquery does on each page request...

i compared datatables+jquery vs vanilla-datatable and due vanilla-datatables need or use the pre-rendered html table tags the performance are a little less rather than datatables+jquery that does not need a complete table body pre-rendered (due are build via javascript), that cos vanilla-datatables way's make two work: build and render the table with all the huge data, and later modify the html tags via javascript, in the first avoiding in jquery flavor to cheap time on page loading

so then, i think serverside with on demand data can be done if we can catch the pagin and the lengh of the vanilla-datatables and sent as parameter in the ajax:url request ... so the only changes related to vanilla-datatables code will be a way to get the "perPage"

Let's say that i have 10+ datatables on my page.
I don't want to store them in a var but I want to get the datatable object dynamically.
How do I get the datatable object so i can use methods and options on it at a later time?

The documentation has examples like this:

`
let dataTable = new DataTable(myTable);

dataTable.on('datatable.XXXX', function(args) {
// Do something when datatable.XXXX fires
});
`

I want to get something like this:

dataTable.on('datatable.XXXX', function(args) { // Do something when datatable.XXXX fires });

Without creating a new datatable object.

Thanks for the fork. Migrating was easy: changed the import statement, and had to import the css from a different location (dist/style.css) now. Everything else worked as expected

Hi, I'm trying to refresh datatable with new data, It appends new data to the current data and does not clear before I import. data_ is an object!
I looked inside the code and could not find any truncate method besides clear()

this.datatable.clear();
this.datatable.import({
	headings: true,
	data: data_
});

Hello,
i'm developing an application with typescript, and when i try to delete a row using
let tableElement = (<HTMLTableElement><any>document.getElementById(tableId)); tableElement.deleteRow(index);
the row deletes apparently but when i check with the function datatable.columns().dt.data; it stills shows me the row deleted.

i compared datatables+jquery vs vanilla-datatable and ..

due vanilla-datatables need or use the pre-rendered html table tags the performance are a little less rather than datatables+jquery that does not need a complete table body pre-rendered (due are build via javascript), that due vanilla-datatables way's make two work: build and render the table with all the huge data, and later modify the html tags via javascript, in the first avoiding in jquery flavor to cheap time on page loading

using 30000 rows with 220 columns the vanilla-datatables crash the browsers, especially due are using the ES2015 especification.. additional needs prerender the html tags and later dinamically modify at client side those tags.. so then this project only work with little amount of data only!

It could be useful to have a CDN version of this package. A transpiled version using babel would be nice too. Thanks for your good work!

At the moment, Simple-DataTables seem to sort first on uppercase and then on lowercase. Ideally it would be good to use toLowerCase() to convert all strings to lowercase on sort.

Is this possible?

The following column information is selecting second column as the sorted column.

const columnData =  [
    {
      select: 0,
      type: "date",
      format: "MM/DD/YYYY",
      sort: "asc",
    },
  ]

PR: #4

I like your plugin, but for the moment the is so much things I can't reproduce from the jQuery version to yours that it's hard to me to change...

The first thing it could be awesome to add is to saving a state in localStorage, on the normal DataTable the configuration point is stateSave: true,, with this option enabled it will save / load automatically the table keeping datas in localStorage of the browser.

If it could be done here too, it would be a great advance!

i recently see that this are a update of the original vanilla-datatables...

due the ES20XX compilant, what are the browsers support matrix? just "up to date fashion fever" ?

iif there's no minimal olders browsers support i'm afraid that this are a "hobbie-made-for" proyect... we developers need in bussiness does not limits the clients!