A JavaScript Library That Creates HTML Tables | data-table.js

How to make use of it:

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

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

2. Create a container to carry the generated table.

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

3. Prepare your table information 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 together with your information.

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 subject so as to filter by way of tabular information by values typed.

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

7. API strategies & 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

JS Array To HTML Table Converter, data-table Plugin/Github, html table template, html table css

See Demo And Download