Data displayFree component
Data table
A sortable, searchable table with row selection and bulk-action feedback. Keep larger datasets easy to scan.
Preview
Open previewInstallation
Add data table to your project, then make it your own.
shadcnRun in your terminal
npx shadcn add https://menaceui.com/r/menace-data-table.jsonUsage
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"]}
/>Props
Key options and their defaults.
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.