Skip to content

A lightweight, dependency-free javascript HTML table plugin

License

Notifications You must be signed in to change notification settings

Co-qn/Vanilla-DataTables

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Vanilla-DataTables

Build Status npm version license Average time to resolve an issue Percentage of issues still open


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


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.

paypal


Copyright © 2017 Karl Saunders | MIT license

About

A lightweight, dependency-free javascript HTML table plugin

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 95.2%
  • CSS 4.1%
  • HTML 0.7%