const tableRef = useRef(null);
const [pageSize, setPageSize] = useState(20)
const [pageNumber, setPageNumber] = useState(1)
const [tableData, setTableData] = useState([])
useEffect(() => {
setPageNumber(1);
setTableData([])
getList(1);
}, [searchValue])
const getList = (PageNumber: number) => {
getReportDetail({
pageNumber: PageNumber,
pageSize,
}).then((res: any) => {
if (res.status === 0) {
const { records } = res.data;
if (!Array.isArray(records)) {
return
}
let newData: any = records;
if (records.length > 0 && PageNumber !== 1) {
newData = tableData.concat(records)
}
setTableData(newData || [])
}
})
}
const handleScroll = () => {
if (!timer) {
timer = setTimeout(() => {
const tableItem = tableRef?.current?.querySelector('.ant-table-row');
const tableBody = tableRef?.current?.querySelector('.ant-table-body');
const renderDistance = tableBody?.scrollTop + tableBody?.clientHeight + tableItem?.clientHeight;
if (renderDistance >= tableBody?.scrollHeight) {
const newpageNumber = pageNumber + 1
setPageNumber(newpageNumber)
}
timer = null;
}, 1000)
}
};
<Table
key="id"
ref={tableRef}
columns={columns as any}
scroll={{ y: 605 }}
dataSource={tableData}
pagination={false}
/>