Searchable Table
Responsive table with search, filters, sorting, mobile cards, and pagination.
When To Use
- Use Searchable Table when information needs to be scanned quickly and compared across multiple rows, cards, or values.
- Choose the example that best matches whether the user is browsing, monitoring, or drilling into structured data.
- Lean on these patterns when you want consistent spacing and hierarchy before tuning the visual treatment.
When Not To Use
- Do not use a dense data pattern when the primary task is storytelling, onboarding, or one-off explanation.
- Do not flatten nuanced data into a compact summary card if the user still needs the underlying structure to make a decision.
Accessibility Notes
- Mark the current item clearly with visual state and the appropriate ARIA current/selected semantics.
- Ensure arrow-key or tab-key movement stays predictable when the pattern behaves like a composite widget.
- Do not rely on icon-only navigation unless every control has a clear accessible name.
Key Props / API
Props
id, data, columns, searchPlaceholder, searchTerm, onSearchChange
Example Code
import { SearchableTable, StatusBadge, type SearchableTableColumn } from "@hilum/ui"
const columns: SearchableTableColumn<Campaign>[] = [
{ key: "name", label: "Campaign", sortable: true },
{ key: "owner", label: "Owner", sortable: true },
{
key: "status",
label: "Status",
render: (campaign) => <StatusBadge status={campaign.status} showDot />,
},
]
<SearchableTable
data={campaigns}
columns={columns}
searchTerm={searchTerm}
onSearchChange={setSearchTerm}
/>Search
Searchable rows
Client-side search scans primitive values across each row.
- Spring launch
- Owner
- Sofia
- Status
- Active
- Revenue
- $48,200
- Partner webinar
- Owner
- Marcus
- Status
- Scheduled
- Revenue
- $17,300
- Enterprise nurture
- Owner
- Priya
- Status
- Draft
- Revenue
- $22,100
- Win-back sequence
- Owner
- Diego
- Status
- Paused
- Revenue
- $9,200
Filters
Filters and pagination
Scope rows with select filters, then page through the remaining results.
- Spring launch
- Owner
- Sofia
- Status
- Active
- Revenue
- $48,200
- Partner webinar
- Owner
- Marcus
- Status
- Scheduled
- Revenue
- $17,300
- Enterprise nurture
- Owner
- Priya
- Status
- Draft
- Revenue
- $22,100