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