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-alpha8
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 3b7feef Mrdn 2y ago
38 3b7feef Mrdn 2y ago interface InboundHostsDataTableProps<TData, TValue> {
39 3b7feef Mrdn 2y ago columns: ColumnDef<TData, TValue>[]
40 3b7feef Mrdn 2y ago data: TData[]
41 3b7feef Mrdn 2y ago inbounds: InboundType[]
42 3b7feef Mrdn 2y ago filteredColumn: string
43 3b7feef Mrdn 2y ago selectedInbound: string | undefined
44 3b7feef Mrdn 2y ago setSelectedInbound: (s: string) => void
45 3b7feef Mrdn 2y ago onCreate?: () => void
46 3b7feef Mrdn 2y ago onOpen?: (object: TData) => void
47 3b7feef Mrdn 2y ago }
48 3b7feef Mrdn 2y ago
49 3b7feef Mrdn 2y ago export function InboundHostsDataTable<TData, TValue>({
50 3b7feef Mrdn 2y ago columns,
51 3b7feef Mrdn 2y ago data,
52 3b7feef Mrdn 2y ago onCreate,
53 3b7feef Mrdn 2y ago onOpen,
54 3b7feef Mrdn 2y ago filteredColumn,
55 3b7feef Mrdn 2y ago inbounds,
56 3b7feef Mrdn 2y ago selectedInbound,
57 3b7feef Mrdn 2y ago setSelectedInbound,
58 3b7feef Mrdn 2y ago }: InboundHostsDataTableProps<TData, TValue>) {
59 3b7feef Mrdn 2y ago const [sorting, setSorting] = useState<SortingState>([])
60 578311c Mrdn 2y ago const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
61 578311c Mrdn 2y ago const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})
62 3b7feef Mrdn 2y ago const table = useReactTable({
63 3b7feef Mrdn 2y ago data,
64 3b7feef Mrdn 2y ago columns,
65 3b7feef Mrdn 2y ago onSortingChange: setSorting,
66 3b7feef Mrdn 2y ago onColumnFiltersChange: setColumnFilters,
67 3b7feef Mrdn 2y ago getCoreRowModel: getCoreRowModel(),
68 3b7feef Mrdn 2y ago getPaginationRowModel: getPaginationRowModel(),
69 3b7feef Mrdn 2y ago getSortedRowModel: getSortedRowModel(),
70 3b7feef Mrdn 2y ago getFilteredRowModel: getFilteredRowModel(),
71 3b7feef Mrdn 2y ago onColumnVisibilityChange: setColumnVisibility,
72 3b7feef Mrdn 2y ago state: {
73 3b7feef Mrdn 2y ago sorting,
74 3b7feef Mrdn 2y ago columnFilters,
75 3b7feef Mrdn 2y ago columnVisibility,
76 3b7feef Mrdn 2y ago },
77 3b7feef Mrdn 2y ago })
78 3b7feef Mrdn 2y ago const { t } = useTranslation();
79 3b7feef Mrdn 2y ago return (
80 3b7feef Mrdn 2y ago <div>
81 3b7feef Mrdn 2y ago <div className="flex justify-between items-center py-4">
82 3b7feef Mrdn 2y ago <Input
83 3b7feef Mrdn 2y ago placeholder={t('table.filter-placeholder', { name: filteredColumn })}
84 3b7feef Mrdn 2y ago value={(table.getColumn(filteredColumn)?.getFilterValue() as string) ?? ""}
85 3b7feef Mrdn 2y ago onChange={(event) =>
86 3b7feef Mrdn 2y ago table.getColumn(filteredColumn)?.setFilterValue(event.target.value)
87 3b7feef Mrdn 2y ago }
88 3b7feef Mrdn 2y ago className="max-w-sm"
89 3b7feef Mrdn 2y ago />
90 3b7feef Mrdn 2y ago <div className="flex items-center">
91 3b7feef Mrdn 2y ago <Popover >
92 3b7feef Mrdn 2y ago <PopoverTrigger asChild>
93 3b7feef Mrdn 2y ago <Button
94 3b7feef Mrdn 2y ago variant="outline"
95 3b7feef Mrdn 2y ago className="mr-2 ml-auto lg:flex"
96 3b7feef Mrdn 2y ago >
97 3b7feef Mrdn 2y ago <Server className="mr-2 w-4 h-4" />
98 3b7feef Mrdn 2y ago {t('inbounds')}
99 3b7feef Mrdn 2y ago </Button>
100 3b7feef Mrdn 2y ago </PopoverTrigger>
101 3b7feef Mrdn 2y ago <PopoverContent className="w-80 max-h-100">
102 3b7feef Mrdn 2y ago <ToggleGroup type="single" onValueChange={setSelectedInbound} defaultValue={selectedInbound} className="flex flex-col justify-center w-full h-full" >
103 3b7feef Mrdn 2y ago <ScrollArea className="w-full h-full">
104 3b7feef Mrdn 2y ago {inbounds.map((inbound) => {
105 3b7feef Mrdn 2y ago return <ToggleGroupItem className="px-0 w-full h-full" value={String(inbound.id)} id={String(inbound.id)}>
106 3b7feef Mrdn 2y ago <InboundOption inbound={inbound} />
107 3b7feef Mrdn 2y ago </ToggleGroupItem>
108 3b7feef Mrdn 2y ago })}
109 3b7feef Mrdn 2y ago </ScrollArea>
110 3b7feef Mrdn 2y ago </ToggleGroup>
111 3b7feef Mrdn 2y ago </PopoverContent>
112 3b7feef Mrdn 2y ago </Popover>
113 3b7feef Mrdn 2y ago <DataTableViewOptions table={table} />
114 3b7feef Mrdn 2y ago {onCreate && (<Button onClick={onCreate}>{t('create')}</Button>)}
115 3b7feef Mrdn 2y ago </div>
116 3b7feef Mrdn 2y ago </div>
117 3b7feef Mrdn 2y ago <div className="rounded-md border">
118 3b7feef Mrdn 2y ago <div>
119 3b7feef Mrdn 2y ago <Table>
120 3b7feef Mrdn 2y ago <TableHeader>
121 3b7feef Mrdn 2y ago {table.getHeaderGroups().map((headerGroup) => (
122 3b7feef Mrdn 2y ago <TableRow key={headerGroup.id}>
123 3b7feef Mrdn 2y ago {headerGroup.headers.map((header) => {
124 3b7feef Mrdn 2y ago return (
125 3b7feef Mrdn 2y ago <TableHead key={header.id}>
126 3b7feef Mrdn 2y ago {header.isPlaceholder
127 3b7feef Mrdn 2y ago ? null
128 3b7feef Mrdn 2y ago : flexRender(
129 3b7feef Mrdn 2y ago header.column.columnDef.header,
130 3b7feef Mrdn 2y ago header.getContext()
131 3b7feef Mrdn 2y ago )}
132 3b7feef Mrdn 2y ago </TableHead>
133 3b7feef Mrdn 2y ago )
134 3b7feef Mrdn 2y ago })}
135 3b7feef Mrdn 2y ago </TableRow>
136 3b7feef Mrdn 2y ago ))}
137 3b7feef Mrdn 2y ago </TableHeader>
138 3b7feef Mrdn 2y ago <TableBody>
139 3b7feef Mrdn 2y ago {table.getRowModel().rows?.length ? (
140 3b7feef Mrdn 2y ago table.getRowModel().rows.map((row) => (
141 3b7feef Mrdn 2y ago <TableRow
142 3b7feef Mrdn 2y ago key={row.id}
143 3b7feef Mrdn 2y ago data-state={row.getIsSelected() && "selected"}
144 3b7feef Mrdn 2y ago onClick={() => onOpen !== undefined && onOpen(row.original)}
145 3b7feef Mrdn 2y ago >
146 3b7feef Mrdn 2y ago {row.getVisibleCells().map((cell) => (
147 3b7feef Mrdn 2y ago <TableCell key={cell.id}>
148 3b7feef Mrdn 2y ago {flexRender(cell.column.columnDef.cell, cell.getContext())}
149 3b7feef Mrdn 2y ago </TableCell>
150 3b7feef Mrdn 2y ago ))}
151 3b7feef Mrdn 2y ago </TableRow>
152 3b7feef Mrdn 2y ago ))
153 3b7feef Mrdn 2y ago ) : (
154 3b7feef Mrdn 2y ago <TableRow>
155 3b7feef Mrdn 2y ago <TableCell colSpan={columns.length} className="h-24 text-center">
156 3b7feef Mrdn 2y ago {t('table.no-result')}
157 3b7feef Mrdn 2y ago </TableCell>
158 3b7feef Mrdn 2y ago </TableRow>
159 3b7feef Mrdn 2y ago )}
160 3b7feef Mrdn 2y ago </TableBody>
161 3b7feef Mrdn 2y ago </Table>
162 3b7feef Mrdn 2y ago
163 3b7feef Mrdn 2y ago </div>
164 3b7feef Mrdn 2y ago <DataTablePagination table={table} />
165 3b7feef Mrdn 2y ago </div>
166 3b7feef Mrdn 2y ago </div >
167 3b7feef Mrdn 2y ago )
168 3b7feef Mrdn 2y ago }