Vanilla-DataTables

A lightweight, dependency-free javascript HTML table plugin. Similar to jQuery DataTables, but without the dependencies.

Features

Sortable columns
Pagination
Searchable
Customisable layout
Customisable labels
Customise column rendering
Load data via AJAX requests
Export to common formats like csv, txt json, and sql
Import csv and json data
Control column visibility
Reorder or swap columns
moment.js integration for sorting columns with datetime strings (experimental, v1.2.3 and above)

Documentation | Latest Version

Demos

Install

Bower

bower install vanilla-datatables --save

npm

npm install vanilla-datatables --save

Browser

Grab the files from one of the CDNs and include them in your page:

<link href="https://unpkg.com/vanilla-datatables@latest/dist/vanilla-dataTables.min.css" rel="stylesheet" type="text/css">
<script src="https://unpkg.com/vanilla-datatables@latest/dist/vanilla-dataTables.min.js" type="text/javascript"></script>

//or

<link href="https://cdn.jsdelivr.net/gh/mobius1/vanilla-Datatables@latest/dist/vanilla-dataTables.min.css" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/gh/mobius1/vanilla-Datatables@latest/dist/vanilla-dataTables.min.js" type="text/javascript"></script>

You can replace latest with the required release number.

CDNs courtesy of unpkg and jsDelivr

Quick Start

Then just initialise the plugin by either passing a reference to the table or a CSS3 selector string as the first parameter:

var myTable = document.querySelector("#myTable");
var dataTable = new DataTable(myTable);

// or

var dataTable = new DataTable("#myTable");

You can also pass the options object as the second paramater:

var dataTable = new DataTable("#myTable", {
	searchable: false,
	fixedHeight: true,
	...
});

Don't forget to check the wiki out for further help.

If this project helps you then you can grab me a coffee or beer to say thanks.

a13marquez / vanilla-datatables Goto Github PK