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

data-table-js

data-table is a small and fast table generation JavaScript library that converts 2D arrays into HTML tables with fixed table headers and sortable and searchable functions.

how to create table in html with example, how to create a table in html with border, advanced html tables examples, html table style, table attributes in html

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

Official Website(ashermorgan): Click Here

This superior jQuery/javascript plugin is developed by ashermorgan. For extra Advanced usage, please go to the official website.