virtualizedtableforantd4

The virtualized table component for AntD4，fast and restorable.

• Install

  npm i --save virtualizedtableforantd4
  

• the opts of useVT(examples)

  export interface vt_opts<RecordType> {
      id?: number;
      /**
      * @default 5
      */
      overscanRowCount?: number;
      /**
      * this only needs the scroll.y
      */
      scroll: RcTableProps<RecordType>['scroll'];
      /**
      * wheel event(only works on native events).
      * 滚轮事件（只对原生事件有效）。
      */
      onScroll?: ({ left, top, isEnd, }: {
          top: number;
          left: number;
          isEnd: boolean;
      }) => void;
      initTop?: number;
      /**
      * @default false
      */
      debug?: boolean;
  }
  

• Quick start

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

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

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

  import React from 'react';
  import { Table } from 'antd';
  import { VTComponents } from 'virtualedtableforantd4';
  
  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*/}
  />
  

• Restoring last state

  • reload

• Editable Table

  • CustomRows Hooks
  • Editable Rows

• Drag soring

  • Drag soring

License

MIT