The virtualized table component for Ant Design，fast and restorable.

• Install

1npm i --save virtualizedtableforantd

• All interfaces(hooks added in v0.7.x)

  1
  2// the param of the func VTComponents.
  3interface vt_opts extends Object {
  4    readonly id: number;
  5    /**
  6     * @default 5
  7    */
  8    overscanRowCount?: number;
  9    /**
  10     * wheel event(only works on native events).
  11     * 滚轮事件（只对原生事件有效）。
  12     */
  13    onScroll?: ({ left, top, isEnd, }: {
  14        top: number;
  15        left: number;
  16        isEnd: boolean;
  17    }) => void;
  18    /**
  19     * @default false
  20    */
  21    destroy?: boolean;
  22    /**
  23     * @default false
  24    */
  25    debug?: boolean;
  26}
  27
  28/* all APIs */
  29export declare function VTComponents(vt_opts: vt_opts): TableComponents;
  30export declare function setComponents(id: number, components: TableComponents): void;
  31export declare function VTScroll(id: number, param?: {
  32    top: number;
  33    left: number;
  34}): {
  35    top: number;
  36    left: number;
  37};

• Quick start

  You need to change your style like following if your Table.size is not default.

  如果你的Table.size不是默认的话，你需要修改像下面一样的style。

  1// size={'small'}
  2ant-table [vt] > table > .ant-table-tbody > tr > td {
  3    padding: 8px;
  4}

  1import React from 'react';
  2import { Table } from 'antd';
  3import { VTComponents } from 'virtualedtableforantd';
  4
  5// using in the antd table
  6<Table
  7  scroll={{ y: 500 }} // it's important for using VTComponents!!!
  8  components={
  9    VTComponents({
  10      id: 1000,    /*the id is immutable*/
  11    })
  12  }
  13  columns={/*your columns*/}
  14  dataSource={/*your data*/}
  15/>

• Restoring last state (including hooks version)

  1import React, { PureComponent, useEffect } from 'react';
  2import { Table } from 'antd';
  3
  4const ctx = { top: 0 };
  5
  6/* Class version. */
  7class Users extends PureComponent {
  8  constructor(...args) {
  9    super(...args);
  10  }
  11
  12  render() {
  13    return (
  14      <Table
  15        scroll={{ y: 500 }}
  16        components={VTComponents({
  17          id: 1000,
  18          onScoll: ({ left, top }) => ctx.top = top
  19          })
  20        }
  21      />
  22    );
  23  }
  24
  25  componentDidMount() {
  26    VTScroll(1000, { top: ctx.top });
  27  }
  28
  29  componentWillUnmount() {
  30    ctx.top = VTScroll(1000).top;
  31  }
  32}

1/* Hooks version. */
2import React, { useEffect } from 'react';
3import { Table } from 'antd';
4import { useVT } from 'virtualedtableforantd';
5
6const ctx = { top: 0 };
7function Users() {
8
9  const [
10    VT,
11    setComponents, // no longer needs the param id.
12    VTScroll,      // no longer needs the param id.
13    ] = useVT({ onScoll: ({ left, top }) => ctx.top = top });
14
15  useEffect(() => {
16    VTScroll({ top: ctx.top });
17
18    return () => ctx.top = VTScroll().top;
19  }, []);
20
21  return (
22    <Table
23      scroll={{ y: 500 }}
24      components={VT}
25      columns={/*your columns*/}
26      dataSource={/*your dataSource*/}
27    />
28  );
29}
30
31//--------- About
32function About() {
33  return "About...";
34}
35
36function App() {
37  return (
38    <>
39      <NavLink to={'/users'}>Users</NavLink>
40      <NavLink to={'/about'}>About</NavLink>
41      <Switch>
42        <Route component={Users} path="/users" />
43        <Route component={About} path="/about" />
44      </Switch>
45    </>
46  );
47}

• Editable Table

  there are 3 examples following:

  • CustomRows
  • CustomRows Hooks
  • Editable Rows

• support column.fixed

  1
  2const columns = [
  3  {
  4    title: 'Full Name',
  5    width: 100,
  6    dataIndex: 'name',
  7    key: 'name',
  8    fixed: 'left',
  9  },
  10  {
  11    title: 'Age',
  12    width: 100,
  13    dataIndex: 'age',
  14    key: 'age',
  15    fixed: 'left',
  16  },
  17  {
  18    title: 'Column 1',
  19    dataIndex: 'address',
  20    key: '1',
  21    width: 150,
  22  },
  23  {
  24    title: 'Column 2',
  25    dataIndex: 'address',
  26    key: '2',
  27    width: 150,
  28  },
  29  {
  30    title: 'Column 3',
  31    dataIndex: 'address',
  32    key: '3',
  33    width: 150,
  34  },
  35  {
  36    title: 'Column 4',
  37    dataIndex: 'address',
  38    key: '4',
  39    width: 150,
  40  },
  41  {
  42    title: 'Column 5',
  43    dataIndex: 'address',
  44    key: '5',
  45    width: 150,
  46  },
  47  {
  48    title: 'Column 6',
  49    dataIndex: 'address',
  50    key: '6',
  51    width: 150,
  52  },
  53  {
  54    title: 'Column 7',
  55    dataIndex: 'address',
  56    key: '7',
  57    width: 150,
  58  },
  59  { title: 'Column 8', dataIndex: 'address', key: '8' },
  60  {
  61    title: 'Action',
  62    key: 'operation',
  63    fixed: 'right',
  64    width: 100,
  65    render: => 'Action',
  66  },
  67];
  68
  69const data = [];
  70for (let i = 0; i < 100; i++) {
  71  data.push({
  72    key: i,
  73    name: `Edrward ${i}`,
  74    age: 32,
  75    address: `London Park no. ${i}`,
  76  });
  77}
  78
  79
  80function renderTable() {
  81  return (
  82    <Table
  83      columns={columns}
  84      dataSource={data}
  85      scroll={{ x: 1500, y: 300 }}
  86      components={VTComponents({ id: 1000 })}
  87    />
  88  );
  89}
  90

• Hooks APIs(new)

  1
  2function MyTable() {
  3  const [
  4    VT,
  5    setComponents, // no longer needs the param id.
  6    VTScroll,      // no longer needs the param id.
  7    ] = useVT(/*the same as `vt_opts`, but no longer needs the param id. */);
  8
  9  return (
  10    <Table
  11      scroll={{ y: 500 }}
  12      components={VT}
  13      columns={/*your columns*/}
  14      dataSource={/*your data*/}
  15    />
  16  );
  17}
  18

License

MIT