Filtering is the bread-and-butter feature users hit before sorting or even rendering all rows. Get the typing wrong (string vs number vs date) and your filter UX feels broken.
This tutorial walks through column filters, a global quick filter, and custom predicates for the SolidJS data grid landscape and shows the Simple Table for Solid setup with signals.
If you also need pinning, virtualization, and grouping with aggregations alongside filtering, Simple Table for Solid ships them all in one MIT package.
Why it matters
Faster discovery
Users find rows by typing or selecting; they don't scan thousands of rows visually.
Type-aware filtering
Strings need contains/equals; numbers need >, <, between; dates need calendar pickers.
Combinable with sort/group
Filter, then sort, then group. The order matters for performance and UX.
Server vs client
Small datasets filter client-side; large ones round-trip to the server. Both are common.
Solid library comparison
| Library | Support | Notes |
|---|---|---|
| Simple Table for Solid | Built-in column filters + quick filter | filterable={true} + type-aware predicates; quickFilter prop for global search. |
| TanStack Solid Table | Headless | Provides filter state via column.getFilterValue; you build the inputs and rendering. |
| Kobalte primitives | Not applicable | Kobalte is a primitives library, not a data-grid solution. |
Implementation: Simple Table for Solid
Set filterable={true} globally or per-column for built-in filter chips. Add a quick-search input and bind it via quickFilter. Plug in custom predicates for advanced cases.
createResource—you get loading state for free.Common pitfalls
String filtering on numbers
Problem: Sorting and filtering treat "10" < "2" because they're strings.
Solution: Set the column type='number' so type-aware predicates kick in.
Filter resets on data refetch
Problem: Polling refresh wipes the user's filter input.
Solution: Hold the filter signal at the parent, not inside the table; pass it back in via quickFilter prop.
Slow on every keystroke
Problem: Filtering 50k rows on every keystroke janks.
Solution: Debounce input by 150-250ms or filter server-side.
Date strings aren't filterable
Problem: ISO strings sort/filter alphabetically, which breaks for dates.
Solution: Set type='date' (or pass Date objects) so the grid knows to compare temporally.
Frequently asked questions
- Can I filter server-side?
- Yes. Use createResource keyed on your query signal so refetch happens automatically when filters change.
- Does it pair with createStore?
- Yes. Pass a store-backed rows source; Solid's fine-grained reactivity makes updates smooth.
- Does filtering combine with virtualization?
- Yes. The filtered row set is what the virtualizer renders, so 1M-row datasets remain smooth after filtering.
Wrap-up
Filtering in SolidJS is a single prop on Simple Table. TanStack Solid Table is headless—you wire inputs and rendering manually.
Always set the right column type so type-aware predicates work, debounce on large datasets, and consider server-side filtering for 100k+ rows.