Skip to content

haite/virtualized-table-for-antd

 
 

Repository files navigation

The virtualized table component for AntD4,fast and restorable.

npm dm license

NPM

  • 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 { useVT } 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

  • Editable Table

  • Drag soring

License

MIT

About

the virtualized table component for ant design

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 89.9%
  • JavaScript 9.5%
  • CSS 0.6%