Lightweight Vanilla Data Table Component

Category: Javascript , Recommended , Table | September 25, 2018
Author: Mobius1
Views Total: 2,473
Official Page: Go to website
Last Update: September 25, 2018
License: MIT

Preview:

Lightweight Vanilla Data Table Component

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: "&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.

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

You Might Be Interested In:

Leave a Reply