THEMETRIAL

High Performance Table Data Presentation Library – regular-table

Author:jpmorganchase
Views Total:1 view
Official Page:Go to website
Last Update:January 13, 2021
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.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)

v0.0.9 (09/01/2020)

v0.0.8 (08/29/2020)

v0.0.7 (08/17/2020)

  • Fix perspective init order and tree formatting

Source link

Add comment

NOTE :

All visitors can share my site’s content on their blogs, sites, and social networks to enrich the content

Only share the source www.themetrial.com

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.