Vanilla-DataTables

---

Version 2.0 is currently in alpha and requires bug testing. Check the repo out here and the play with the demo.

---

A lightweight, extendable, 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
• Extentable with custom plugins See the wiki (v1.6.0 and above)

Documentation | Latest Version

---

Demos

• Default Setup
• Remote Data
• Datetime Strings
• Column Manipulation
• Editor Plugin
• Stress Test
• Programmatic Access

---

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/npm/vanilla-datatables@latest/dist/vanilla-dataTables.min.css" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/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.

---

Copyright © 2017 Karl Saunders | MIT license