https://github.com/j4dream/cs-table
High performance table, react component
https://github.com/j4dream/cs-table
react reactjs resizable sheet sorting table virtualized
Last synced: 3 months ago
JSON representation
High performance table, react component
- Host: GitHub
- URL: https://github.com/j4dream/cs-table
- Owner: j4dream
- Created: 2020-04-25T15:38:41.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-05-02T16:41:53.000Z (almost 2 years ago)
- Last Synced: 2025-10-04T02:51:34.798Z (7 months ago)
- Topics: react, reactjs, resizable, sheet, sorting, table, virtualized
- Language: TypeScript
- Homepage: https://j4dream.github.io/cs-table/
- Size: 12.7 MB
- Stars: 6
- Watchers: 1
- Forks: 1
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](https://j4dream.github.io/cs-table/)
[CTable Online Demo](https://codesandbox.io/s/ctable-2l6l9)
[STable Online Demo](https://codesandbox.io/s/stable-cfehb)
```javascript
import { CTable, STable } from 'virtualized-sc-table';
const header = [
{
label: 'Operation',
fixed: true,
prop: 'op',
width: 90,
renderHeader: (h, p) => Operation,
renderCell: () => OP,
},
{
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);
}
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 |