Generic Table
A polymorphic data table system with sorting, pagination, and row-level interactivity.
Requirement
This system requires
lucide-react and shadcn/ui table primitives.Quickstart
- Ensure the registry is set up in Installation.
- Run the registry command:
npx shadcn@latest add https://gen-ui-eta-two.vercel.app/r/generic-tableFeatures
- Polymorphic Cells: Render any component within table cells.
- Sorting: Built-in client-side sorting with custom sort functions.
- Pagination: Controlled or uncontrolled pagination state.
- Selection: Single or multi-row selection with checkboxes.
- Expandable Rows: Render detail rows per record.
Basic Usage
import { GenericTable } from "@/components/systems/generic-table/generic-table"
const columns = [
{
id: "name",
header: "Name",
accessorKey: "name",
sortable: true,
},
{
id: "status",
header: "Status",
accessorKey: "status",
cell: ({ row }) => (
<Badge variant={row.status === "active" ? "default" : "secondary"}>
{row.status}
</Badge>
),
},
]
export function UserTable({ users }) {
return (
<GenericTable
data={users}
columns={columns}
sortable
onRowClick={(row) => console.log(row)}
/>
)
}Rows must include an id field. The table uses it for selection, expansion, and row keys.
Controlled Sorting And Pagination
const [sort, setSort] = useState(null)
const [pagination, setPagination] = useState({ page: 1, pageSize: 20, total: 0, totalPages: 0 })
<GenericTable
data={rows}
columns={columns}
sortable
sort={sort}
onSortChange={setSort}
paginated
pagination={pagination}
onPaginationChange={setPagination}
/>Selection And Expansion
<GenericTable
data={rows}
columns={columns}
selectable="multiple"
expandable
renderExpandedRow={(row) => <UserDetails user={row} />}
/>Filtering
Filtering UI is intentionally external. Filter your data upstream and pass the filtered array into data.
API Reference
| Prop | Type | Notes |
|---|---|---|
| data | T[] | Rows must include id |
| columns | ColumnDef[] | Headers, accessors, renderers |
| sortable | boolean | Client-side sorting |
| paginated | boolean | Enable pagination |
| selectable | "none" | "single" | "multiple" | Selection mode |
| expandable | boolean | Enable expanded rows |
| renderExpandedRow | (row) => ReactNode | Expanded row renderer |