Dynamic Data Table In Vanilla JavaScript

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