openstatus.dev
Openstatus
www.openstatus.dev
1"use client";
2
3import { Badge } from "@/components/ui/badge";
4import { formatDate } from "@/lib/formatter";
5import type { RouterOutputs } from "@openstatus/api";
6import type { ColumnDef } from "@tanstack/react-table";
7import { DataTableRowActions } from "./data-table-row-actions";
8
9type Subscriber = RouterOutputs["pageSubscriber"]["list"][number];
10
11export const columns: ColumnDef<Subscriber>[] = [
12 {
13 accessorKey: "email",
14 header: "Email",
15 enableSorting: false,
16 enableHiding: false,
17 },
18 {
19 id: "status",
20 header: "Status",
21 enableSorting: false,
22 enableHiding: false,
23 cell: ({ row }) => {
24 const unsubscribedAt = row.original.unsubscribedAt;
25 const acceptedAt = row.original.acceptedAt;
26
27 if (unsubscribedAt) {
28 return <Badge variant="destructive">Unsubscribed</Badge>;
29 }
30
31 if (!acceptedAt) {
32 return <Badge variant="outline">Pending</Badge>;
33 }
34
35 return <Badge variant="secondary">Active</Badge>;
36 },
37 },
38 {
39 accessorKey: "createdAt",
40 header: "Created At",
41 enableSorting: false,
42 enableHiding: false,
43 cell: ({ row }) => {
44 const value = row.getValue("createdAt");
45 if (value instanceof Date) return formatDate(value);
46 if (!value) return "-";
47 return value;
48 },
49 meta: {
50 cellClassName: "font-mono",
51 },
52 },
53 {
54 accessorKey: "acceptedAt",
55 header: "Accepted At",
56 enableSorting: false,
57 enableHiding: false,
58 cell: ({ row }) => {
59 const value = row.getValue("acceptedAt");
60 if (value instanceof Date) return formatDate(value);
61 if (!value) return "-";
62 return value;
63 },
64 meta: {
65 cellClassName: "font-mono",
66 },
67 },
68 {
69 accessorKey: "unsubscribedAt",
70 header: "Unsubscribed At",
71 enableSorting: false,
72 enableHiding: false,
73 cell: ({ row }) => {
74 const value = row.getValue("unsubscribedAt");
75 if (value instanceof Date) return formatDate(value);
76 if (!value) return "-";
77 return value;
78 },
79 meta: {
80 cellClassName: "font-mono",
81 },
82 },
83 {
84 id: "actions",
85 cell: ({ row }) => <DataTableRowActions row={row} />,
86 meta: {
87 cellClassName: "w-8",
88 },
89 },
90];