/virtualized-table-for-antd

the virtualized table component for ant design

Primary LanguageTypeScriptMIT LicenseMIT

The virtualized table component for AntD4,fast, restorable and smallest size for gzip!

npm dm license

NPM

  • 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

  • Restoring last state

  • Editable Table

  • Drag soring

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

License

MIT