Data Table

Component

About

A composable data table with sortable columns, search, pagination, and optional single or multi-row selection for chat/app interfaces.

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

Code

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

Usage.tsx

"use client";

import {
  Table,
  TableContent,
  TableFooter,
  TableGrid,
  TableHeader,
} from "@/components/ui/table";

export default function TableDemo() {
  return (
    <Table>
      <TableContent>
        <TableHeader />
        <TableGrid />
        <TableFooter />
      </TableContent>
    </Table>
  );
}