Data Table

1"use client";
2 
3import { ArrowsDownUpIcon, CaretDownIcon, CaretUpIcon, MagnifyingGlassIcon } from "@phosphor-icons/react";
4import {
5  type Column,
6  type ColumnDef,
7  type ColumnFiltersState,
8  flexRender,
9  getCoreRowModel,
10  getFilteredRowModel,
11  getPaginationRowModel,
12  getSortedRowModel,
13  type SortingState,
14  useReactTable,
15} from "@tanstack/react-table";
16import * as React from "react";
17import { Badge } from "@/components/ui/badge";
18import { Button } from "@/components/ui/button";
19import { Input } from "@/components/ui/input";
20import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
21import { cn } from "@/lib/utils";
22 
23interface Member {
24  id: string;
25  name: string;
26  email: string;
27  role: string;
28  status: "active" | "pending" | "inactive";
29  contributions: number;
30}
31 
32const data: Member[] = [
33  {
34    id: "1",
35    name: "Ada Lovelace",
36    email: "ada@sistine.dev",
37    role: "Owner",
38    status: "active",
39    contributions: 312,
40  },
41  {
42    id: "2",
43    name: "Alan Turing",
44    email: "alan@sistine.dev",
45    role: "Admin",
46    status: "active",
47    contributions: 287,
48  },
49  {
50    id: "3",
51    name: "Grace Hopper",
52    email: "grace@sistine.dev",
53    role: "Maintainer",
54    status: "active",
55    contributions: 244,
56  },
57  {
58    id: "4",
59    name: "Katherine Johnson",
60    email: "katherine@sistine.dev",
61    role: "Contributor",
62    status: "pending",
63    contributions: 98,
64  },
65  {
66    id: "5",
67    name: "Linus Torvalds",
68    email: "linus@sistine.dev",
69    role: "Maintainer",
70    status: "active",
71    contributions: 401,
72  },
73  {
74    id: "6",
75    name: "Margaret Hamilton",
76    email: "margaret@sistine.dev",
77    role: "Admin",
78    status: "active",
79    contributions: 356,
80  },
81  {
82    id: "7",
83    name: "Dennis Ritchie",
84    email: "dennis@sistine.dev",
85    role: "Contributor",
86    status: "inactive",
87    contributions: 41,
88  },
89  {
90    id: "8",
91    name: "Barbara Liskov",
92    email: "barbara@sistine.dev",
93    role: "Maintainer",
94    status: "active",
95    contributions: 198,
96  },
97  {
98    id: "9",
99    name: "Tim Berners-Lee",
100    email: "tim@sistine.dev",
101    role: "Contributor",
102    status: "pending",
103    contributions: 73,
104  },
105  {
106    id: "10",
107    name: "Donald Knuth",
108    email: "don@sistine.dev",
109    role: "Contributor",
110    status: "active",
111    contributions: 165,
112  },
113  {
114    id: "11",
115    name: "Edsger Dijkstra",
116    email: "edsger@sistine.dev",
117    role: "Contributor",
118    status: "inactive",
119// … truncated