Pure JavaScript Dynamic Data Table – tabled.js

Preview:

Description:

tabled.js is a simple, tiny JavaScript library that helps you render a data table form JSON data, featuring paging and filtering.

How to use it:

Put the tabled.js JavaScript library at the bottom of the webpage.

<script src="dist/tabled.min.js"></script>

Create an html table with table headers on the webpage.

<table class="table table-bordered table-striped">
  <thead>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Age</th>
  </thead>
</table>

Prepare your data and generate a basic data table on the webpage.

var table = tabled.create(document.getElementsByTagName("table")[0], {
    data: [
      { firstName: "John", lastName: "Doe", age: "28" },
      { firstName: "Jane", lastName: "Doe", age: "21" },
      { firstName: "David", lastName: "Doe", age: "58" },
      { firstName: "Mike", lastName: "Doe", age: "42" },
      { firstName: "Paul", lastName: "Doe", age: "63" },
      { firstName: "Jason", lastName: "Doe", age: "35" },
      { firstName: "Jose", lastName: "Doe", age: "37" },
      { firstName: "Alex", lastName: "Doe", age: "24" },
      { firstName: "Matt", lastName: "Doe", age: "12" },
      { firstName: "Chad", lastName: "Doe", age: "75" },
      { firstName: "Ernest", lastName: "Doe", age: "23" }
    ]
  });

  function filter(event) {
    table.filter(event.target.value)
  }