JS Array To HTML Table Converter – data-table.js

Preview:

Description:

A tiny and fast table generation JavaScript library that converts 2d arrays into HTML tables with fixed table header, sortable, and searchable functionalities.

How to use it:

1. Import the data-table.min.css and data-table.min.js files into the HTML page.

<link rel="stylesheet" href="dist/data-table.min.css" />
<script src="dist/data-table.min.js"></script>

2. Create a container to hold the generated table.

<div id="example"></div>

3. Prepare your table data in a 2D array as follows:

const myHeaders = ["English", "Spanish"],
const myData = [
      ["Red", "Rojo"],
      ["Orange", "Anaranjado"],
      ["Yellow", "Amarillo"],
      ["Green", "Verde"],
      ["Blue", "Azúl"],
      ["Purple", "Morado"]
],

3. Populate the table with your data.

let myTable = new DataTable("#example", {
    headers: myHeaders,
    body: myData,
});

4. Render the table.

myTable.render();

5. Enable the Sortable functionality.

let myTable = new DataTable("#example", {
    headers: myHeaders,
    body: myData,
    sortable: true
});

6. Create a search field so that you can filter through tabular data by values typed.

<input id="searchBar" type="text" placeholder="Search" oninput="myTable.search(document.getElementById('example').value)" />

7. More options.

let myTable = new DataTable("#example", {
    bodyClasses: [["class-1", "class-2"], ["class-2", "class-1"]],
    bodyEventHandlers: { click: (row, column, args) => {} },
    dataIsHTML: true,
    headerClasses: ["class-1", "class-2"],
    headerEventHandlers: { click: (column, args) => {} },
    searchQuery: "my query",
    sortAscending: false,
    sortIndex: 1,
    theme: null, // basic-light or basic-dark
    unsortable: false
});

8. API methods & properties.

// search the table
myTable.search("query");
// set tabular data
myTable.setBody([...]);
// set table headers
myTable.setHeaders([...]);
// sort a specific table column
myTable.sort(index, ascending[true/false]);
// return the tabular data
myTable.body
// return the table headers
myTable.headers
// check if the table is sortable
myTable.isSortable
// return the search query
myTable.searchQuery
// return the selector of the data table
myTable.selector
// return the sort state
myTable.sortIndex
myTable.sortAscending

Changelog:

v1.0.0 (05/16/2021)

• Added a dark theme and created the theme property to control the table theme
• Implemented the bodyClasses and headerClasses properties so that custom CSS styles can be applied to specific table elements
• Custom table event handlers can be registered through the bodyEventHandlers and headerEventHandlers options
• Added the dataIsHTML property to control whether table data is interpreted as HTML
• Table icons can be customized using the downIcon, upIcon, and updownIcon properties