Setting Up Server-side Pagination

Provides a code example of how to configure server-side pagination in React TanStack Table, including fetching data for the current page, handling page changes, and displaying loading states.
import { useQuery } from 'react-query';
import React, { useState } from 'react';
import axios from 'axios';
Imports necessary libraries and hooks.
const fetchData = async (page, limit) => {
  const response = await axios.get(`http://localhost:3004/users?_page=${page}&_limit=${limit}`);
Defines an asynchronous function to fetch data from server with pagination.
const PaginatedTable = () => {
  const [page, setPage] = useState(1);
  const [limit, setLimit] = useState(10);
  const { data, isLoading, isError } = useQuery(['users', page, limit], () => fetchData(page, limit), { keepPreviousData: true });
Sets up a PaginatedTable component with state for page and limit. Uses useQuery to fetch data.
if (isLoading) return <div>Loading...</div>;
if (isError) return <div>Error occurred while fetching data</div>;
Handles loading and error states.
return (
            {/* Table headers and rows rendering */}
        <button onClick={() => setPage(old => Math.max(old - 1, 1))} disabled={page === 1}>Previous Page</button>
        <button onClick={() => setPage(old => old + 1)}>Next Page</button>
Renders table and pagination buttons with event handlers to change page state.
export default PaginatedTable;
Exports the PaginatedTable component.