У меня есть таблица из ANTD и в ней много страниц, так как я определил для нее нумерацию страниц, Я хочу, чтобы можно было также прокручивать таблицу и переходить на следующую страницу, когда пользователь прокручивает таблицу до конца.
это мой компонент:
<Table columns = {columns} dataSource = {filteredData}
title = {() => <> <h3>title</h3>}
rowClassName = "rowClassName"
pagination = {{
onChange: cancel,
}}
/>
Как мне это сделать?
🤔 А знаете ли вы, что...
React позволяет создавать пользовательские интерфейсы для веб-приложений.
Проверьте, достигает ли прокручиваемый контейнер .ant-table-body дна; если полоса прокрутки достигает дна, перейдите на следующую страницу. После изменения нумерации страниц прокрутите прокручиваемый контейнер вверх.
import React, { useEffect, useLayoutEffect, useState } from 'react';
import './index.css';
import { Table } from 'antd';
import type { TableColumnsType } from 'antd';
interface DataType {
key: React.Key;
name: string;
age: number;
address: string;
}
const columns: TableColumnsType<DataType> = [
{
title: 'Name',
dataIndex: 'name',
width: 150,
},
{
title: 'Age',
dataIndex: 'age',
width: 150,
},
{
title: 'Address',
dataIndex: 'address',
},
];
const data: DataType[] = [];
for (let i = 0; i < 100; i++) {
data.push({
key: i,
name: `Edward King ${i}`,
age: 32,
address: `London, Park Lane no. ${i}`,
});
}
function calculatePage(pageSize: number, total: number) {
return Math.floor((total - 1) / pageSize) + 1;
}
const allPage = calculatePage(10, data.length);
const App: React.FC = () => {
const [pagination, setPagination] = useState({ current: 1, pageSize: 10 });
useEffect(() => {
const $tableBody = document.querySelector('.ant-table-body');
const onScroll = () => {
if (
Math.abs(
$tableBody.scrollHeight -
$tableBody.scrollTop -
$tableBody.clientHeight
) < 1
) {
console.info('reach bottom');
if (pagination.current < allPage) {
setPagination((pre) => ({ ...pre, current: pre.current + 1 }));
}
}
};
if ($tableBody) {
$tableBody.addEventListener('scroll', onScroll);
}
return () => {
if ($tableBody) {
$tableBody.removeEventListener('scroll', onScroll);
}
};
}, [pagination]);
// scroll to top when pagination changes
useLayoutEffect(() => {
const $tableBody = document.querySelector('.ant-table-body');
if ($tableBody) {
$tableBody.scrollTop = 0;
}
}, [pagination]);
return (
<Table
columns = {columns}
dataSource = {data}
total = {data.length}
pagination = {pagination}
onChange = {(pagination) => {
setPagination(pagination);
}}
scroll = {{ y: 240 }}
/>
);
};
export default App;