Data tablePro

"use client"
import * as React from "react"import { CopyIcon, DownloadIcon, FileTextIcon, MailIcon, CircleCheckIcon, Trash2Icon } from "lucide-react"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"import { Button } from "@/components/ui/button"import {  DataTable,  DataTableBulkActions,  DataTableColumnHeader,  DataTableContent,  DataTableFilterBar,  DataTableFilterChips,  DataTablePagination,  DataTableRowActions,  DataTableSearch,  DataTableToolbar,  DataTableToolbarSpacer,  DataTableViewOptions,  createDataTableColumnHelper,  dataTableSelectColumn,  useDataTable,  type DataTableFilterConfig,} from "@/components/ui/data-table"import { DropdownMenuItem, DropdownMenuSeparator } from "@/components/ui/dropdown-menu"import { Status, StatusIndicator, type StatusVariant } from "@/components/ui/status"
type InvoiceStatus = "paid" | "open" | "overdue" | "draft" | "void"type Invoice = {  id: string  customer: string  email: string  plan: "Starter" | "Growth" | "Scale" | "Enterprise"  status: InvoiceStatus  owner: string  issued: Date  due: Date  amount: number}
const owners = [  { name: "Maya Okafor", initials: "MO" },  { name: "Theo Lindqvist", initials: "TL" },  { name: "Priya Raman", initials: "PR" },  { name: "Daniel Ferreira", initials: "DF" },  { name: "Hana Sato", initials: "HS" },]
const customers: [string, string][] = [  ["Northwind Logistics", "billing@northwind.io"],  ["Kestrel Health", "ap@kestrelhealth.com"],  ["Brightline Studio", "finance@brightline.studio"],  ["Ostara Foods", "accounts@ostarafoods.com"],  ["Halcyon Robotics", "ap@halcyonrobotics.ai"],  ["Meridian Freight", "invoices@meridianfreight.co"],  ["Cobalt Ridge Capital", "ops@cobaltridge.vc"],  ["Lumen Analytics", "billing@lumenanalytics.io"],  ["Pinecrest Schools", "finance@pinecrest.edu"],  ["Tidewater Energy", "ap@tidewater.energy"],  ["Fable & Finch", "hello@fableandfinch.com"],  ["Granite Peak Outdoors", "billing@granitepeak.shop"],  ["Verity Legal", "accounts@veritylegal.law"],  ["Sundial Hospitality", "ap@sundialhotels.com"],  ["Arcwell Medical", "billing@arcwellmedical.com"],  ["Quill & Ink Press", "finance@quillink.press"],  ["Riverbend Credit Union", "vendors@riverbendcu.org"],  ["Helio Solar Co.", "ap@heliosolar.co"],  ["Mosaic Learning", "billing@mosaiclearning.app"],  ["Ironclad Security", "finance@ironclad.sh"],  ["Bluefin Marine", "accounts@bluefinmarine.com"],  ["Orchard Lane Grocers", "ap@orchardlane.store"],  ["Parallax Games", "billing@parallax.gg"],  ["Summit Dental Group", "office@summitdental.care"],]
const plans = [  { plan: "Starter", base: 49 },  { plan: "Growth", base: 490 },  { plan: "Scale", base: 1890 },  { plan: "Enterprise", base: 7200 },] as const
// Deterministic pseudo random numbers, so server and client render the same rows.function seeded(seed: number) {  return () => {    seed = (seed * 16807) % 2147483647    return (seed - 1) / 2147483646  }}
const today = new Date(2026, 9, 21)const day = 24 * 60 * 60 * 1000
function makeInvoices(): Invoice[] {  const rand = seeded(42)  return Array.from({ length: 46 }, (_, i) => {    const [customer, email] = customers[i % customers.length]    const tier = plans[Math.floor(rand() * plans.length)]    const issued = new Date(today.getTime() - Math.floor(rand() * 75) * day)    const due = new Date(issued.getTime() + 30 * day)    const r = rand()    let status: InvoiceStatus =      r < 0.08 ? "draft" : r < 0.12 ? "void" : due < today ? (r < 0.3 ? "overdue" : "paid") : r < 0.7 ? "open" : "paid"    if (status === "overdue" && due >= today) status = "open"    const seats = 1 + Math.floor(rand() * 12)    return {      id: `INV-${2100 - i}`,      customer,      email,      plan: tier.plan,      status,      owner: owners[Math.floor(rand() * owners.length)].name,      issued,      due,      amount: Math.round(tier.base * seats * (0.9 + rand() * 0.2)) * 100,    }  })}
const statusMeta: Record<InvoiceStatus, { label: string; variant: StatusVariant }> = {  paid: { label: "Paid", variant: "success" },  open: { label: "Open", variant: "info" },  overdue: { label: "Overdue", variant: "destructive" },  draft: { label: "Draft", variant: "neutral" },  void: { label: "Void", variant: "neutral" },}
const currency = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" })const shortDate = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", year: "numeric" })
const helper = createDataTableColumnHelper<Invoice>()
const columns = helper.columns([  dataTableSelectColumn<Invoice>(),  helper.accessor("id", {    header: ({ column }) => <DataTableColumnHeader column={column} title="Invoice" />,    meta: { label: "Invoice" },    cell: ({ getValue }) => <span className="font-mono text-[13px] text-foreground">{getValue()}</span>,  }),  helper.accessor("customer", {    header: ({ column }) => <DataTableColumnHeader column={column} title="Customer" />,    meta: { label: "Customer" },    cell: ({ row }) => (      <div className="flex min-w-0 flex-col">        <span className="truncate font-medium text-foreground">{row.original.customer}</span>        <span className="truncate text-[13px] text-muted-foreground">{row.original.email}</span>      </div>    ),  }),  helper.accessor("status", {    header: ({ column }) => <DataTableColumnHeader column={column} title="Status" />,    meta: { label: "Status" },    filterFn: "facet",    cell: ({ getValue }) => {      const s = statusMeta[getValue()]      return (        <Status variant={s.variant} appearance="pill">          {s.label}        </Status>      )    },  }),  helper.accessor("plan", {    header: ({ column }) => <DataTableColumnHeader column={column} title="Plan" />,    meta: { label: "Plan" },    filterFn: "facet",    cell: ({ getValue }) => <span className="text-muted-foreground">{getValue()}</span>,  }),  helper.accessor("owner", {    header: ({ column }) => <DataTableColumnHeader column={column} title="Owner" />,    meta: { label: "Owner" },    filterFn: "facet",    cell: ({ getValue }) => {      const owner = owners.find((o) => o.name === getValue())!      return (        <div className="flex items-center gap-2">          <Avatar size="sm">            <AvatarFallback>{owner.initials}</AvatarFallback>          </Avatar>          <span className="truncate">{owner.name}</span>        </div>      )    },  }),  helper.accessor("due", {    header: ({ column }) => <DataTableColumnHeader column={column} title="Due" />,    meta: { label: "Due date", align: "end" },    sortFn: "datetime",    enableGlobalFilter: false,    cell: ({ getValue, row }) => (      <span className={row.original.status === "overdue" ? "text-destructive-subtle-foreground" : "text-muted-foreground"}>        {shortDate.format(getValue())}      </span>    ),  }),  helper.accessor("amount", {    header: ({ column }) => <DataTableColumnHeader column={column} title="Amount" />,    meta: { label: "Amount", align: "end" },    enableGlobalFilter: false,    cell: ({ getValue }) => <span className="font-medium text-foreground">{currency.format(getValue() / 100)}</span>,  }),  helper.display({    id: "actions",    enableHiding: false,    meta: { className: "w-12" },    cell: ({ row }) => (      <DataTableRowActions label={`Actions for ${row.original.id}`}>        <DropdownMenuItem>          <FileTextIcon />          View invoice        </DropdownMenuItem>        <DropdownMenuItem>          <MailIcon />          Send reminder        </DropdownMenuItem>        <DropdownMenuItem>          <CopyIcon />          Duplicate        </DropdownMenuItem>        <DropdownMenuSeparator />        <DropdownMenuItem variant="destructive">          <Trash2Icon />          Void invoice        </DropdownMenuItem>      </DataTableRowActions>    ),  }),])
const filters: DataTableFilterConfig[] = [  {    column: "status",    title: "Status",    pinned: true,    options: (Object.keys(statusMeta) as InvoiceStatus[]).map((s) => ({      value: s,      label: statusMeta[s].label,      icon: <StatusIndicator variant={statusMeta[s].variant} />,    })),  },  {    column: "owner",    title: "Owner",    pinned: true,    options: owners.map((o) => ({      value: o.name,      label: o.name,      icon: (        <Avatar size="sm">          <AvatarFallback>{o.initials}</AvatarFallback>        </Avatar>      ),    })),  },  {    column: "plan",    title: "Plan",    options: plans.map((p) => ({ value: p.plan, label: p.plan })),  },]
export default function DataTableInvoices() {  const [data, setData] = React.useState(makeInvoices)  const table = useDataTable({    data,    columns,    getRowId: (row) => row.id,    initialState: {      sorting: [{ id: "due", desc: true }],      columnVisibility: { plan: false },    },  })
  const markPaid = () => {    const ids = new Set(Object.keys(table.state.rowSelection))    setData((rows) => rows.map((r) => (ids.has(r.id) ? { ...r, status: "paid" } : r)))    table.resetRowSelection()  }
  return (    <DataTable table={table}>      <DataTableToolbar>        <DataTableSearch placeholder="Search invoices" />        <DataTableFilterBar filters={filters} />        <DataTableToolbarSpacer />        <DataTableViewOptions />        <Button variant="outline" size="sm">          <DownloadIcon data-icon="inline-start" />          Export        </Button>      </DataTableToolbar>      <DataTableFilterChips filters={filters} />      <DataTableContent>        <DataTableBulkActions>          <Button variant="ghost" size="sm">            <MailIcon data-icon="inline-start" />            Send reminders          </Button>          <Button variant="ghost" size="sm">            <DownloadIcon data-icon="inline-start" />            Export          </Button>          <Button size="sm" onClick={markPaid}>            <CircleCheckIcon data-icon="inline-start" />            Mark as paid          </Button>        </DataTableBulkActions>      </DataTableContent>      <DataTablePagination />    </DataTable>  )}

"use client"
import * as React from "react"import { RefreshCwIcon } from "lucide-react"
import { Button } from "@/components/ui/button"import {  DataTable,  DataTableColumnHeader,  DataTableContent,  DataTableSearch,  DataTableToolbar,  DataTableToolbarSpacer,  createDataTableColumnHelper,  useDataTable,} from "@/components/ui/data-table"import { Sparkline } from "@/components/ui/sparkline"import { Status } from "@/components/ui/status"
type Account = {  id: string  name: string  segment: string  health: "healthy" | "at-risk" | "churning"  seats: number  usage: number[]  arr: number}
const names = [  "Northwind Logistics", "Kestrel Health", "Brightline Studio", "Ostara Foods", "Halcyon Robotics",  "Meridian Freight", "Cobalt Ridge Capital", "Lumen Analytics", "Pinecrest Schools", "Tidewater Energy",  "Fable & Finch", "Granite Peak Outdoors", "Verity Legal", "Sundial Hospitality", "Arcwell Medical",  "Quill & Ink Press", "Riverbend Credit Union", "Helio Solar Co.", "Mosaic Learning", "Ironclad Security",]const segments = ["Mid-market", "Enterprise", "SMB"]
function seeded(seed: number) {  return () => {    seed = (seed * 16807) % 2147483647    return (seed - 1) / 2147483646  }}
const accounts: Account[] = (() => {  const rand = seeded(7)  return names.map((name, i) => {    const r = rand()    const health = r < 0.6 ? "healthy" : r < 0.85 ? "at-risk" : "churning"    const drift = health === "healthy" ? 1.5 : health === "at-risk" ? -0.6 : -2    let v = 40 + rand() * 30    const usage = Array.from({ length: 14 }, () => (v = Math.max(4, v + drift + (rand() - 0.5) * 8)))    return {      id: `acc_${(1040 + i * 7).toString(36)}`,      name,      segment: segments[i % 3],      health,      seats: 12 + Math.floor(rand() * 480),      usage,      arr: Math.round((8 + rand() * 140) * 1000),    }  })})()
const healthMeta = {  healthy: { label: "Healthy", variant: "success" },  "at-risk": { label: "At risk", variant: "warning" },  churning: { label: "Churning", variant: "destructive" },} as const
const currency = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 0 })
const helper = createDataTableColumnHelper<Account>()const columns = helper.columns([  helper.accessor("name", {    header: ({ column }) => <DataTableColumnHeader column={column} title="Account" />,    cell: ({ getValue }) => <span className="font-medium text-foreground">{getValue()}</span>,  }),  helper.accessor("segment", {    header: ({ column }) => <DataTableColumnHeader column={column} title="Segment" />,    cell: ({ getValue }) => <span className="text-muted-foreground">{getValue()}</span>,  }),  helper.accessor("health", {    header: ({ column }) => <DataTableColumnHeader column={column} title="Health" />,    cell: ({ getValue }) => {      const h = healthMeta[getValue()]      return <Status variant={h.variant}>{h.label}</Status>    },  }),  helper.accessor("usage", {    header: "Weekly active usage",    enableSorting: false,    enableGlobalFilter: false,    cell: ({ getValue, row }) => (      <Sparkline        data={getValue()}        className={          row.original.health === "healthy"            ? "h-6 w-28 text-chart-1"            : row.original.health === "at-risk"              ? "h-6 w-28 text-warning-subtle-foreground"              : "h-6 w-28 text-destructive-subtle-foreground"        }        showLastPoint      />    ),  }),  helper.accessor("seats", {    header: ({ column }) => <DataTableColumnHeader column={column} title="Seats" />,    meta: { align: "end" },    enableGlobalFilter: false,  }),  helper.accessor("arr", {    header: ({ column }) => <DataTableColumnHeader column={column} title="ARR" />,    meta: { align: "end" },    enableGlobalFilter: false,    cell: ({ getValue }) => <span className="font-medium text-foreground">{currency.format(getValue())}</span>,  }),])
const empty: Account[] = []const modes = ["Loaded", "Loading", "Empty"] as const
export default function DataTableStates() {  const [mode, setMode] = React.useState<(typeof modes)[number]>("Loaded")  const table = useDataTable({    data: mode === "Empty" ? empty : accounts,    columns,    getRowId: (row) => row.id,    initialState: { pagination: { pageIndex: 0, pageSize: 50 } },  })
  return (    <DataTable table={table}>      <DataTableToolbar>        <DataTableSearch placeholder="Search accounts" />        <DataTableToolbarSpacer />        <div role="group" aria-label="Preview state" className="flex items-center gap-1">          {modes.map((m) => (            <Button              key={m}              size="sm"              variant={mode === m ? "secondary" : "ghost"}              aria-pressed={mode === m}              onClick={() => setMode(m)}            >              {m === "Loading" && <RefreshCwIcon data-icon="inline-start" />}              {m}            </Button>          ))}        </div>      </DataTableToolbar>      <DataTableContent stickyHeader maxHeight={380} loading={mode === "Loading"} skeletonRows={7} />    </DataTable>  )}