Component
DataTableSearch
A search field bound to a data table — across every searchable column, or one `column`.
import { DataTableSearch } from '@loidolt/theme-svelte';
Example
| Stock | Status | Layers | |
|---|---|---|---|
| Bracket 1 | Birch ply | Ready | 1 |
| Coaster 1 | Mount board | In review | 8 |
| Sign 1 | Cork | Ready | 4 |
| Enclosure 1 | Acrylic | Blocked | 11 |
| Panel 1 | Birch ply | Ready | 7 |
1–5 of 42
Notes
- Debounced by 200ms; raise
debouncefor a server search. The field re-syncs when the table is reset or cleared elsewhere.
Props
Generated from the component source, so it cannot drift from the implementation.
| Prop | Type | Default | Notes |
|---|---|---|---|
table required | DataTableState<T> | — | |
boxed | boolean | true | |
class | string | — | |
column | string | — | Filter one column instead of searching them all. |
debounce | number | 200 | Milliseconds to wait after the last keystroke — worth raising for a server search. |
label | string | 'Search' | Accessible name, when not wrapped in a Field. |
ref bindable | HTMLInputElement | null | null |
Plus the attributes of Omit<HTMLInputAttributes, 'value' | 'type'>, forwarded to the root element.