Header cell with search param setter

[gonstoll]

Hello! I want to have a header cell with a dropdown component so that when you select either of the options under said dropdown, URL search params are updated. This is so that I can just filter data on the server based on this search params. I've searched quite a bit but didn't manage to find a solution sadly. Does anyone know of a proper way to achieve something like this?

Just for reference, this is my current column definition:

type User = {
  name: string
  status: 'active' | 'inactive'
}

const columns: Array<ColumnDef<User>> = [
  {accessorKey: 'name', header: 'Name'},
  {
    accessorKey: 'status',
    header: () => {
      return (
        <Select onValueChange={/* ??? ideally here update search params with remix.run useSearchParams or similar mechanism */}>
          <SelectTrigger>
            Status <ListFilter />
          </SelectTrigger>
          <SelectContent>
            <SelectLabel>Filter by</SelectLabel>
            <SelectItem value="active">Active</SelectItem>
            <SelectItem value="inactive">Inactive</SelectItem>
          </SelectContent>
        </Select>
      )
    },
  },
]

In this example, I'd like to get the status column to be a dropdown that updates URL search params with its values (active or inactive).

[gonstoll]

Well, apparently yesterday was a long day and I was drowning on a glass of water. It's as easy as encapsulating all the search params logic in a component and then just use that component in the header. Final result:

function Filters() {
  const [searchParams, setSearchParams] = useSearchParams()
  const status = searchParams.get('status')

  function handleFilter(status: 'active' | 'inactive') {
    setSearchParams(prev => {
      prev.set('status', status)
      return prev
    })
  }

  return (
    <DropdownMenu>
      <DropdownMenuTrigger>Status</DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuLabel>Filter by</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuCheckboxItem
          checked={status === 'active'}
          onCheckedChange={() => handleFilter('active')}
        >
          Active
        </DropdownMenuCheckboxItem>
        <DropdownMenuCheckboxItem
          checked={status === 'inactive'}
          onCheckedChange={() => handleFilter('inactive')}
        >
          Inactive
        </DropdownMenuCheckboxItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

type User = {
  name: string
  status: 'active' | 'inactive'
}

const columns: Array<ColumnDef<User>> = [
  {accessorKey: 'name', header: 'Name'},
  {accessorKey: 'status', header: () => <Filters />},
]