Author: | simplenotsimpler |
---|---|
Views Total: | 1,910 views |
Official Page: | Go to website |
Last Update: | August 20, 2021 |
License: | MIT |
Preview:

Description:
A modern table builder in JavaScript library which helps you render JSON data in a filterable data table.
How to use it:
1. Download and load the needed JavaScript & CSS files in the document.
<link rel="stylesheet" href="src/modern-table.css" /> <script src="src/modern-table.js"></script>
2. Define your tabular data in a JSON file.
// data.json [ { "id": 1, "rpt_date": "2018-08-01", "new_customers": 147, "revenue": 27038, "cogs": 9833, "profit": 17205, "profit_margin": 0.636327 }, ... ]
3. Load the Moment.js library to format dates & times. OPTIONAL.
<script src="/path/to/moment.min.js"></script>
4. Load the format-intl-number library to format numbers. OPTIONAL.
<script src="/path/to/format-intl-number.js"></script>
5. Create a container to hold the data table.
<div id="table-container"></div>
6. Generate a basic data table from the JSON data you provide.
const sampleTable = new ModernTable( // container ID 'table-container', // Table ID 'sample-table', // JSON URL '/path/to/data.json', // configurations { // options here } );
7. Config the data table with the following options.
- tableClasses: Enter classes as a single string same as if entering in the class attribute.
- tableCaption: String for specifying table caption.
- tableFooter: String for specifying table footer.
- enableSearch: boolean to enable using the search box.
- searchClasses: Classes to be used on the search element.
- colConfig: Column configuration object. Key is column name.
- colConfig.colName: The name of the column in the model to set options for.
- colConfig.colName.format: Column format: ‘date-us’, ‘number-grouped’, ‘number-ungrouped’, ‘currency-us’, ‘percent’.
- colConfig.colName.dateSource: Date format of source data.
- colConfig.colName.dateDisplay: Format that the date should be displayed in.
- colConfig.colName.numDecimals: Number of decimals to display.
- colConfig.colName.alignment: Cell alignment: left, center, and right.
const sampleTable = new ModernTable( // container ID 'table-container', // Table ID 'sample-table', // JSON URL '/path/to/data.json', // configurations { tableClasses: 'table table-bordered table-striped table-hover table-sticky table-sm', tableCaption: 'Sample Sales Data', searchClasses: 'form-control mb-2 w-25 float-right', colConfig: { 'rpt_date': { 'format': 'date-us', 'dateFrom': 'YYYY-MM-DD', 'dateTo': 'MM/DD/YY', 'colTitle': 'Report Date' }, 'new_customers': { 'format': 'number-grouped', 'alignment': 'right' }, 'revenue': { 'format': 'currency-us', 'alignment': 'right' }, 'cogs': { 'format': 'currency-us', 'alignment': 'right' }, 'profit': { 'format': 'currency-us', 'alignment': 'right' }, 'profit_margin': { 'format': 'percent', 'numDecimals': 1, 'alignment': 'right' } } } );
Changelog:
v1.0.8 (08/20/2021)
- Update
v1.0.6 (06/16/2020)
- Fix: typos and minor tweaks