# virtualizedtableforantdnested

> The virtualized table component for ant design4, using typescript. Supports nested table rows.

Latest version **1.1.4** (published 2022-01-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install virtualizedtableforantdnested
pnpm add virtualizedtableforantdnested
yarn add virtualizedtableforantdnested
bun add virtualizedtableforantdnested
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.4 |
| Published | 2022-01-27 |
| First published | 2022-01-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 60.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | wubooo |
| Maintainers | wain-pc |
| Keywords | antd, virtualized table, react, react virtualized, antd virtualized table, infinity, scroll, virtual, 无限滚动表格, 虚拟表格, 无限滚动, table |

## Links

- npm: https://www.npmjs.com/package/virtualizedtableforantdnested
- Repository: https://github.com/Wain-PC/virtualized-table-for-antd
- Issues: https://github.com/Wain-PC/virtualized-table-for-antd/issues
- npm.io page: https://npm.io/package/virtualizedtableforantdnested

## 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

- 1.1.4 (latest) — 2022-01-27

## README

# The virtualized table component for AntD4，fast, restorable and smallest size for gzip!


![npm](https://img.shields.io/npm/v/virtualizedtableforantd4)
![dm](https://img.shields.io/npm/dm/virtualizedtableforantd4)
![license](https://img.shields.io/npm/l/virtualizedtableforantd4)


[![NPM](https://nodei.co/npm/virtualizedtableforantd4.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/virtualizedtableforantd4/)

+ Install

  ```shell
  npm i --save virtualizedtableforantd4
  ```

+ the opts of `useVT`([examples](https://github.com/wubostc/virtualized-table-for-antd/blob/master/test))
  ```typescript
  interface vt_opts {
    id?: number;
    /**
     * @default 5
     */
    overscanRowCount?: number;

    /**
     * this only needs the scroll.y
     */
    scroll?: {
      y: number;
    };

    /**
     * wheel event(only works on native events).
     */
    onScroll?: ({ left, top, isEnd, }:
      { top: number; left: number; isEnd: boolean }) => void;

    initTop?: number;

    /**
     * @default false
     */
    debug?: boolean;


    // pass -1 means scroll to the bottom of the table
    ref?: React.MutableRefObject<{
      scrollTo: (y: number) => void;
    }>
  }
  ```


+ Quick start
  > You need to change your style like following if your Table.size is not default.
  
  > 如果你的Table.size不是默认的话，你需要修改像下面一样的style。

  ```less
  // size={'small'}
  ant-table [vt] > table > .ant-table-tbody > tr > td {
      padding: 8px;
  }
  ```
  ```typescript
  import React from 'react';
  import { Table } from 'antd';
  import { useVT } from 'virtualizedtableforantd4';

  const [ vt, set_components ] = useVT(() => ({ scroll: { y: 600 } }), []);

  <Table
    scroll={{ y: 600 }} // It's important for using VT!!! DO NOT FORGET!!!
    components={vt}
    columns={/*your columns*/}
    dataSource={/*your data*/}
  />
  ```

+ Scroll to
  - [scroll-to](https://github.com/wubostc/virtualized-table-for-antd/blob/master/test/scroll-to.tsx)


+ Restoring last state

  - [reload](https://github.com/wubostc/virtualized-table-for-antd/blob/master/test/reload.tsx)


+ Editable Table

  - [CustomRows Hooks](https://github.com/wubostc/virtualized-table-for-antd/blob/master/test/CustomRows%20Hooks.jsx)
  - [Editable Rows](https://github.com/wubostc/virtualized-table-for-antd/blob/master/test/Editable%20Rows.jsx)

+ Drag soring

  - [Drag soring](https://github.com/wubostc/virtualized-table-for-antd/blob/master/test/Drag%20soring.jsx)

## License

[MIT](LICENSE)

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