Sortable Data Table

Component 1

About

A data table with sortable columns, optional row selection with checkboxes, and animated transitions when rows reorder.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Sortable Data Table to your project and fits it to your theme.

Code

How Sortable Data Table is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"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>
  );
}