Implementing Pagination with Row Models

Show how to implement pagination in the TanStack Table using row models to manage displayed data across different pages.

import { useReactTable, getCoreRowModel } from '@tanstack/react-table';

First, import the necessary functions from '@tanstack/react-table'. This includes useReactTable for creating the table instance and getCoreRowModel for handling row data.

// Define table columns and data
const columns = [...];
const data = [...];

Define your table columns and the data you want to display in your table.

const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    // Define state for pagination
    state: { pageIndex: 0, pageSize: 10 }
});

Create the table instance using useReactTable. Configure it to use core row model management and initialize state for pagination with pageIndex (the current page number) and pageSize (number of rows per page).

// Access the current page rows
const currentPageData = table.getRowModel().rows;

Access the rows of the current page using getRowModel().rows. This data is automatically managed by TanStack Table based on the pagination state.

// Pagination Controls
function nextPage() {
    table.nextPage();
}

function previousPage() {
    table.previousPage();
}

Define functions for navigating to the next and previous pages using table.nextPage() and table.previousPage(). These functions will update the pageIndex in the table's state, which in turn will update the rows displayed.

// Render Pagination Controls
// <button onClick={previousPage} disabled={!table.getCanPreviousPage()}>Previous</button>
// <button onClick={nextPage} disabled={!table.getCanNextPage()}>Next</button>

Render pagination controls in your UI. Use getCanPreviousPage() and getCanNextPage() to enable or disable the previous and next buttons based on the availability of pages.