• Install

  npm i --save virtualizedtableforantd4

• the opts of useVT(examples)

  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.

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

  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

• Restoring last state

  • reload

• Editable Table

  • CustomRows Hooks
  • Editable Rows

• Drag soring

  • Drag soring

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

MIT