Tiny Yet Full-featured Data Table Library – simple-datatable.js

Preview:

Description:

simple-datatable.js is a tiny, responsive, interactive, feature-rich data table library designed to simplify your data presentation.

It dynamically generates an HTML table from JavaScript arrays with useful functionalities such as sorting, filtering, and pagination.

How to use it:

1. Download and import the simple-datatable.js library into your project.

<link rel="stylesheet" href="css/simple-datatable.min.css" />
<script src="js/simple-datatable.min.js"></script>

2. Create an empty HTML table with a <thead> element.

<table id="myTable">
  <thead>
    <tr>
      <th class="sortable">ID</th>
      <th class="sortable">Name</th>
      <th class="sortable">Country</th>
      <th class="sortable">Email</th>
      <th>Action</th>
    </tr>
  </thead>
</table>

3. Prepare your data in a JS array as follows:

const dataList = [
      [1, "John Doe", 'Afghanistan', "[email protected]", "avatar1.png"],
      [2, "Jane Smith", 'Albania', "[email protected]", "avatar2.png"],
      [3, "Jim Brown", 'Algeria', "[email protected]", "avatar3.png"],
      [4, "Jake White", 'Andorra', "[email protected]", "avatar4.png"],
      [5, "Julie Black", 'Angola', "[email protected]", "avatar5.png"],
      // ...
]

4. Initialize the data table and specify how the tabular table should be rendered using the onRowRender function.

new simpleDataTable('myTable', dataList, {
    onRowRender: function(data, column) {
      column[1] = `<td style="display:flex; align-items:center;">
        <img src="${data[4]}" style="width:30px; border-radius:50%; margin-right:5px;" /> <span>${data[1]}</span>
        </td>`
      column[4] = `<td>
        <button onClick="alert('You clicked row id ${data[0]}')">Click</button>
        </td>`
        return column
    }
})

5. Possible options to customize the data table.

new simpleDataTable('myTable', dataList, {
    // pagination options
    itemsPerPage: 5,
    pageSelection: [5, 10, 20, 50, 100],
    // appearance options
    fontFamily: "'Segoe UI', arial, sans-serif",
    title: '',
    height: '17rem',
    // search options
    searchableColumns: [], // column index
    
})