leevare / cs-table

High performance table, react component

CS Table, virtualized Table

Supports large amounts of data, built using react hooks.

Install

npm i virtualized-sc-table
// or
yarn add virtualized-sc-table

文档 Docs
CTable Online Demo
STable Online Demo

import { CTable, STable } from 'virtualized-sc-table';

const header = [
  {
    label: 'Operation',
    fixed: true,
    prop: 'op',
    width: 90,
    renderHeader: (h, p) => <a href="#">Operation</a>,
    renderCell: () => <a href="#">OP</a>,
  },
  {
    label: 'Email (Fixed)',
    fixed: true,
    prop: 'email',
  },
];
for (let i = 0; i < 200; i++) {
  header.push({
    label: `H ${i}`,
    prop: `${i}`,
  });
}

const data = [];
for (let r = 0; r < 10000; r++) {
  const row = {};
  for (let c = 0; c < 200; c++) {
    row[c] = `data ${r}:${c}`;
  }
  row['email'] = `test_${r}@email.com`;
  data.push(row);
}

<CTable
  header={header}
  data={data}
  // renderCell={(record, prop) => record[prop]}
  // renderHeader={(header, prop) => header[prop]}
/>;

STable

Sheet can support grouping column header and row header.

props	default	Desc
colHeader: Array	[]	required *, table header [{ label: 'Name', prop: 'name' }]
rowHeader: Array	[]	required *, table header [{ label: 'Name', prop: 'name' }]
data: Array	[]	required *, tabel data [{ name: 'DDR' }]
renderCell: Function	(record, rowProp, colProp, data) => record
cellWidth: number	100	config cell Width
cellHeight: number	40	config cell Height
enableColResize: boolean	false	support resize col
enableColSorting: boolean	false	support drag & drog to sort colunm header
enableRowResize: boolean	false	support resize col
enableRowSorting: boolean	false	support drag & drog to sort row headr

CTable

props	default	Desc
header: Array	[]	required *, table header [{ label: 'Name', prop: 'name' }]
data: Array	[]	required *, tabel data [{ name: 'DDR' }]
preventScroll: Boolean	false	toggle scroll, prevent scroll
keepScrollStatus: Boolean	false	when data or header update, keep scroll status, ortherwise scroll to {0, 0}
enableResize: Boolean	false	resize col width
renderCell: Function	(record, rowIndex, prop, header) => record
renderHeader: Function	(header, prop) => header.label