import React, { useMemo } from 'react'
import ReactDom from 'react-dom'

import { VList } from 'virtuallist-antd'
import { Table } from 'antd'

function Example(): JSX.Element {
	const dataSource = [...]
	const columns = [...]
	const rowkey = 'xxx'

	const vComponents = useMemo(() => {
		// 使用VList 即可有虚拟列表的效果
		return VList({
			height: 1000 // 此值和scrollY值相同. 必传. (required).  same value for scrolly
		})
	}, [])

	return (
		<Table
			dataSource={dataSource}
			columns={columns}
			rowKey={rowKey}
			scroll={{
				y: 1000 // 滚动的高度, 可以是受控属性。 (number | string) be controlled.
			}}
			components={vComponents}
		/>
	)
}

ReactDom.render(<Example />, dom)

	VList({
		height: number | string,  // (必填) 对应scrollY.
		onReachEnd: () => void, // ��(可选) 滚动条滚到底部触发api. (scrollbar to the end)
		onScroll: () => void, // (可选) 滚动时触发的api. (triggered by scrolling)
		vid: string, // (可选, 如果同一页面存在多个虚拟表格时必填.) 唯一标识. (unique vid, required when exist more vitual table on a page)
		resetTopWhenDataChange: boolean, // 默认为true. 是否数据变更后重置滚动条 (default true, Whether to reset scrollTop when data changes)
	})

	VList returns: {
		table: VTable,
		body: {
			wrapper: VWrapper,
			row: VRow,
			cell: VCell,
		}
	}

import { scrollTo } from 'virtuallist-antd'

// scrollTo
scrollTo({
    row: number, // 行数. (row number)
    y: number, // y偏移量. (offset Y)
    vid: string, // 对应VList的vid. (same as VList vid)
})