High Performance Table Data Presentation Library – regular-table

Category: Javascript , Table | June 30, 2020
Author: jpmorganchase
Views Total: 31 views
Official Page: Go to website
Last Update: June 30, 2020
License: MIT


High Performance Table Data Presentation Library – regular-table


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 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.

// or
const regularTable = document.createElement("regular-table");

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))

5. It also supports async data models:

// Browser
let callback;
worker.addEventListener("message", (event) => {
regularTable.setDataListener((...viewport) => {
    return new Promise(function (resolve) {
        callback = resolve;
// Web Worker
self.addEventListener("message", async (event) => {
    const response = await getDataSlice.apply(null, event.data);

You Might Be Interested In:

Leave a Reply