# virtualized-sc-table

> Supports large amounts of data, built using react hooks.

Latest version **0.6.2** (published 2021-08-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install virtualized-sc-table
pnpm add virtualized-sc-table
yarn add virtualized-sc-table
bun add virtualized-sc-table
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.6.2 |
| Published | 2021-08-04 |
| First published | 2020-04-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 57 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | j4dream |
| Keywords | react, table, virtualized, resizable, resize |

## Links

- npm: https://www.npmjs.com/package/virtualized-sc-table
- Homepage: https://j4dream.github.io/cs-table/
- npm.io page: https://npm.io/package/virtualized-sc-table

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 0.6.2 (latest) — 2021-08-04
- 0.6.1 — 2021-07-31
- 0.6.0 — 2021-07-30
- 0.5.5 — 2020-09-22
- 0.5.4 — 2020-09-16
- 0.5.3 — 2020-09-16
- 0.5.2 — 2020-09-16
- 0.5.1 — 2020-07-12
- 0.5.0 — 2020-07-12
- 0.4.0 — 2020-07-12
- 0.3.0 — 2020-06-27
- 0.2.5 — 2020-05-15
- 0.2.4 — 2020-05-15
- 0.2.3 — 2020-05-15
- 0.2.2 — 2020-05-05
- … 10 more at https://npm.io/package/virtualized-sc-table/versions

## README

# CS Table, virtualized Table

Supports large amounts of data, built using react hooks.

![image](https://d15k2d11r6t6rl.cloudfront.net/public/users/Integrators/30362ec0-6160-4873-be5a-3b39551a5a27/5539ea9f0cf2a3b799810f25/placeholder/demo.gif)

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

---
_Source: https://npm.io/package/virtualized-sc-table · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._