A JavaScript Library That Creates HTML Tables | 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.


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

// 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

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.