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