Supabase Data Table

1import { DataTableClient } from "./components/client";
2import { getData } from "./data-table-actions";
3import { DEMO_DATA } from "./data/demo";
4import type { ColumnDef, CellType } from "./lib/utils";
5 
6const SEARCHABLE_TYPES = new Set<CellType>(["text", "badge", "status"]);
7 
8// ─────────────────────────────────────────────────────────────────────────────
9// Row type — adapt fields to your own data model
10// ─────────────────────────────────────────────────────────────────────────────
11 
12export type Row = {
13  id: string;
14  name: string;
15  email: string;
16  status: "active" | "inactive" | "pending";
17  category: string;
18  tags?: string[];
19  created_at: string;
20};
21 
22// ─────────────────────────────────────────────────────────────────────────────
23// Column definitions — customize to your data model
24// ─────────────────────────────────────────────────────────────────────────────
25 
26export const COLUMNS: ColumnDef<Row>[] = [
27  { key: "name", header: "Name", type: "text", sortable: true },
28  { key: "email", header: "Email", type: "text" },
29  {
30    key: "status",
31    header: "Status",
32    type: "status",
33    statusConfig: {
34      active: { label: "Active", dot: "bg-green-500" },
35      inactive: { label: "Inactive", dot: "bg-muted-foreground" },
36      pending: { label: "Pending", dot: "bg-amber-500" },
37    },
38  },
39  { key: "category", header: "Category", type: "badge" },
40  { key: "tags", header: "Tags", type: "tags" },
41  {
42    key: "created_at",
43    header: "Date",
44    type: "date",
45    align: "right",
46    sortable: true,
47  },
48];
49 
50// ─────────────────────────────────────────────────────────────────────────────
51// Config
52// … truncated