A data table with sortable columns, optional row selection with checkboxes, and animated transitions when rows reorder.
"use client";
import {
SortableDataTable,
type DataColumn,
} from "@/components/ui/sortable-data-table";
type Project = {
name: string;
status: string;
owner: string;
updated: string;
tasks: number;
};
const rows: Project[] = [
{
name: "Lighthouse redesign",
status: "In progress",
owner: "Mina Oyelaran",
updated: "2024-05-02",
tasks: 12,
},
{
name: "Billing migration",
status: "Blocked",
owner: "Theo Brandt",
updated: "2024-04-28",
tasks: 7,
},
{
name: "Mobile onboarding",
status: "Done",
owner: "Sarah Lindqvist",
updated: "2024-05-10",
tasks: 21,
},
{
name: "API rate limiting",
status: "In progress",
owner: "Dev Patel",
updated: "2024-05-07",
tasks: 5,
},
{
name: "Design tokens v2",
status: "Planned",
owner: "Mina Oyelaran",
updated: "2024-04-19",
tasks: 9,
},
{
name: "Accessibility audit",
status: "Done",
owner: "Theo Brandt",
updated: "2024-05-01",
tasks: 14,
},
];
const columns: DataColumn<Project>[] = [
{ key: "name", label: "Project" },
{ key: "status", label: "Status" },
{ key: "owner", label: "Owner" },
{ key: "updated", label: "Updated" },
{ key: "tasks", label: "Tasks", numeric: true },
];
export default function SortableDataTableDemo() {
return (
<div className="w-full max-w-3xl">
<SortableDataTable
rows={rows}
columns={columns}
rowKey="name"
caption="Projects"
selectable
defaultSort={{ key: "updated", direction: "desc" }}
itemName={{ one: "project", other: "projects" }}
/>
</div>
);
}