Introduction

Vanilla JavaScript DataTable

Explore the powerful, advanced, lightweight and easy-to-use Vanilla JS DataTable library. Effortlessly create, customize, and manage data tables on your front-end web projects. Get started with our comprehensive documentation and examples.

If you have any questions or sugesstions to make this batter, or if you want to ask new feature, Feel free to contact Contact Form.

Installation

Looking to quickly add DataTable to your project? Use jsDelivr, a free open source CDN. need to download the source files? Head to the downloads page. Download here

CSS

                
                  <link href="https://cdn.jsdelivr.net/gh/jahiidh/datatable/dist/datatable.min.css" rel="stylesheet"/>
                
              

JS

                
                  <script src="https://cdn.jsdelivr.net/gh/jahiidh/datatable/dist/datatable.min.js"></script>
                
              

Use CSS whereever you want, but recomendation is use it inside header. and use JavaScript code below the table you want to convert on DataTable. But if you use it just top of the body end tag, then you wouldn't need to worry about it.

Basic Usages

Structure

HTML code

                  
<table id="example" style="display: none">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>25</td>
      <td>john@example.com</td>
    </tr>
    ....
  </tbody>
</table>
                  
                

Here `style="display: none;"` used for clean rendering. If you don't want to use you could. But for low-end machines it will help them to a smoth rendering datatable.

                  
new DataTable("#example", {
  themeClass: "default",
  limit: [10, 20, 50, 100],
  current_limit: 10,
  pagination: true,
});
                  
                

Here are some examples how you could use it.

You can use it with multiple way. It's an advanced library, so it doesn't matter how you implement this. It will try check with every possible way and run your code. It has less errors, and advanced error handling script.

Some examples how you could use it.

• HTML table and it will run your default table design
• Use with Array Data
• DataTable theme
• Use HTML in cell
• Define column names
• Search & You can define where you want to search.
• Highlight Search
• Dropdowm limit
• Generate Categories with dropdown and button design
• Pagination
• Sticky header
• Sort table & define which column do you want to sort
• If you're using with data, you can hide extra columns or not to print in table
• And, If your selector is `table` and also you added data then you can define which one you want to print.

Table Data

You can use Table data as your source input data for rendering DataTable.

Structure

HTML code

                  
<table id="example" style="display: none">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>25</td>
      <td>john@example.com</td>
    </tr>
    ....
  </tbody>
</table>
                  
                

Here `style="display: none;"` used for clean rendering. If you don't want to use you could. But for low-end machines it will help them to a smoth rendering datatable.

                  
new DataTable("#table_data", {
  themeClass: "default",
});
                  
                

Array Data

You can use Table data as your source input data for rendering DataTable.

Structure

HTML code

                  
<div id="array_data"></div>
                  
                

Here `style="display: none;"` used for clean rendering. If you don't want to use you could. But for low-end machines it will help them to a smoth rendering datatable.

                  
new DataTable("#example_data", {
  columns: ['Name', 'Age', 'Email'],
  data: [
    ["John Doe", 25, "john@example.com"],
    ["Jane Smith", 30, "jane@example.com"],
    ["Bob Johnson", 35, "bob@example.com"],
    ["Alice Williams", 28, "alice@example.com"],
    ["Michael Brown", 32, "michael@example.com"],
    ["Sarah Davis", 29, "sarah@example.com"],
    ["Robert Taylor", 37, "robert@example.com"],
    ["Olivia Martinez", 31, "olivia@example.com"],
    ["William Anderson", 26, "william@example.com"],
    ["Sophia Wilson", 33, "sophia@example.com"],
  ],
  themeClass: "default",
});
                  
                

If you don't use `columns` then, it will take the first data row for heading.

Columns

You can use columns whatever you want. If you use plain array then it will count every value as column name. If you use object, then your object key will be counted as column index. and if you can you use multidimensional array / object to define more precisely.

Here're some examples

As array.

                  
new DataTable("#example", {
  columns: ['Name', 'Age', 'Email'],
  data: [],
  themeClass: "default",
});
                  
                

As Object

                  
new DataTable("#example", {
  columns: {1: 'Age', 2: 'Email', 0: 'Name'},
  data: [],
  themeClass: "default",
});
                  
                

Define more precisely.

                  
new DataTable("#example", {
  columns: [
    {
      title: 'Name'
    },
    {
      title: 'Age'
    },
    {
      title: 'Email'
    },
  ],
  data: [],
  themeClass: "default",
});
                  
                

HTML inside cell

Actually you could use HTML inside any cell. You can define the cell.

Here is an examples

                  
new DataTable("#example", {
  columns: [
    {
      title: 'Name',
      html: '{data.value}'
    },
    {
      title: 'Age',
      html: '{data.value}'
    },
    {
      title: 'Email',
    },
  ],
  data: [],
  themeClass: "default",
});
                  
                

Here {data.val} is used for define the current cell value.

But, If you want to use another data value then just use it. also If you want, you could use value from data inside an attribute.

                  
new DataTable("#example", {
  columns: [
    {
      title: 'Age',
      html: '{data[1].value}'
    },
    {
      title: 'Name',
      html: '{data[0].value}'
    },
    {
      title: 'Email',
      html: '{data[2].value}'
    },
  ],
  data: [],
  themeClass: "default",
});
                  
                

Just use the column / data index inside square bracket.

Add Search option

Search has lots of option. Not only you can add search, also you can customize it and where do you want to serach. You can define specific column, specific attribute or you can use selector.

Basic search

                  
new DataTable("#example", {
  search: true
});
                  
                

Specified search

                  
new DataTable("#example", {
  search: true,
  search_on: {
    0: "column",
    1: ["column", "data-value"],
  },
});
                  
                

* Note: If there are more columns then also it would search on column main text. If you want to strict it and only serach on selected column then use strict method.

Specified search on strict mode

                  
new DataTable("#example", {
  search: true,
  search_on: {
    "*": "strict",
    0: "column",
    1: ["column", "data-value"],
  },
});
                  
                

Specified search on all columns

                  
new DataTable("#example", {
  search: true,
  search_on: {
    "*": ["strict", "data-value"],
    0: "column",
    1: ["column", "data-value"],
  },
});
                  
                

Here * will work for all columns. If you set strict and you don't mention column separately, then it will not check to the column.

Search highlight feature

If you want to hightlight the found cell then you could use it. it will not highlight the entire row, instead of it will highlight the matched cell.

Code

                  
new DataTable("#example", {
  search: true,
  search_on: {
    0: "column",
    1: ["column", "data-value"],
  },
  search_heighlight: true,
});
                  
                

Limit per page

Yes, there have some basic features. You can set limit and a dropdown.

Code

                  
new DataTable("#example", {
  limit: [10, 20, 50, 100],
  current_limit: 10,
});
                  
                

Pagination

It's a powerful feature and have some advanced functionalities. It will show prev, next, start, end and regular pages, depend on which page is active.

Code

                  
new DataTable("#example", {
  pagination: true,
});
                  
                

Sticky header

It's supports sticky header. If you limit the height then it's an important feature. Its work with basic way, when you will scroll the header will stick to the top until the table is completely scrolled.

Code

                  
new DataTable("#example", {
  sticky: true,
});
                  
                

Hide or don't render extra columns

It's not so important feature untill it's needed. Actually it's a little complicated thing. If you use data from Array then items will render based on your columns. So If there has extra items left then you could render them, but it will be hidden. and it will work when you will search and don't use strick mode.

The main use is, If you need to render all the cell and don't want to show those cells then it will do that for you. by default it's false and it will not render. If you want ro render then you would need to use it this code.

Code

                  
new DataTable("#example", {
  hideExtra: true,
});
                  
                

Sort columns

You can use sort method to sort your table. also you could choose the columns that you want to sort. It will work according to your column text.

Sort all columns

                  
new DataTable("#example", {
  sort: true,
});
                  
                

Sort Specified columns

                  
new DataTable("#example", {
  sort: true,
  sort_columns: [0, 2],
});
                  
                

Categories

It's an advanced feature. You can use categories from your given data. You just need to tell the item index. you can use multiple categories and with different style. If you want, you can use button style and dropdown style.

Structure

                                      
new DataTable("#example_category", {
  categories: [
    {
      placeholder: "Email",
      data: "{data[2].value}",
      column: "{column[2] attr['data-value']}",
      type: "select",
    },
    {
      placeholder: "Name",
      data: "{data[0].value}",
      column: "{column[0] span attr['data-category']}",
      type: "button",
    },
  ],
  columns: [
    {
      title: "Name",
      html: "{data.value}",
    },
    {
      title: "Age",
    },
    {
      title: "Email",
      html: "{data.value}",
    },
  ],
  data: [
    ["John Doe", 25, "john@example.com"],
    ["Jane Smith", 30, "jane@example.com"],
    ["Bob Johnson", 35, "bob@example.com"],
    ["Alice Williams", 28, "alice@example.com"],
    ["Michael Brown", 32, "michael@example.com"],
    ["Sarah Davis", 29, "sarah@example.com"],
    ["Robert Taylor", 37, "robert@example.com"],
    ["Olivia Martinez", 31, "olivia@example.com"],
    ["William Anderson", 26, "william@example.com"],
    ["Sophia Wilson", 33, "sophia@example.com"],
  ],
  themeClass: "default",
});
                  
                

Responsive

By default, datatable renders with responsive design. But if you want to disable it then you can. also it has `ultra responsive` mode.

Disable responsive

                                      
new DataTable("#example", {
  responsive: false,
});
                  
                

Ultra responsive

                                      
new DataTable("#example", {
  themeClass: "default dt-ultra-responsive",
});
                  
                

*Note: If you use ultra responsive mode then, `responsive: false` won't work. you would need to remove this `dt-ultra-responsive` for disable ultra responsive mode.

Everything in one place

It has some more features. Use it with your own and explore. and be remember, it could handle 80% of error itself.

Structure

                                      
new DataTable("#example_full", {
  categories: [
    {
      placeholder: "Email",
      data: "{data[2].value}",
      column: "{column[2] attr['data-value']}",
      type: "select",
    },
    {
      placeholder: "Name",
      data: "{data[0].value}",
      column: "{column[0] span attr['data-category']}",
      type: "button",
    },
  ],
  columns: [
    {
      title: "Name",
      html: "{data.value}",
    },
    {
      title: "Age",
    },
    {
      title: "Email",
      html: "{data.value}",
    },
  ],
  data: [
    ["John Doe", 25, "john@example.com"],
    ["Jane Smith", 30, "jane@example.com"],
    ["Bob Johnson", 35, "bob@example.com"],
    ["Alice Williams", 28, "alice@example.com"],
    ["Michael Brown", 32, "michael@example.com"],
    ["Sarah Davis", 29, "sarah@example.com"],
    ["Robert Taylor", 37, "robert@example.com"],
    ["Olivia Martinez", 31, "olivia@example.com"],
    ["William Anderson", 26, "william@example.com"],
    ["Sophia Wilson", 33, "sophia@example.com"],
  ],
  content: "data",
  search: true,
  search_on: {},
  search_heighlight: false,
  sort: true,
  sort_columns: [1, 2],
  pagination: true,
  limit: [5, 20, 50, 100],
  current_limit: 5,
  sticky: false,
  hideExtra: true,
  themeClass: "default",
});
                  
                

Changelog

See what's new added, changed, fixed, improved or updated in the latest versions.

Version 1.0.3 (20 July, 2023)

Optimized rendering speed and Fixed some errors.

Version 1.0 (16 July, 2023)

Initial Release