Simple Fast Data Table JavaScript Library – RdataTB

Category: Javascript , Table | June 22, 2021
Author: Rakhmadi
Views Total: 143 views
Official Page: Go to website
Last Update: June 22, 2021
License: MIT

Preview:

Simple Fast Data Table JavaScript Library – RdataTB

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

Changelog:

06/22/2021

  • v0.2.0

06/15/2021

  • Bugfix

06/07/2021

  • Bugfix

You Might Be Interested In:


Leave a Reply