Deployments

1.Every filter is a TanStack column filter

Environment, status, branch, and date each set a filter value on their own column, with a filterFn that knows its shape: a list of allowed values, or a number of days back. Clearing everything is one setColumnFilters([]) call, and the table never keeps a second copy of the filter state.

const inList: FilterFn<Deployment> = (row, id, value: string[] | undefined) =>
  !value?.length || value.includes(row.getValue<string>(id))

const withinDays: FilterFn<Deployment> = (row, id, days: number | undefined) =>
  days === undefined || row.getValue<number>(id) >= NOW - days * 86_400_000

2.Option counts come from faceting, so they never lie

getFacetedUniqueValues() counts each status or branch after applying every other active filter, but not the column's own. With Production selected, the Status menu shows how many production deploys are Ready or Error, which is exactly what ticking that option would give you.

const counts = column?.getFacetedUniqueValues()

<span className="ml-auto font-mono text-xs text-muted-foreground">
  {counts?.get(option) ?? 0}
</span>

3.Search covers fields that are not visible columns

The commit SHA, message, and author are real columns hidden with columnVisibility, so the search box can match them without cluttering the table. A custom globalFilterFn decides exactly which fields are searched, instead of TanStack guessing from value types.

const searchDeployments: FilterFn<Deployment> = (row, _id, query: string) => {
  const q = query.trim().toLowerCase()
  if (!q) return true
  const d = row.original
  return [d.id, d.branch, d.sha, d.message, d.author].some((field) =>
    field.toLowerCase().includes(q),
  )
}

4.Filtering always starts from page 1

With autoResetPageIndex, any filter change sends the table back to the first page, so narrowing 42 deployments down to 3 never leaves you staring at an empty page 4. The footer and the count next to the filters both read from the filtered row model.

useReactTable({
  // ...
  autoResetPageIndex: true,
  getFilteredRowModel: getFilteredRowModel(),
  getFacetedRowModel: getFacetedRowModel(),
  getFacetedUniqueValues: getFacetedUniqueValues(),
})