Dynamic Data Table In Vanilla JavaScript

Category: Javascript , Table | July 14, 2018
Views Total:11,858 views
Official Page:Go to website
Last Update:July 14, 2018


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 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">
      <th>Start date</th>

Define arrays of tabular data in the JavaScript as follows:

var data = {
    "headings": [
      "Start Date",
      "Phone No."
    "rows": [
        "Hedwig F. Nguyen",
        "Arcu Vel Foundation",
        "[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: '&lsaquo;',
    nextText: '&rsaquo;',
    firstText: '&laquo;',
    lastText: '&raquo;',
    // 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. 
// Updates the number of pages, rows, etc. 
// Adds new rows to the table.
// Sorts the data by column and direction. 
dataTable.sortItems(3, 'desc');


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


v1.6.14 (07/14/2018)

  • fix exporting to CSV

You Might Be Interested In:

Leave a Reply