gitscope
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/components/entity-table/table.tsx · v0.3.0-alpha3
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 578311c Mrdn 2y ago
18 578311c Mrdn 2y ago interface DataTableProps<TData, TValue> {
19 578311c Mrdn 2y ago columns: ColumnDef<TData, TValue>[]
20 578311c Mrdn 2y ago onRowClick?: (object: TData) => void
21 578311c Mrdn 2y ago }
22 578311c Mrdn 2y ago
23 578311c Mrdn 2y ago export function EntityDataTable<TData, TValue>({
24 578311c Mrdn 2y ago columns,
25 578311c Mrdn 2y ago onRowClick,
26 578311c Mrdn 2y ago }: DataTableProps<TData, TValue>) {
27 578311c Mrdn 2y ago const { t } = useTranslation();
28 578311c Mrdn 2y ago const { table } = useEntityTableContext()
29 578311c Mrdn 2y ago return (
30 578311c Mrdn 2y ago <Table>
31 578311c Mrdn 2y ago <TableHeader>
32 578311c Mrdn 2y ago {table.getHeaderGroups().map((headerGroup) => (
33 578311c Mrdn 2y ago <TableRow key={headerGroup.id}>
34 578311c Mrdn 2y ago {headerGroup.headers.map((header) => {
35 578311c Mrdn 2y ago return (
36 578311c Mrdn 2y ago <TableHead key={header.id}>
37 578311c Mrdn 2y ago {header.isPlaceholder
38 578311c Mrdn 2y ago ? null
39 578311c Mrdn 2y ago : flexRender(
40 578311c Mrdn 2y ago header.column.columnDef.header,
41 578311c Mrdn 2y ago header.getContext()
42 578311c Mrdn 2y ago )}
43 578311c Mrdn 2y ago </TableHead>
44 578311c Mrdn 2y ago )
45 578311c Mrdn 2y ago })}
46 578311c Mrdn 2y ago </TableRow>
47 578311c Mrdn 2y ago ))}
48 578311c Mrdn 2y ago </TableHeader>
49 578311c Mrdn 2y ago <TableBody>
50 578311c Mrdn 2y ago {table.getRowModel().rows?.length ? (
51 578311c Mrdn 2y ago table.getRowModel().rows.map((row) => (
52 578311c Mrdn 2y ago <TableRow
53 578311c Mrdn 2y ago key={row.id}
54 578311c Mrdn 2y ago data-state={row.getIsSelected() && "selected"}
55 d21d2e2 Mrdn 2y ago data-testid={"entity-table-row"}
56 578311c Mrdn 2y ago onClick={() => onRowClick && onRowClick(row.original)}
57 578311c Mrdn 2y ago >
58 578311c Mrdn 2y ago {row.getVisibleCells().map((cell) => (
59 578311c Mrdn 2y ago <TableCell key={cell.id}>
60 578311c Mrdn 2y ago {flexRender(cell.column.columnDef.cell, cell.getContext())}
61 578311c Mrdn 2y ago </TableCell>
62 578311c Mrdn 2y ago ))}
63 578311c Mrdn 2y ago </TableRow>
64 578311c Mrdn 2y ago ))
65 578311c Mrdn 2y ago ) : (
66 578311c Mrdn 2y ago <TableRow>
67 578311c Mrdn 2y ago <TableCell colSpan={columns.length} className="h-24 text-center">
68 578311c Mrdn 2y ago {t('table.no-result')}
69 578311c Mrdn 2y ago </TableCell>
70 578311c Mrdn 2y ago </TableRow>
71 578311c Mrdn 2y ago )}
72 578311c Mrdn 2y ago </TableBody>
73 578311c Mrdn 2y ago </Table>
74 578311c Mrdn 2y ago )
75 578311c Mrdn 2y ago }