Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

antd-virtual-table

qguozhao13MIT0.7.2TypeScript support: included

实现antd-table的虚拟列表

antd-table, virtualList, scrolling, antd-table虚拟列表, antd-table无限滚动

readme

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