antd-virtual-table
TypeScript icon, indicating that this package has built-in type declarations

0.7.2 • Public • Published

antd-virtual-table

NPM

实现 antd-table 的虚拟列表,支持非固定行高、动态改变行高 (antd-table 所有属性均正常可用,如筛选、排序等)

Install

npm install --save antd-virtual-table

Usage

import * as React from "react";
import ReactDom from "react-dom";

import { VList } from "antd-virtual-table";
import { Table } from "antd";

function Example(): JSX.Element {
  const dataSource = [];
  const columns = [];
  const rowKeyList = useMemo(() => dataSource?.map((cv) => cv?.[rest.rowKey]), [
    dataSource,
    rest.rowKey,
  ]);
  const components = useMemo(() => {
    if (virtualTable) {
      return {
        ..._components,
        ...VList({ rowKeyList }),
      };
    }
    return _components;
  }, [_components, virtualTable]);

  return (
    <Table
      dataSource={dataSource}
      columns={columns}
      components={components}
      rowKey={"uuid"}
    />
  );
}

ReactDom.render(<Example />, dom);

Package Sidebar

Install

npm i antd-virtual-table

Weekly Downloads

3

Version

0.7.2

License

MIT

Unpacked Size

54.8 kB

Total Files

6

Last publish

Collaborators

  • guozhao.qi