Data Table

import {
  DataTable,
  DataTableToolbar,
  DataTableHeader,
  DataTableBody,
  DataTableFooter,
  Column,
} from "@/components/ui/data-table"
import { Badge } from "@/components/ui/badge"

type Payment = {
  id: string
  status: "success" | "processing" | "failed"
  email: string
  amount: string
}

const columns: Column<Payment>[] = [
  {
    id: "status",
    header: "Status",
    accessorKey: "status",
    enableSorting: true,
    cell: ({ value }) => <Badge>{value}</Badge>,
  },
  {
    id: "email",
    header: "Email",
    accessorKey: "email",
    enableSorting: true,
  },
  {
    id: "amount",
    header: "Amount",
    accessorKey: "amount",
    enableSorting: true,
  },
]

function MyComponent() {
  const data: Payment[] = [
    { id: "1", status: "success", email: "ken99@yahoo.com", amount: "$31" },
    { id: "2", status: "processing", email: "abe45@gmail.com", amount: "$242.00" },
  ]

  return (
    <DataTable data={data} columns={columns}>
      <DataTableToolbar searchPlaceholder="Filter emails..." />
      <div className="rounded-md border-2 border-foreground neobrutalism-shadow">
        <table className="w-full">
          <DataTableHeader />
          <DataTableBody />
        </table>
      </div>
      <DataTableFooter />
    </DataTable>
  )
}