metropolitan-bronze

Library nuqs

Can the nuqs (https://nuqs.47ng.com/) library be used in the tanstack route? has anyone used it before? or is there another solution to make it easier to manage search params for universal use in a hook datatable tanstack table? the hook is like this but to be implemented in react vite and tanstack route is different to manage the search params https://github.com/sadmann7/shadcn-table/blob/main/src/hooks/use-data-table.ts

nuqs | Type-safe search params state management for React

Type-safe search params state management for React. Like useState, but stored in the URL query string.

GitHub

shadcn-table/src/hooks/use-data-table.ts at main · sadmann7/shadcn-...

Shadcn table with server-side sorting, filtering, and pagination. - sadmann7/shadcn-table

10 Replies

optimistic-gold•10mo ago

why would you want to use this? what doest it offer that router does not already have? a "nicer" API?

metropolitan-bronzeOP•10mo ago

there is actually no problem using the following custom code

import { cleanEmptyParams } from "@/utils/clean-empty-params"
import { useNavigate, useSearch } from "@tanstack/react-router"

type FilterValue = string | number | undefined | null
type Filters = Record<string, FilterValue>

export function useFilters() {
  const navigate = useNavigate()
  const filters = useSearch({
    strict: false,
  })

  const setFilters = async (partialFilters: Filters) => {
    return navigate({
      to: ".",
      search: (prev: Filters) => cleanEmptyParams(partialFilters, prev),
    })
  }

  const resetFilters = () => navigate({ search: true })

  return { filters, setFilters, resetFilters }
}

import { cleanEmptyParams } from "@/utils/clean-empty-params"
import { useNavigate, useSearch } from "@tanstack/react-router"

type FilterValue = string | number | undefined | null
type Filters = Record<string, FilterValue>

export function useFilters() {
  const navigate = useNavigate()
  const filters = useSearch({
    strict: false,
  })

  const setFilters = async (partialFilters: Filters) => {
    return navigate({
      to: ".",
      search: (prev: Filters) => cleanEmptyParams(partialFilters, prev),
    })
  }

  const resetFilters = () => navigate({ search: true })

  return { filters, setFilters, resetFilters }
}

optimistic-gold•10mo ago

we wanted to add a higher level API for search state, but did not get around to it

metropolitan-bronzeOP•10mo ago

but when the value is deleted sometimes it doesn't get deleted in the search params.

optimistic-gold•10mo ago

what do you mean it is not deleted?

metropolitan-bronzeOP•10mo ago

export function cleanEmptyParams<T extends Record<string, unknown>>(
  search: T,
  prev?: T
): Partial<T> {
  const newSearch: Partial<T> = { ...search }
  Object.keys(search).forEach((key) => {
    const value = newSearch[key]
    if (
      value === undefined ||
      value === "" ||
      value === null ||
      (typeof value === "number" && isNaN(value))
    ) {
      if (prev && key in prev) {
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        ;(newSearch as any)[key] = undefined
      } else {
        delete newSearch[key]
      }
    }
  })

  return newSearch
}

export function cleanEmptyParams<T extends Record<string, unknown>>(
  search: T,
  prev?: T
): Partial<T> {
  const newSearch: Partial<T> = { ...search }
  Object.keys(search).forEach((key) => {
    const value = newSearch[key]
    if (
      value === undefined ||
      value === "" ||
      value === null ||
      (typeof value === "number" && isNaN(value))
    ) {
      if (prev && key in prev) {
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        ;(newSearch as any)[key] = undefined
      } else {
        delete newSearch[key]
      }
    }
  })

  return newSearch
}

optimistic-gold•10mo ago

can you please provide a complete minimal example by forking one of the existing stackblitz examples?

metropolitan-bronzeOP•10mo ago

example like this when a user searches http://localhost:5173/?filters=[{"id": "title", "operator": "eq", "value": "test"}] well but if the user deletes the value ?this filter does not disappear, unless you click the reset button I'll make it later

raw-harlequin•9mo ago

hey @Nizar I'm actually in this use case I want to use this shadcn table, did you succed to adapt the use-data-table to tankstack router ?

optimistic-gold•2w ago

same here

Gaming

Programming

Library nuqs

Did you find this page helpful?