The virtualized table component for ant design4/5, using typescript.
npm install virtualizedtableforantd4shell
npm i --save virtualizedtableforantd4
`
+ the opts of useVT(examples)
`typescript
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.
`less
// size={'small'}
ant-table [vt] > table > .ant-table-tbody > tr > td {
padding: 8px;
}
`
`typescript
import React from 'react';
import { Table } from 'antd';
import { useVT } from 'virtualizedtableforantd4';
const [ vt, set_components ] = useVT(() => ({ scroll: { y: 600 } }), []);
scroll={{ y: 600 }} // It's important for using VT!!! DO NOT FORGET!!!
components={vt}
columns={/your columns/}
dataSource={/your data/}
/>
``