The virtualized table component for Ant Design

• 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     * @deprecated
  11    */
  12    reflection?: string[] | string;
  13    /**
  14     * wheel event(only works on native events).
  15    */
  16    onScroll?: ({ left, top, isEnd, }: {
  17        top: number;
  18        left: number;
  19        isEnd: boolean;
  20    }) => void;
  21    /**
  22     * @default false
  23    */
  24    destroy?: boolean;
  25    /**
  26     * @default false
  27    */
  28    debug?: boolean;
  29}
  30
  31/* all APIs */
  32export declare function VTComponents(vt_opts: vt_opts): TableComponents;
  33export declare function getVTContext(id: number): React.Context<vt_ctx>; /** @deprecated */
  34export declare function setComponents(id: number, components: TableComponents): void;
  35export declare function getVTComponents(id: number): TableComponents; /** @deprecated */
  36export declare function VTScroll(id: number, param?: {
  37    top: number;
  38    left: number;
  39}): {
  40    top: number;
  41    left: number;
  42};

• Quick start

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

  Maybe you need to fix your style.

  1ant-table [vt] > table > .ant-table-tbody > tr > td {
  2    padding: 8px;
  3}

• Restoring last state

  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}
  33
  34// Hooks version.
  35function Users() {
  36
  37  useEffect(() => {
  38    VTScroll(1000, { top: ctx.top });
  39
  40    return () => ctx.top = VTScroll(1000).top;
  41  }, []);
  42
  43  return (
  44    <Table
  45      scroll={{ y: 500 }}
  46      components={VTComponents({
  47        id: 1000,
  48        onScoll: ({ left, top }) => ctx.top = top
  49        })
  50      }
  51      columns={/*your columns*/}
  52      dataSource={/*your dataSource*/}
  53    />
  54  );
  55}
  56
  57//--------- About
  58function About() {
  59  return "About...";
  60}
  61
  62function App() {
  63  return (
  64    <>
  65      <NavLink to={'/users'}>Users</NavLink>
  66      <NavLink to={'/about'}>About</NavLink>
  67      <Switch>
  68        <Route component={Users} path="/users" />
  69        <Route component={About} path="/about" />
  70      </Switch>
  71    </>
  72  );
  73}

• Editable Table

  there are two examples here ./test/CustomRows.jsx,./test/Editable Rows.jsx

• 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

enjoy!