About
A responsive data table that renders as stacked cards on mobile and a traditional table on desktop, with optional column sorting and client-side pagination.
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 * as React from "react";
import { DataTable, type Column } from "@/components/ui/data-table";
interface PersonRow {
id: string;
name: string;
city: string;
age: number;
}
const SAMPLE_PEOPLE: PersonRow[] = [
{ id: "1", name: "Budi Santoso", city: "Jakarta", age: 28 },
{ id: "2", name: "Ani Rahmawati", city: "Bandung", age: 34 },
{ id: "3", name: "Citra Dewi", city: "Surabaya", age: 22 },
{ id: "4", name: "Dedi Kurniawan", city: "Yogyakarta", age: 41 },
{ id: "5", name: "Eka Putri", city: "Semarang", age: 29 },
{ id: "6", name: "Fajar Nugroho", city: "Medan", age: 36 },
{ id: "7", name: "Gita Pertiwi", city: "Denpasar", age: 25 },
{ id: "8", name: "Hadi Wibowo", city: "Makassar", age: 45 },
{ id: "9", name: "Indah Lestari", city: "Malang", age: 31 },
{ id: "10", name: "Joko Susanto", city: "Solo", age: 38 },
{ id: "11", name: "Kartika Sari", city: "Palembang", age: 27 },
{ id: "12", name: "Lutfi Hakim", city: "Bali", age: 33 },
];
export default function DataTableSortPaginationDemo() {
const columns: Column<PersonRow>[] = [
{ key: "name", header: "Name" },
{ key: "city", header: "City" },
{ key: "age", header: "Age", sortable: true, sortAccessor: (r) => r.age },
];
return (
<div className="w-full max-w-2xl p-6">
<DataTable
columns={columns}
data={SAMPLE_PEOPLE}
keyExtractor={(r) => r.id}
pageSize={5}
defaultSort={{ key: "age", direction: "asc" }}
pageLabel={(from, to) => `${from} - ${to} from ${SAMPLE_PEOPLE.length}`}
/>
</div>
);
}