High-Performance Table Data Visualization Libraries | regular-table

Browser’s Javascript library, regular-table  exports a custom element called <regular-table>, which renders plain HTML <table> to a fixed position within a scrollable viewport.

Only visible cells are shown and queried from a locally asynchronous default data model, making a regular table ideal for large or remote data sets. Use it to create data grids, spreadsheets, pivot tables, file trees, or whenever you need to:

  • Just a regular <table>.
  • Virtually rendered for high performance.
  • async data model handles slow, remote, enormous, and/or distributed backends.
  • Easy to style, works with any regular CSS for <table>.
  • Small bundle size, no dependencies.

Read More – Simple Heat Map Data Visualization From Numerical Values | JQuery Hottie Plugin

How to make use of it:

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. Include the regular tables of 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 tabindex="0"> <table cellspacing="0"> <thead></thead> <tbody></tbody> </table> </regular-table>
// 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 additionally supports async information 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);

High-Performance Table Data Presentation Library, Javascript Data Visualization Libraries, JavaScript Data Presentation and Datagrid, best javascript charting library 2023


Google Chart Gallery Data Visualization In Angular 6
Open Source CSS Chart & Graph Framework For Data Visualization | Charts.css
Interactive Graph Visualization For Messy Data Using D3.js | ggraph

See Demo And Download

Official Website(jpmorganchase): Click Here

This superior jQuery/javascript plugin is developed by jpmorganchase. For extra Advanced Usage, please go to the official website.