Library nuqs

[pulsar wagon]

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

[queen oak]

why would you want to use this?

what doest it offer that router does not already have?

a "nicer" API?

[pulsar wagon]

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 }
}

[queen oak]

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

[pulsar wagon]

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

[queen oak]

what do you mean it is not deleted?

[pulsar wagon]

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
}

[queen oak]

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

[pulsar wagon]

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

[pulsar wagon]

I'll make it later

[naive phoenix]

hey @pulsar wagon
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 ?