Available nowReact
Data table
Dense records with sorting, selection, and deliberate responsive states.
shadcnRegistry install command
npx shadcn add http://localhost:3000/r/menace-data-table.jsonPreview
Live component behavior
Component performance5 total
| 7 day | Status | ||||
|---|---|---|---|---|---|
| Command workspace | Application | 3,194 | +18.4% | Live | |
| Animated input | Essentials | 2,842 | +14.2% | Live | |
| Decision dialog | Essentials | 2,108 | +11.8% | Live | |
| Data table | Data display | 1,846 | +9.6% | Beta | |
| Toast stack | Interaction | 1,106 | +8.7% | Live |
Select rows to reveal bulk actions
Use it in context.
Copy the component into your project, then adapt the source to the interface around it.
TSXUsage example
import { MenaceDataTable } from "@/components/menace/data-table";
<MenaceDataTable
caption="Component performance"
columns={columns}
defaultSort={{ key: "installs", direction: "desc" }}
rows={rows}
searchKeys={["name", "collection"]}
/>API and behavior
rows / columnsrequired- Typed records and their visible column definitions.
searchKeysall columns- Record fields included in the live text filter.
selectabletrue- Adds accessible row and select-all checkboxes.
onSelectionChangeundefined- Receives the complete selected record collection.
- Filtering, stable sorting, row selection, select-all, and bulk-selection feedback work together without external state.
- Generic row and column types keep render functions and sort keys aligned with the supplied records.
- Semantic table markup stays intact inside deliberate horizontal overflow on narrow screens.