当前位置:主页 > JavsScript库 > 表格 >

JavaScript高性能数据表格库 - regular-table
栏目分类:表格   发布日期:2021-09-02   浏览次数:

regular-table 是一个纯 JavaScript 库,用于高性能表格数据展示。

适用于异步和虚拟数据模型。

表格中仅呈现可见单元格,并带有粘性表格标题和列。

适用于数据表/网格、excel 样式的电子表格、树视图、数据透视表等。

用法:

1.安装并导入regular-table。

# Yarn
$ yarn add regular-table
 
# NPM
$ npm install regular-table --save
import "regular-table";
import "regular-table/dist/css/material.css";

2. 或者在网页中包含正则表的 JavaScript 和 CSS。

<script src="regular-table.js"></script>
<link rel="stylesheet" href="material.css" />

3. 在您的应用程序中创建一个常规表自定义元素。

<regular-table></regular-table>
// 或
const regularTable = document.createElement("regular-table");
document.body.appendChild(regularTable);

4. 将您的虚拟数据渲染到表中。

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. 它还支持异步数据模型:

// 浏览器
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);
});



官方网站:https://github.com/jpmorganchase/regular-table

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库