# virtualizedtableforantd4

> The virtualized table component for ant design4/5, using typescript.

Latest version **1.3.2** (published 2025-11-30) · MIT license · 0 weekly downloads

## Install

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

## Health

**Score 55/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.3.2 |
| Published | 2025-11-30 |
| First published | 2020-06-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 62.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 232 |
| Author | wubooo |
| Maintainers | wubooo |
| Keywords | antd, virtualized table, react, react virtualized, antd virtualized table, infinity, scroll, virtual, 无限滚动表格, 虚拟表格, 无限滚动, table |

## Links

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

## 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.3.2 (latest) — 2025-11-30
- 1.3.1 — 2023-04-03
- 1.3.0 — 2023-02-20
- 1.2.2 — 2022-12-08
- 1.2.1 — 2022-10-12
- 1.2.0 — 2022-09-12
- 1.1.6 — 2022-04-08
- 1.1.5 — 2022-03-31
- 1.1.4 — 2021-10-09
- 1.1.3 — 2021-10-09
- 1.1.2 — 2020-11-19
- 1.1.1 — 2020-11-14
- 1.1.0 — 2020-11-09
- 1.0.0 — 2020-06-20

## 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 VtOpts {
      id?: number | string;
      /**
       * @default 5
       */
      overscanRowCount?: number;

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

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

      initTop?: number;
  
      /**
       * Offset of the table when isEnd becomes true.
       * @default 0
       */
      offset?: number;

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


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


+ Quick start
  > You need to change your style like following if your Table.size is not default.
  
  ```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)

+ expanded rows & tree-structure
  has been well supported!

## License

[MIT](LICENSE)

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