High Performance Table Data Presentation Library – regular-table

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

Preview:

High Performance Table Data Presentation Library – regular-table

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

You Might Be Interested In:


Leave a Reply