Interaction
Data explorer
Search, filter, sort and select records with one shared state.
Project explorer
One interface. Two ways to interact.
Checking browser…
| Select row | |||
|---|---|---|---|
| WebMCP | Browser | Preview | |
| Model Context Protocol | Protocol | Stable | |
| shadcn/ui | Interface | Stable | |
| Fabrials UI | Interface | Preview |
6 records
1 / 2
filter_projects({ query: "", category: "Browser" })Installation
Terminal
bunx shadcn@latest add https://ui.fabrials.com/r/data-explorer.jsonAPI
| Prop / export | Type | Description |
|---|---|---|
| rows | T[] | Filtered records, each with a stable id. |
| columns | DataColumn<T>[] | Labels, keys and optional cell renderers. |
| selected | string[] | Controlled row selection. |
| onSelectionChange | (ids: string[]) => void | Receive selected row IDs. |
| pageSize | number = 5 | Number of records per page. |
Behavior & compatibility
SearchFilter uses controlled query/filter props. Sorting and pagination are local; register semantic tools to control your app state.
Accessibility
Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is fully keyboard operable.