gitscope
/
← marzneshin / dashboard/src/libs/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/libs/entity-table/components/table.tsx · master
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 7389ad0 Mardin 2y ago } from "@marzneshin/common/components";
14 4cebd65 Mardin 2y ago import { useTranslation } from "react-i18next";
15 7389ad0 Mardin 2y ago import { useEntityTableContext } from "@marzneshin/libs/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 7738ec1 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 7738ec1 Mardin 2y ago const Loading = () => (
70 7738ec1 Mardin 2y ago <>
71 7738ec1 Mardin 2y ago {Array.from({ length: 5 }).map((_, rowIndex) => (
72 7738ec1 Mardin 2y ago <TableRow key={`skeleton-row-${rowIndex}`} className="w-full">
73 7738ec1 Mardin 2y ago <TableCell className="h-12">
74 7738ec1 Mardin 2y ago <Skeleton className="w-full h-full" />
75 7738ec1 Mardin 2y ago </TableCell>
76 7738ec1 Mardin 2y ago <TableCell className="h-12">
77 7738ec1 Mardin 2y ago <Skeleton className="w-full h-full" />
78 7738ec1 Mardin 2y ago </TableCell>
79 7738ec1 Mardin 2y ago <TableCell className="h-12">
80 7738ec1 Mardin 2y ago <Skeleton className="w-full h-full" />
81 7738ec1 Mardin 2y ago </TableCell>
82 7738ec1 Mardin 2y ago <TableCell className="h-12">
83 7738ec1 Mardin 2y ago <Skeleton className="w-full h-full" />
84 7738ec1 Mardin 2y ago </TableCell>
85 7738ec1 Mardin 2y ago <TableCell className="h-12">
86 7738ec1 Mardin 2y ago <Skeleton className="w-full h-full" />
87 7738ec1 Mardin 2y ago </TableCell>
88 7738ec1 Mardin 2y ago </TableRow>
89 7738ec1 Mardin 2y ago ))}
90 7738ec1 Mardin 2y ago </>
91 7738ec1 Mardin 2y ago );
92 7738ec1 Mardin 2y ago
93 4cebd65 Mardin 2y ago export function EntityDataTable<TData, TValue>({
94 4cebd65 Mardin 2y ago columns,
95 4cebd65 Mardin 2y ago onRowClick,
96 4cebd65 Mardin 2y ago }: Readonly<DataTableProps<TData, TValue>>) {
97 4cebd65 Mardin 2y ago const { isLoading } = useEntityTableContext();
98 4cebd65 Mardin 2y ago
99 4cebd65 Mardin 2y ago return (
100 4cebd65 Mardin 2y ago <Table className="w-full">
101 4cebd65 Mardin 2y ago <TableHeader> <Headers /> </TableHeader>
102 4cebd65 Mardin 2y ago <TableBody>
103 4cebd65 Mardin 2y ago {isLoading ? <Loading /> : <Rows onRowClick={onRowClick} columns={columns} />}
104 4cebd65 Mardin 2y ago </TableBody>
105 4cebd65 Mardin 2y ago </Table>
106 4cebd65 Mardin 2y ago );
107 4cebd65 Mardin 2y ago }