DataTableFilters

Component

Preview

Preview react

Usage

import { DataTableFilters } from "@/components/ui/data-table-filters"

export function DataTableFiltersDemo() {
return (
  <DataTableFilters
    filters={[
      { id: "name", type: "text", label: "Name", placeholder: "Search by name..." },
      { id: "status", type: "select", label: "Status", placeholder: "Select status", options: [
        { label: "Active", value: "active" },
        { label: "Inactive", value: "inactive" },
      ]},
    ]}
    onFilterChange={(values) => console.log("Filter values:", values)}
  />
)
}

Installation

CLI

npm

npx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/r/data-table-filters.json

pnpm

pnpm dlx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/r/data-table-filters.json

bun

bunx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/r/data-table-filters.json

Manual

components/ui/data-table-filters.tsx

import { forwardRef, type HTMLAttributes } from "react"
import { cn } from "@/lib/utils"
import { Input } from "@/components/ui/input"

type FilterConfig = {
  id: string
  type: "text" | "select" | "date"
  label: string
  placeholder?: string
  options?: { label: string; value: string }[]
}

export interface DataTableFiltersProps extends HTMLAttributes<HTMLDivElement> {
  filters?: FilterConfig[]
  values?: Record<string, any>
  onFilterChange?: (values: Record<string, any>) => void
}

const DataTableFilters = forwardRef<HTMLDivElement, DataTableFiltersProps>(
  ({ className, filters = [], values = {}, onFilterChange, ...props }, ref) => {
    const handleValueChange = (filterId: string, value: string) => {
      const newValues = { ...values, [filterId]: value }
      onFilterChange?.(newValues)
    }

    return (
      <div ref={ref} className={cn("flex flex-wrap items-center gap-4", className)} {...props}>
        {filters.map((filter) => (
          <div key={filter.id} className="flex flex-col gap-1">
            <label className="text-sm font-medium text-muted-foreground">{filter.label}</label>
            {filter.type === "text" && (
              <Input
                placeholder={filter.placeholder}
                value={(values as Record<string, string>)[filter.id] || ""}
                onChange={(e) => handleValueChange(filter.id, e.target.value)}
                className="w-[200px]"
              />
            )}
            {filter.type === "select" && (
              <select
                value={(values as Record<string, string>)[filter.id] || ""}
                onChange={(e) => handleValueChange(filter.id, e.target.value)}
                className="h-10 w-[200px] rounded-md border border-input bg-background px-3 py-2 text-sm"
              >
                <option value="">{filter.placeholder || "Select..."}</option>
                {filter.options?.map((option) => (
                  <option key={option.value} value={option.value}>
                    {option.label}
                  </option>
                ))}
              </select>
            )}
          </div>
        ))}
        {filters.length > 0 && Object.keys(values).length > 0 && (
          <button
            type="button"
            onClick={() => onFilterChange?.({})}
            className="mt-auto text-sm text-muted-foreground hover:text-foreground"
          >
            Clear filters
          </button>
        )}
      </div>
    )
  },
)
DataTableFilters.displayName = "DataTableFilters"

export { DataTableFilters }
export type { FilterConfig as FilterConfigType }

API Reference

FilterConfigType

type FilterConfig = {
  id: string
  type: "text" | "select" | "date"
  label: string
  placeholder?: string
  options?: { label: string; value: string }[]
}

Props

Prop	Type	Default	Description
filters	FilterConfig[]	[]	Array of filter configurations
values	Record<string, any>	{}	Current filter values
onFilterChange	(values: Record<string, any>) => void	-	Callback when filter values change