Data table

1"use client";
2 
3import {
4  ColumnDef,
5  ColumnFiltersState,
6  flexRender,
7  getCoreRowModel,
8  getFilteredRowModel,
9  getPaginationRowModel,
10  getSortedRowModel,
11  SortingState,
12  useReactTable,
13  VisibilityState,
14} from "@tanstack/react-table";
15import { ArrowUpDown, ChevronDown, MoreHorizontal } from "lucide-react";
16 
17import * as React from "react";
18 
19import { Button } from "@/components/ui/button";
20import { Checkbox } from "@/components/ui/checkbox";
21import {
22  DropdownMenu,
23  DropdownMenuCheckboxItem,
24  DropdownMenuContent,
25  DropdownMenuItem,
26  DropdownMenuLabel,
27  DropdownMenuSeparator,
28  DropdownMenuTrigger,
29} from "@/components/ui/dropdown-menu";
30import { Input } from "@/components/ui/input";
31import {
32  Table,
33  TableBody,
34  TableCell,
35  TableHead,
36  TableHeader,
37  TableRow,
38} from "@/components/ui/table";
39 
40const data: Payment[] = [
41  {
42    id: "m5gr84i9",
43    amount: 316,
44    status: "success",
45    email: "ken99@yahoo.com",
46  },
47  {
48    id: "3u1reuv4",
49    amount: 242,
50    status: "success",
51    email: "Abe45@gmail.com",
52  },
53  {
54    id: "derv1ws0",
55    amount: 837,
56    status: "processing",
57    email: "Monserrat44@gmail.com",
58  },
59  {
60    id: "5kma53ae",
61    amount: 874,
62    status: "success",
63    email: "Silas22@gmail.com",
64  },
65  {
66    id: "bhqecj4p",
67    amount: 721,
68    status: "failed",
69    email: "carmella@hotmail.com",
70  },
71];
72 
73export type Payment = {
74  id: string;
75  amount: number;
76  status: "pending" | "processing" | "success" | "failed";
77  email: string;
78};
79 
80export const columns: ColumnDef<Payment>[] = [
81  {
82    id: "select",
83    header: ({ table }) => (
84      <Checkbox
85        checked={
86          table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && "indeterminate")
87        }
88        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
89        aria-label="Select all"
90      />
91    ),
92    cell: ({ row }) => (
93      <Checkbox
94        checked={row.getIsSelected()}
95        onCheckedChange={(value) => row.toggleSelected(!!value)}
96        aria-label="Select row"
97      />
98    ),
99    enableSorting: false,
100    enableHiding: false,
101  },
102  {
103    accessorKey: "status",
104    header: "Status",
105    cell: ({ row }) => <div className="capitalize">{row.getValue("status")}</div>,
106  },
107  {
108    accessorKey: "email",
109    header: ({ column }) => {
110      return (
111        <Button
112          variant="noShadow"
113          size="sm"
114          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
115        >
116// … truncated