Lightweight Vanilla Data Table Component

Preview:

Description:

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: "‹",
  nextText: "›",
  firstText: "«",
  lastText: "»",
  ellipsisText: "…",
  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('datatable.search', function (table) {
  // fires on keyup during a search
});

Changelog:

09/25/2018

• v1.6.16