DataTable Search Filter

from @niko-table

Global search input with debouncing for filtering table data.

Install

New to shadcn? Set up your project

If your project already has a shadcn components.json, skip initialization. Otherwise, run this once from your project root.

$pnpm dlx shadcn@latest init

Setup by framework · Configure a registry namespace

$pnpm dlx shadcn@latest add @niko-table/data-table-search-filter

Live preview

No live preview has been built for this component yet.

Registry dependencies2

data-table-core
input

Packages1

lucide-react

More from @niko-table, 29 components

All @niko-table

DataTable Aside component
@niko-table
Sidebar panel component for displaying row details or additional content alongside the table.
Data display1 registry dep · 1 package
DataTable Clear Filter component
@niko-table
Button to clear all active table filters at once.
Forms2 registry deps · 1 package
DataTable Column Auto-fit component
@niko-table
Opt-in even-split fill for resizable columns. Drop <DataTableColumnAutoFit/> next to <DataTableColumnResize/> and the resizable columns grow by an equal share of the leftover space on load (the alternative to the default single-flex-column fill). Self-contained — the body ships no auto-fit code unless you install this.
Data display2 registry deps
DataTable Column Date Filter component
@niko-table
Column header date filter with calendar picker in a dropdown.
Forms6 registry deps · 2 packages
DataTable Column DnD component
@niko-table
Drag-and-drop column reordering with composable primitives. Includes DnD provider, draggable header, drag-along cell, and column DnD header/body. Does not ship row DnD.
Data display1 registry dep · 4 packages
DataTable Column Faceted Filter component
@niko-table
Column header faceted filter with multi-select options in a dropdown.
Forms7 registry deps · 1 package
DataTable Column Group component
@niko-table
Column header option to group rows by column values with TanStack aggregation support.
Data display4 registry deps · 1 package
DataTable Column Hide component
@niko-table
Column header option to hide/show individual columns.
Data display4 registry deps · 1 package
DataTable Column Pin component
@niko-table
Column header option to pin columns to left or right.
Data display4 registry deps · 1 package
DataTable Column Resize component
@niko-table
Opt-in column resizing with drag handles and double-click autosize (measures natural text width). Keyboard-operable handle. Drop <DataTableColumnResize/> into the table to enable — works with DataTableHeader/Body and the virtualized variants.
Data display1 registry dep
DataTable Column Slider Filter component
@niko-table
Column header slider filter for numeric range filtering in a dropdown.
Forms7 registry deps · 1 package
DataTable Column Sort component
@niko-table
Column header sort options with ascending/descending/clear controls.
Data display4 registry deps · 1 package

The Signal

Install

Live preview

Registry dependencies2

Packages1

Install

Live preview

Registry dependencies2

Packages1

Source

More from @niko-table29, 29 components

More from @niko-table, 29 components