Я использую версию реагирующей таблицы 6.9.2 для подключения к API и отображения данных.Я следую основам этого примера:
https://github.com/tannerlinsley/react-table/tree/v6#server-side-data
Проблема, с которой я сталкиваюсь в настоящее время, заключается в том, что API загружает все данные при загрузке приложения, что не является идеальным.Я пытаюсь включить разбиение на страницы на стороне сервера, чтобы он загружал 10 строк на страницу, но, похоже, он не работает, поскольку все 100 строк загружаются при запуске приложения.
Текущий код:
<ReactTable
onFetchData={(state, instance) => {
// show the loading overlay
this.setState({ loading: true });
// fetch your data
axios
.get("https://jsonplaceholder.typicode.com/posts", {
page: state.page,
pageSize: state.pageSize,
sorted: state.sorted,
filtered: state.filterd
})
.then(res => {
// Update react-table
this.setState({
posts: res.data,
data: res.data,
page: state.page,
pages: res.data.pages,
loading: false
});
});
}}
columns={columns}
data={this.state.data}
pages={this.state.pages}
loading={this.state.loading}
filterable
defaultPageSize={10}
noDataText={"Loading..."}
manual // informs React Table that you'll be handling sorting and pagination server-side
/>
Опция defaultPageSize={10}
не применяется.Когда я удаляю свойство manual, оно работает, но при переходе по каждой странице каждый раз запрашивает все 100 строк.Пример, который отображает функциональность, которую я ищу, находится в этой песочнице: https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/archives/v6-examples/react-table-server-side-data
Моя текущая песочница здесь: https://codesandbox.io/s/v0vr0jqmwy
Я застрял на этом целую вечность, и этосводит меня с ума!