Author: | Rakhmadi |
---|---|
Views Total: | 1,348 views |
Official Page: | Go to website |
Last Update: | September 28, 2021 |
License: | MIT |
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