Author: | jpmorganchase |
---|---|
Views Total: | 37 views |
Official Page: | Go to website |
Last Update: | August 27, 2023 |
License: | MIT |
Preview:

Description:
regular-table is a pure JavaScript library for high-performance tabular data presentation.
Works with both async and virtual data models.
Only visible cells are rendered in the table with sticky table headers and columns.
Intended for data tables/grids, excel-style spreadsheets, tree views, pivot tables, and much more.
Basic usage:
1. Install and import the regular-table.
# Yarn $ yarn add regular-table # NPM $ npm install regular-table --save
import "regular-table"; import "regular-table/dist/css/material.css";
2. Or include the regular-table’s JavaScript and CSS on the web page.
<script src="https://cdn.jsdelivr.net/npm/regular-table/dist/umd/regular-table.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/regular-table/dist/css/material.css" />
3. Create a regular-table Custom Element in your app.
<regular-table></regular-table>
// or const regularTable = document.createElement("regular-table"); document.body.appendChild(regularTable);
4. Render your virtual data into the table.
const DATA = [ [0, 1, 2, 3, 4, 5], ["A", "B", "C", "D", "E", "F"], [true, false, true, false, true, false], ]; function dataListener(x0, y0, x1, y1) { return { num_rows: NUM_ROWS, num_columns: NUM_COLUMNS, row_headers: ROW_HEADERS column_headers: COLUMN_HEADERS, data: DATA.slice(x0, x1).map((col) => col.slice(y0, y1)) }; } regularTable.setDataListener(dataListener); regularTable.draw();
5. It also supports async data models:
// Browser let callback; worker.addEventListener("message", (event) => { callback(event.data); }); regularTable.setDataListener((...viewport) => { return new Promise(function (resolve) { callback = resolve; worker.postMessage(viewport); }); });
// Web Worker self.addEventListener("message", async (event) => { const response = await getDataSlice.apply(null, event.data); self.postMessage(response); });
Changelog:
v0.6.0 (08/27/2023)
- Add column_header_merge_depth and row_height page options
v0.5.9 (07/27/2023)
- Bugfix
v0.5.8 (07/17/2023)
- Bugfix
v0.5.7 (07/03/2022)
- Add scroll notification
v0.5.6 (03/03/2022)
- Fix debounce interference between multiple regular-table
v0.5.5 (02/19/2022)
- Fix errors when .draw() called on empty viewport/invisible element
v0.5.4 (02/19/2022)
- Fix a miscalculation in row_header offsets
v0.5.3 (02/19/2022)
- Fix width overflow by 1px
v0.5.2 (02/16/2022)
- Fix row range max scroll to use sub-cell offset
v0.5.1 (02/15/2022)
- Linear column scrolling
v0.5.0 (02/09/2022)
- Implement Sub-cell scrolling
v0.4.3 (02/06/2022)
- Fix virtual_mode CSS bug
v0.4.2 (12/08/2021)
- Fix screen thrash when “position: sticky” container resize is triggered
v0.4.1 (07/09/2021)
- Enhancements
v0.4.0 (04/26/2021)
- Preserve classname
v0.3.2 (04/14/2021)
- Fix column group resize
v0.3.1 (04/08/2021)
- Enhancements
v0.3.0 (03/30/2021)
- Add ‘virtual_mode’ optional argument to setDataListener\(\)
- Return an unsubscribe function from addStyleListener
v0.2.1 (02/05/2021)
- Clean and autosize columns in incremental render passes
v0.2.0 (02/04/2021)
- Enhancements and bugfixes
v0.1.6 (01/13/2021)
- Incrementally call styleHandlers, and remove intermediate <div>
v0.1.5 (09/11/2020)
- Fixed perspective example bug
v0.1.4 (09/14/2020)
- Don’t preventDefault() scroll when the table is at scroll min or max
v0.1.3 (09/08/2020)
- Fix perspective header border for last header element
v0.1.2 (09/07/2020)
- Move staging to light DOM & add swap API
v0.1.0 (09/04/2020)
- Bugfix
v0.0.9 (09/01/2020)
- Adds
clear()
method
v0.0.8 (08/29/2020)
- Fix iOS scroll bounce
v0.0.7 (08/17/2020)
- Fix perspective init order and tree formatting