Author: | Mobius1 |
---|---|
Views Total: | 11,584 views |
Official Page: | Go to website |
Last Update: | July 14, 2018 |
License: | MIT |
Preview:

Description:
A pure Vanilla JavaScript based data table component that features dynamic tabular data, table filtering, sorting, paginating and many more.
Install the Vanilla-DataTables:
# NPM $ npm install vanilla-datatables # Bower $ bower install vanilla-datatables
Basic usage:
Import both Vanilla-DataTables’ JavaScript and CSS files into your project.
<link href="vanilla-dataTables.css" rel="stylesheet"> <script src="vanilla-dataTables.js"></script>
Create an empty table in the webpage.
<table class="table" id="basic"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Ext.</th> <th>Start date</th> <th>Salary</th> </thead> <tbody></tbody> </table>
Define arrays of tabular data in the JavaScript as follows:
var data = { "headings": [ "Name", "Company", "Ext.", "Start Date", "Email", "Phone No." ], "rows": [ [ "Hedwig F. Nguyen", "Arcu Vel Foundation", "9875", "03/27/2017", "[email protected]", "070 8206 9605" ], ... ] }
Initialize the Vanilla-DataTables and done.
var myTable = document.getElementById('basic'); var dataTable = new DataTable(myTable, {data: data});
All possible options.
var dataTable = new DataTable(myTable, { // the maximum number of rows to display on each page perPage: 10, // the per page options in the dropdown perPageSelect: [5, 10, 15, 20, 25], // navigation options nextPrev: true, firstLast: false, prevText: '‹', nextText: '›', firstText: '«', lastText: '»', // enable sortable sortable: true, // enable searchable searchable: true, // fix the width of the columns. fixedColumns: true, // fix the height of the table. fixedHeight: false, // truncate the page links to prevent overflow with large datasets. truncatePager: true });
API methods.
// Updates the number of pages, rows, etc. datatable.refresh(); // Updates the number of pages, rows, etc. dataTable.page(6); // Adds new rows to the table. dataTable.addRows(newData); // Sorts the data by column and direction. dataTable.sortItems(3, 'desc');
Events.
dataTable.on('datatable.init', function() { // Do something }); dataTable.on('datatable.refresh', function() { // Do something }); dataTable.on('datatable.update', function() { // Do something }); dataTable.on('datatable.page', function(page) { // Do something }); dataTable.on('datatable.sort', function(column, direction) { // Do something }); dataTable.on('datatable.perpage', function() { // Do something }); dataTable.on('datatable.search', function(query, matched) { // Do something });
Changelog:
v1.6.14 (07/14/2018)
- fix exporting to CSV