How to set default page size?

[BarishSarac]

Hi,

How can I initially set default page size to be 15?

[fnn]

Set the “pageSize” of the initial state.

https://github.com/tannerlinsley/react-table/blob/master/docs/api/usePagination.md#table-options

[BarishSarac]

can you give me an example code for it?

[papidracul]

this is the example they give on https://tanstack.com/table/v8/docs/guide/pagination :

import { useReactTable, getCoreRowModel, getPaginationRowModel } from '@tanstack/react-table';
//...
const [pagination, setPagination] = useState({
pageIndex: 0, //initial page index
pageSize: 10, //default page size
});

const table = useReactTable({
columns,
data,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
onPaginationChange: setPagination, //update the pagination state when internal APIs mutate the pagination state
state: {
//...
pagination,
},
});

[fnn]

useTable( { columns, data, initialState: { pageSize: 15 } }, usePagination )

Here the edited pagination example with page size of 15:
https://codesandbox.io/s/condescending-proskuriakova-hcwyo

[hasenov]

2023 solution:

import { createColumnHelper, flexRender, getCoreRowModel, getPaginationRowModel, useReactTable } from "@tanstack/react-table";

const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    initialState: {
        pagination: {
            pageSize: 3,
        },
    },
});

[ryanbakker]

Good example 🙌🏻

[gonsura]

thnks

[dankwx]

thank you.

[travistylervii]

Wow, been searching for this for hours. Thank you!

[KevinVandy]

@travistylervii This was recently added to the offical pagination guide too

[amddevmh]

for v8
const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel(), state: { pagination: { pageSize: 3, pageIndex: 0, }, }, getPaginationRowModel: getPaginationRowModel(), })

[sp88011]

This hardcodes the state. OP wants to change the initial state only, which, per @hasenov 's answer, initalState does.

[hello-isa]

Thanks for the code, it worked. But with this, the pagination buttons do not work.

onClick={() => table.setPageIndex(0)}  // First Page
onClick={() => table.previousPage()}    // Previous Page
onClick={() => table.nextPage()}        // Next Page
onClick={() => table.setPageIndex(table.getPageCount() - 1)}  // Last Page

[FMcreativo]

I had the same problem, but importing and using PaginationState did it. Using v8.

import { ColumnDef, ColumnFiltersState, SortingState, VisibilityState, flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, PaginationState, } from "@tanstack/react-table"

declare columns etc...

const [{ pageIndex, pageSize }, setPagination] = React.useState<PaginationState>({ pageIndex: 0, pageSize: 30, })

const pagination = React.useMemo( () => ({ pageIndex, pageSize, }), [pageIndex, pageSize] )

then use it within your table...

const table = useReactTable({ data, columns: customColumns, getCoreRowModel: getCoreRowModel(), getPaginationRowModel: getPaginationRowModel(), onSortingChange: setSorting, getSortedRowModel: getSortedRowModel(), onColumnFiltersChange: setColumnFilters, getFilteredRowModel: getFilteredRowModel(), onColumnVisibilityChange: setColumnVisibility, state: { sorting, columnFilters, columnVisibility, globalFilter: customFilter, pagination, }, onPaginationChange: setPagination, onGlobalFilterChange: setCustomFilter, })

That will make your buttons keep working, hope it helps.

[FMcreativo]

@hello-isa

[hello-isa]

Thank you!

[KevinVandy]

From the official pagination guide:

Pagination State
Whether or not you are using client-side or manual server-side pagination, you can use the built-in pagination state state and APIs.

The pagination state is an object that contains the following properties:

pageIndex: The current page index (zero-based).
pageSize: The current page size.
You can manage the pagination state just like any other state in the table instance.

import { useReactTable, getCoreRowModel, getPaginationRowModel } from '@tanstack/react-table';
//...
const [pagination, setPagination] = useState({
  pageIndex: 0, //initial page index
  pageSize: 10, //default page size
});

const table = useReactTable({
  columns,
  data,
  getCoreRowModel: getCoreRowModel(),
  getPaginationRowModel: getPaginationRowModel(),
  onPaginationChange: setPagination, //update the pagination state when internal APIs mutate the pagination state
  state: {
    //...
    pagination,
  },
});

Alternatively, if you have no need for managing the pagination state in your own scope, but you need to set different initial values for the pageIndex and pageSize, you can use the initialState option.

const table = useReactTable({
  columns,
  data,
  getCoreRowModel: getCoreRowModel(),
  getPaginationRowModel: getPaginationRowModel(),
  initialState: {
    pagination: {
      pageIndex: 2, //custom initial page index
      pageSize: 25, //custom default page size
    },
  },
});

Note: Do NOT pass the pagination state to both the state and initialState options. state will overwrite initialState. Only use one or the other.

[MaxsaDev]

@KevinVandy Thanks