Agents / Interaction
Data explorer
Search, filter, sort and select records with one shared state.
Registry
Project explorer
Interactive demo · shared state for people and agents.
Checking browser…
| Select row | |||
|---|---|---|---|
| WebMCP | Browser | Preview | |
| Model Context Protocol | Protocol | Stable | |
| shadcn/ui | Interface | Stable | |
| Fabrials UI | Interface | Preview |
1–4 of 6 records
1 / 2
Simulated tool
filter_projects({ query: "", category: "Browser" })Run the tool to filter the table to Browser projects. The result will appear here.
Installation
Add the registry entry to your app.
npx shadcn@latest add @fabrials/data-explorerWithout the named registry, use the address:
https://ui.fabrials.com/r/data-explorer.json
API reference
| 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
SearchFilter uses controlled query/filter props. Sorting and pagination are local; register semantic tools to control your app state.
Accessibility
Keyboard and contrast
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 keyboard operable.