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

Category: Javascript , Table | May 16, 2021
Views Total:893 views
Official Page:Go to website
Last Update:May 16, 2021


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


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.


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
// set tabular data
// set table headers
// sort a specific table column
myTable.sort(index, ascending[true/false]);
// return the tabular data
// return the table headers
// check if the table is sortable
// return the search query
// return the selector of the data table
// return the sort state


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

You Might Be Interested In:

Leave a Reply