Lightweight Vanilla Data Table Component

Category: Javascript , Recommended , Table | September 25, 2018
Views Total:4,008 views
Official Page:Go to website
Last Update:September 25, 2018


Lightweight Vanilla Data Table Component


A lightweight, dependency-free data table component for handling large datasets with support for pagination, filtering, ordering, editing and more. Fully compatible with Bootstrap.

How to use it:

Load the Vanilla Data Table Component’s stylesheet and JavaScript files in your html document.

<link href="vanilla-dataTables.css" rel="stylesheet">
<script src="vanilla-dataTables.js"></script>

Load the OPTIONAL plugins:

<!-- cell edit plugin -->
<link href="plugins/editCells/editCells.css" rel="stylesheet">
<script src="plugins/editCells/editCells.js"></script>
<!-- highlight matched items -->
<script src="plugins/highlightMatches/highlightMatches.js"></script>

Attach the DataTable function on your existing html table and done.

var table = document.getElementById('table');
var options = {
    // options here
var dataTable = new DataTable(table, options);

All possible configuration options with default values.

  // how many rows per page
  perPage: 10,
  perPageSelect: [5,10,15,20,25],
  fixedColumns: true,
  fixedHeight: false,
  // Pagination
  nextPrev: true,
  firstLast: false,
  prevText: "&lsaquo;",
  nextText: "&rsaquo;",
  firstText: "&laquo;",
  lastText: "&raquo;",
  ellipsisText: "&hellip;",
  ascText: "▴",
  descText: "▾",
  truncatePager: true,
  pagerDelta: 2,
  // enables sorting
  sortable: false,
  // enables live search
  searchable: false,
  header: true,
  footer: false,
  // Customise the display text
  labels: {
    placeholder: "Search...", // The search input placeholder
    perPage: "{select} entries per page", // per-page dropdown label
    noRows: "No entries found", // Message shown when there are no search results
    info: "Showing {start} to {end} of {rows} entries" //
  // Customise the layout
  layout: {
    top: "{select}{search}",
    bottom: "{info}{pager}"

Events handlers.

dataTable.on('datatable.sort', function (table) {
  // fires when the data table is sorted
dataTable.on('datatable.change', function (table) {
  // fires on page change
dataTable.on('datatable.perpage', function (table) {
  // fires when the perPage option is changed with the dropdown
dataTable.on('', function (table) {
  // fires on keyup during a search



  • v1.6.16

You Might Be Interested In:

Leave a Reply