gitscope
/
← marzneshin / dashboard/src/components/entity-table/table.tsx / blame
Files Commits 446 Branches 1 Tags 43 Markers 4 README License
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/components/entity-table/table.tsx · v0.3.0-alpha4
Source
1 578311c Mrdn 2y ago import {
2 578311c Mrdn 2y ago ColumnDef,
3 578311c Mrdn 2y ago flexRender,
4 578311c Mrdn 2y ago } from "@tanstack/react-table"
5 578311c Mrdn 2y ago
6 578311c Mrdn 2y ago import {
7 578311c Mrdn 2y ago Table,
8 578311c Mrdn 2y ago TableBody,
9 578311c Mrdn 2y ago TableCell,
10 578311c Mrdn 2y ago TableHead,
11 578311c Mrdn 2y ago TableHeader,
12 578311c Mrdn 2y ago TableRow,
13 578311c Mrdn 2y ago } from "@marzneshin/components"
14 578311c Mrdn 2y ago
15 578311c Mrdn 2y ago import { useTranslation } from "react-i18next"
16 578311c Mrdn 2y ago import { useEntityTableContext } from "./entity-table-provider"
17 6b38fe9 Mrdn 2y ago import { LoaderCircle } from "lucide-react"
18 578311c Mrdn 2y ago
19 578311c Mrdn 2y ago interface DataTableProps<TData, TValue> {
20 578311c Mrdn 2y ago columns: ColumnDef<TData, TValue>[]
21 578311c Mrdn 2y ago onRowClick?: (object: TData) => void
22 578311c Mrdn 2y ago }
23 578311c Mrdn 2y ago
24 578311c Mrdn 2y ago export function EntityDataTable<TData, TValue>({
25 578311c Mrdn 2y ago columns,
26 578311c Mrdn 2y ago onRowClick,
27 578311c Mrdn 2y ago }: DataTableProps<TData, TValue>) {
28 578311c Mrdn 2y ago const { t } = useTranslation();
29 6b38fe9 Mrdn 2y ago const { table, isLoading } = useEntityTableContext()
30 578311c Mrdn 2y ago return (
31 578311c Mrdn 2y ago <Table>
32 578311c Mrdn 2y ago <TableHeader>
33 578311c Mrdn 2y ago {table.getHeaderGroups().map((headerGroup) => (
34 578311c Mrdn 2y ago <TableRow key={headerGroup.id}>
35 578311c Mrdn 2y ago {headerGroup.headers.map((header) => {
36 578311c Mrdn 2y ago return (
37 578311c Mrdn 2y ago <TableHead key={header.id}>
38 578311c Mrdn 2y ago {header.isPlaceholder
39 578311c Mrdn 2y ago ? null
40 578311c Mrdn 2y ago : flexRender(
41 578311c Mrdn 2y ago header.column.columnDef.header,
42 578311c Mrdn 2y ago header.getContext()
43 578311c Mrdn 2y ago )}
44 578311c Mrdn 2y ago </TableHead>
45 578311c Mrdn 2y ago )
46 578311c Mrdn 2y ago })}
47 578311c Mrdn 2y ago </TableRow>
48 578311c Mrdn 2y ago ))}
49 578311c Mrdn 2y ago </TableHeader>
50 578311c Mrdn 2y ago <TableBody>
51 6b38fe9 Mrdn 2y ago {isLoading ? (
52 6b38fe9 Mrdn 2y ago <TableRow className="w-full">
53 578311c Mrdn 2y ago <TableCell colSpan={columns.length} className="h-24 text-center">
54 6b38fe9 Mrdn 2y ago <LoaderCircle className="w-5 h-5 animate-spin text-primary" />
55 578311c Mrdn 2y ago </TableCell>
56 578311c Mrdn 2y ago </TableRow>
57 6b38fe9 Mrdn 2y ago ) : (
58 6b38fe9 Mrdn 2y ago table.getRowModel().rows?.length ? (
59 6b38fe9 Mrdn 2y ago table.getRowModel().rows.map((row) => (
60 6b38fe9 Mrdn 2y ago <TableRow
61 6b38fe9 Mrdn 2y ago key={row.id}
62 6b38fe9 Mrdn 2y ago data-state={row.getIsSelected() && "selected"}
63 6b38fe9 Mrdn 2y ago data-testid={"entity-table-row"}
64 6b38fe9 Mrdn 2y ago onClick={() => onRowClick && onRowClick(row.original)}
65 6b38fe9 Mrdn 2y ago >
66 6b38fe9 Mrdn 2y ago {row.getVisibleCells().map((cell) => (
67 6b38fe9 Mrdn 2y ago <TableCell key={cell.id}>
68 6b38fe9 Mrdn 2y ago {flexRender(cell.column.columnDef.cell, cell.getContext())}
69 6b38fe9 Mrdn 2y ago </TableCell>
70 6b38fe9 Mrdn 2y ago ))}
71 6b38fe9 Mrdn 2y ago </TableRow>
72 6b38fe9 Mrdn 2y ago ))
73 6b38fe9 Mrdn 2y ago ) : (
74 6b38fe9 Mrdn 2y ago <TableRow>
75 6b38fe9 Mrdn 2y ago <TableCell colSpan={columns.length} className="h-24 text-center">
76 6b38fe9 Mrdn 2y ago {t('table.no-result')}
77 6b38fe9 Mrdn 2y ago </TableCell>
78 6b38fe9 Mrdn 2y ago </TableRow>
79 6b38fe9 Mrdn 2y ago )
80 578311c Mrdn 2y ago )}
81 578311c Mrdn 2y ago </TableBody>
82 578311c Mrdn 2y ago </Table>
83 578311c Mrdn 2y ago )
84 578311c Mrdn 2y ago }