gitscope
/
← marzneshin / dashboard/src/features/hosts/tables/inbound-hosts/table.tsx / blame
Files Commits 446 Branches 1 Tags 43 Markers 4 README License
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/features/hosts/tables/inbound-hosts/table.tsx · v0.3.0
Source
1 3b7feef Mrdn 2y ago
2 3b7feef Mrdn 2y ago import {
3 3b7feef Mrdn 2y ago ColumnDef,
4 3b7feef Mrdn 2y ago ColumnFiltersState,
5 3b7feef Mrdn 2y ago SortingState,
6 3b7feef Mrdn 2y ago VisibilityState,
7 3b7feef Mrdn 2y ago flexRender,
8 3b7feef Mrdn 2y ago getCoreRowModel,
9 3b7feef Mrdn 2y ago getFilteredRowModel,
10 3b7feef Mrdn 2y ago getPaginationRowModel,
11 3b7feef Mrdn 2y ago getSortedRowModel,
12 3b7feef Mrdn 2y ago useReactTable,
13 3b7feef Mrdn 2y ago } from "@tanstack/react-table"
14 3b7feef Mrdn 2y ago import {
15 3b7feef Mrdn 2y ago Button,
16 3b7feef Mrdn 2y ago Input,
17 3b7feef Mrdn 2y ago DataTablePagination,
18 3b7feef Mrdn 2y ago DataTableViewOptions,
19 3b7feef Mrdn 2y ago Popover,
20 3b7feef Mrdn 2y ago PopoverTrigger,
21 3b7feef Mrdn 2y ago PopoverContent,
22 3b7feef Mrdn 2y ago Table,
23 3b7feef Mrdn 2y ago TableHeader,
24 3b7feef Mrdn 2y ago TableRow,
25 3b7feef Mrdn 2y ago TableHead,
26 3b7feef Mrdn 2y ago TableCell,
27 3b7feef Mrdn 2y ago TableBody,
28 3b7feef Mrdn 2y ago ToggleGroup,
29 3b7feef Mrdn 2y ago ToggleGroupItem,
30 3b7feef Mrdn 2y ago ScrollArea
31 3b7feef Mrdn 2y ago } from "@marzneshin/components"
32 3b7feef Mrdn 2y ago import { useTranslation } from "react-i18next"
33 3b7feef Mrdn 2y ago import { useState } from "react"
34 3b7feef Mrdn 2y ago import { InboundType } from "@marzneshin/features/inbounds"
35 3b7feef Mrdn 2y ago import { Server } from "lucide-react"
36 3b7feef Mrdn 2y ago import { InboundOption } from "./inbound"
37 53f1148 Mrdn 2y ago import { LoaderIcon } from "lucide-react"
38 3b7feef Mrdn 2y ago
39 3b7feef Mrdn 2y ago interface InboundHostsDataTableProps<TData, TValue> {
40 3b7feef Mrdn 2y ago columns: ColumnDef<TData, TValue>[]
41 3b7feef Mrdn 2y ago data: TData[]
42 3b7feef Mrdn 2y ago inbounds: InboundType[]
43 3b7feef Mrdn 2y ago filteredColumn: string
44 3b7feef Mrdn 2y ago selectedInbound: string | undefined
45 3b7feef Mrdn 2y ago setSelectedInbound: (s: string) => void
46 3b7feef Mrdn 2y ago onCreate?: () => void
47 3b7feef Mrdn 2y ago onOpen?: (object: TData) => void
48 53f1148 Mrdn 2y ago isLoading: boolean
49 3b7feef Mrdn 2y ago }
50 3b7feef Mrdn 2y ago
51 3b7feef Mrdn 2y ago export function InboundHostsDataTable<TData, TValue>({
52 3b7feef Mrdn 2y ago columns,
53 3b7feef Mrdn 2y ago data,
54 3b7feef Mrdn 2y ago onCreate,
55 3b7feef Mrdn 2y ago onOpen,
56 3b7feef Mrdn 2y ago filteredColumn,
57 3b7feef Mrdn 2y ago inbounds,
58 3b7feef Mrdn 2y ago selectedInbound,
59 3b7feef Mrdn 2y ago setSelectedInbound,
60 53f1148 Mrdn 2y ago isLoading,
61 3b7feef Mrdn 2y ago }: InboundHostsDataTableProps<TData, TValue>) {
62 3b7feef Mrdn 2y ago const [sorting, setSorting] = useState<SortingState>([])
63 578311c Mrdn 2y ago const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
64 578311c Mrdn 2y ago const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})
65 3b7feef Mrdn 2y ago const table = useReactTable({
66 3b7feef Mrdn 2y ago data,
67 3b7feef Mrdn 2y ago columns,
68 3b7feef Mrdn 2y ago onSortingChange: setSorting,
69 3b7feef Mrdn 2y ago onColumnFiltersChange: setColumnFilters,
70 3b7feef Mrdn 2y ago getCoreRowModel: getCoreRowModel(),
71 3b7feef Mrdn 2y ago getPaginationRowModel: getPaginationRowModel(),
72 3b7feef Mrdn 2y ago getSortedRowModel: getSortedRowModel(),
73 3b7feef Mrdn 2y ago getFilteredRowModel: getFilteredRowModel(),
74 3b7feef Mrdn 2y ago onColumnVisibilityChange: setColumnVisibility,
75 3b7feef Mrdn 2y ago state: {
76 3b7feef Mrdn 2y ago sorting,
77 3b7feef Mrdn 2y ago columnFilters,
78 3b7feef Mrdn 2y ago columnVisibility,
79 3b7feef Mrdn 2y ago },
80 3b7feef Mrdn 2y ago })
81 3b7feef Mrdn 2y ago const { t } = useTranslation();
82 3b7feef Mrdn 2y ago return (
83 3b7feef Mrdn 2y ago <div>
84 3b7feef Mrdn 2y ago <div className="flex justify-between items-center py-4">
85 3b7feef Mrdn 2y ago <Input
86 3b7feef Mrdn 2y ago placeholder={t('table.filter-placeholder', { name: filteredColumn })}
87 3b7feef Mrdn 2y ago value={(table.getColumn(filteredColumn)?.getFilterValue() as string) ?? ""}
88 3b7feef Mrdn 2y ago onChange={(event) =>
89 3b7feef Mrdn 2y ago table.getColumn(filteredColumn)?.setFilterValue(event.target.value)
90 3b7feef Mrdn 2y ago }
91 3b7feef Mrdn 2y ago className="max-w-sm"
92 3b7feef Mrdn 2y ago />
93 3b7feef Mrdn 2y ago <div className="flex items-center">
94 3b7feef Mrdn 2y ago <Popover >
95 3b7feef Mrdn 2y ago <PopoverTrigger asChild>
96 3b7feef Mrdn 2y ago <Button
97 3b7feef Mrdn 2y ago variant="outline"
98 3b7feef Mrdn 2y ago className="mr-2 ml-auto lg:flex"
99 3b7feef Mrdn 2y ago >
100 3b7feef Mrdn 2y ago <Server className="mr-2 w-4 h-4" />
101 3b7feef Mrdn 2y ago {t('inbounds')}
102 3b7feef Mrdn 2y ago </Button>
103 3b7feef Mrdn 2y ago </PopoverTrigger>
104 3b7feef Mrdn 2y ago <PopoverContent className="w-80 max-h-100">
105 3b7feef Mrdn 2y ago <ToggleGroup type="single" onValueChange={setSelectedInbound} defaultValue={selectedInbound} className="flex flex-col justify-center w-full h-full" >
106 3b7feef Mrdn 2y ago <ScrollArea className="w-full h-full">
107 3b7feef Mrdn 2y ago {inbounds.map((inbound) => {
108 3b7feef Mrdn 2y ago return <ToggleGroupItem className="px-0 w-full h-full" value={String(inbound.id)} id={String(inbound.id)}>
109 3b7feef Mrdn 2y ago <InboundOption inbound={inbound} />
110 3b7feef Mrdn 2y ago </ToggleGroupItem>
111 3b7feef Mrdn 2y ago })}
112 3b7feef Mrdn 2y ago </ScrollArea>
113 3b7feef Mrdn 2y ago </ToggleGroup>
114 3b7feef Mrdn 2y ago </PopoverContent>
115 3b7feef Mrdn 2y ago </Popover>
116 3b7feef Mrdn 2y ago <DataTableViewOptions table={table} />
117 3b7feef Mrdn 2y ago {onCreate && (<Button onClick={onCreate}>{t('create')}</Button>)}
118 3b7feef Mrdn 2y ago </div>
119 3b7feef Mrdn 2y ago </div>
120 3b7feef Mrdn 2y ago <div className="rounded-md border">
121 3b7feef Mrdn 2y ago <div>
122 3b7feef Mrdn 2y ago <Table>
123 3b7feef Mrdn 2y ago <TableHeader>
124 3b7feef Mrdn 2y ago {table.getHeaderGroups().map((headerGroup) => (
125 3b7feef Mrdn 2y ago <TableRow key={headerGroup.id}>
126 3b7feef Mrdn 2y ago {headerGroup.headers.map((header) => {
127 3b7feef Mrdn 2y ago return (
128 3b7feef Mrdn 2y ago <TableHead key={header.id}>
129 3b7feef Mrdn 2y ago {header.isPlaceholder
130 3b7feef Mrdn 2y ago ? null
131 3b7feef Mrdn 2y ago : flexRender(
132 3b7feef Mrdn 2y ago header.column.columnDef.header,
133 3b7feef Mrdn 2y ago header.getContext()
134 3b7feef Mrdn 2y ago )}
135 3b7feef Mrdn 2y ago </TableHead>
136 3b7feef Mrdn 2y ago )
137 3b7feef Mrdn 2y ago })}
138 3b7feef Mrdn 2y ago </TableRow>
139 3b7feef Mrdn 2y ago ))}
140 3b7feef Mrdn 2y ago </TableHeader>
141 3b7feef Mrdn 2y ago <TableBody>
142 53f1148 Mrdn 2y ago {isLoading && <LoaderIcon className="w-5 h-5 animate-spin text-primary" />} {!isLoading && table.getRowModel().rows?.length ? (
143 3b7feef Mrdn 2y ago table.getRowModel().rows.map((row) => (
144 3b7feef Mrdn 2y ago <TableRow
145 3b7feef Mrdn 2y ago key={row.id}
146 3b7feef Mrdn 2y ago data-state={row.getIsSelected() && "selected"}
147 3b7feef Mrdn 2y ago onClick={() => onOpen !== undefined && onOpen(row.original)}
148 3b7feef Mrdn 2y ago >
149 3b7feef Mrdn 2y ago {row.getVisibleCells().map((cell) => (
150 3b7feef Mrdn 2y ago <TableCell key={cell.id}>
151 3b7feef Mrdn 2y ago {flexRender(cell.column.columnDef.cell, cell.getContext())}
152 3b7feef Mrdn 2y ago </TableCell>
153 3b7feef Mrdn 2y ago ))}
154 3b7feef Mrdn 2y ago </TableRow>
155 3b7feef Mrdn 2y ago ))
156 3b7feef Mrdn 2y ago ) : (
157 3b7feef Mrdn 2y ago <TableRow>
158 3b7feef Mrdn 2y ago <TableCell colSpan={columns.length} className="h-24 text-center">
159 3b7feef Mrdn 2y ago {t('table.no-result')}
160 3b7feef Mrdn 2y ago </TableCell>
161 3b7feef Mrdn 2y ago </TableRow>
162 3b7feef Mrdn 2y ago )}
163 3b7feef Mrdn 2y ago </TableBody>
164 3b7feef Mrdn 2y ago </Table>
165 3b7feef Mrdn 2y ago
166 3b7feef Mrdn 2y ago </div>
167 3b7feef Mrdn 2y ago <DataTablePagination table={table} />
168 3b7feef Mrdn 2y ago </div>
169 3b7feef Mrdn 2y ago </div >
170 3b7feef Mrdn 2y ago )
171 3b7feef Mrdn 2y ago }