Simple Fast Data Table JavaScript Library – RdataTB

Preview:

Description:

RdataTB is a simple plain JavaScript library that helps you generate user-friendly data tables from regular HTML tables.

Features:

• Table Pagination & Navigation.
• Allows you to select how many rows to display per page.
• Live table data filter.
• Export table to JSON or CSV.
• Sort tabular data by clicking table headers.
• Compatible with any frameworks like Bootstrap 5.

How to use it:

1. Import the RdataTB’s main JavaScript into the document.

<script src=”./dist/index.js”></script>

2. Just initialize the RdataTB on the existing HTML table and done.

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Ext.</th>
      <th>City</th>
      <th is-type="date" data-format="YYYY/MM/DD">Start Date</th>
      <th>Completion</th>
    </tr>
  </thead>
  <tbody>
    ...
  </tbody>
</table>

let myDataTable = new RdataTB('myTable');

3. Download the HTML data as a CSV file.

myDataTable.DownloadCSV('fileName');

4. Download the HTML data as a JSON file.

myDataTable.DownloadJSON('fileName');

5. Sort a specific column.

myDataTable.sort('columnName');

6. Go to the next or prev page.

myDataTable.nextItem();
myDataTable.prevItem();

7. Properties.

// get table data in JSON format
myDataTable.DataTableRaw
// get all column names
myDataTable.HeaderDataTable
// get data in row
myDataTable.RowDataTable
// get data
myDataTable.DataToRender

8. Possible options.

let myDataTable = new RdataTB('myTable',{
    howSearch: true,
    ShowSelect: true,
    ShowPaginate: true,
    SelectionNumber: [5, 10, 20, 50],
    HideColumn: [],
    ShowHighlight: false,
    fixedTable: false,
    sortAnimate: true,
    ExcludeColumnExport: []
});

Changelog:

09/28/2021

• fix Error Option

09/25/2021

• v0.2.1: add Exclude Column Export feature

06/22/2021

• v0.2.0

06/15/2021

• Bugfix

06/07/2021

• Bugfix