Announcing nuqs version 2
nuqs
ParsersCommunity

TanStack Table Parsers

Store your table state in the URL, with style.

TanStack Table is a popular library for managing tabular content in React (and other frameworks).

By default, it will store its state in memory, losing all filters, sorts and pagination when the page is refreshed. This is a prime example where URL state shines.

Pagination

TanStack Table stores pagination under two pieces of state:

  • pageIndex: a zero-based integer representing the current page
  • pageSize: an integer representing the number of items per page

You will likely want the URL to follow your UI and be one-based for the page index:

Configure and copy-paste this parser into your application:

search-params.pagination.ts
import {
  createParser,
  parseAsInteger,
  parseAsString,
  useQueryStates
} from 'nuqs'

// The page index parser is zero-indexed internally,
// but one-indexed when rendered in the URL,
// to align with your UI and what users might expect.
const pageIndexParser = createParser({
  parse: query => {
    const page = parseAsInteger.parse(query)
    return page === null ? null : page - 1
  },
  serialize: value => {
    return parseAsInteger.serialize(value + 1)
  }
})

const paginationParsers = {
  pageIndex: pageIndexParser.withDefault(0),
  pageSize: parseAsInteger.withDefault(10)
}
const paginationUrlKeys = {
  pageIndex: 'page',
  pageSize: 'perPage'
}

export function usePaginationSearchParams() {
  return useQueryStates(paginationParsers, {
    urlKeys: paginationUrlKeys
  })
}

Filtering

This section is empty for now, contributions are welcome!

Sorting

This section is empty for now, contributions are welcome!

On this page