gitscope
/
← marzneshin / dashboard/src/components/data-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/data-table/table.tsx · v0.3.0-alpha3
Source
1 b15ff05 Mrdn 2y ago import {
2 b15ff05 Mrdn 2y ago ColumnDef,
3 b15ff05 Mrdn 2y ago ColumnFiltersState,
4 3b7feef Mrdn 2y ago OnChangeFn,
5 3b7feef Mrdn 2y ago RowSelectionState,
6 b15ff05 Mrdn 2y ago SortingState,
7 b15ff05 Mrdn 2y ago VisibilityState,
8 b15ff05 Mrdn 2y ago flexRender,
9 b15ff05 Mrdn 2y ago getCoreRowModel,
10 b15ff05 Mrdn 2y ago getFilteredRowModel,
11 b15ff05 Mrdn 2y ago getPaginationRowModel,
12 b15ff05 Mrdn 2y ago getSortedRowModel,
13 b15ff05 Mrdn 2y ago useReactTable,
14 b15ff05 Mrdn 2y ago } from "@tanstack/react-table"
15 b15ff05 Mrdn 2y ago
16 b15ff05 Mrdn 2y ago import {
17 b15ff05 Mrdn 2y ago Button,
18 b15ff05 Mrdn 2y ago Input,
19 b15ff05 Mrdn 2y ago Table,
20 b15ff05 Mrdn 2y ago TableBody,
21 b15ff05 Mrdn 2y ago TableCell,
22 b15ff05 Mrdn 2y ago TableHead,
23 b15ff05 Mrdn 2y ago TableHeader,
24 b15ff05 Mrdn 2y ago TableRow,
25 b15ff05 Mrdn 2y ago } from "@marzneshin/components"
26 3b7feef Mrdn 2y ago
27 b15ff05 Mrdn 2y ago import { useTranslation } from "react-i18next"
28 b15ff05 Mrdn 2y ago import { DataTablePagination } from "./pagination"
29 b15ff05 Mrdn 2y ago import { useState } from "react"
30 b15ff05 Mrdn 2y ago import { DataTableViewOptions } from "./table-view-option"
31 b15ff05 Mrdn 2y ago
32 b15ff05 Mrdn 2y ago interface DataTableProps<TData, TValue> {
33 b15ff05 Mrdn 2y ago columns: ColumnDef<TData, TValue>[]
34 b15ff05 Mrdn 2y ago data: TData[]
35 b15ff05 Mrdn 2y ago filteredColumn: string
36 b15ff05 Mrdn 2y ago onCreate?: () => void
37 b15ff05 Mrdn 2y ago onOpen?: (object: TData) => void
38 3b7feef Mrdn 2y ago setSelectedRow?: OnChangeFn<RowSelectionState> | undefined
39 3b7feef Mrdn 2y ago selectedRow?: RowSelectionState | undefined
40 b15ff05 Mrdn 2y ago }
41 b15ff05 Mrdn 2y ago
42 b15ff05 Mrdn 2y ago export function DataTable<TData, TValue>({
43 b15ff05 Mrdn 2y ago columns,
44 b15ff05 Mrdn 2y ago data,
45 b15ff05 Mrdn 2y ago onCreate,
46 b15ff05 Mrdn 2y ago onOpen,
47 3b7feef Mrdn 2y ago filteredColumn,
48 3b7feef Mrdn 2y ago selectedRow,
49 3b7feef Mrdn 2y ago setSelectedRow,
50 b15ff05 Mrdn 2y ago }: DataTableProps<TData, TValue>) {
51 b15ff05 Mrdn 2y ago const [sorting, setSorting] = useState<SortingState>([])
52 b15ff05 Mrdn 2y ago const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>(
53 b15ff05 Mrdn 2y ago []
54 b15ff05 Mrdn 2y ago )
55 b15ff05 Mrdn 2y ago const [columnVisibility, setColumnVisibility] =
56 b15ff05 Mrdn 2y ago useState<VisibilityState>({})
57 b15ff05 Mrdn 2y ago const table = useReactTable({
58 b15ff05 Mrdn 2y ago data,
59 b15ff05 Mrdn 2y ago columns,
60 b15ff05 Mrdn 2y ago onSortingChange: setSorting,
61 b15ff05 Mrdn 2y ago onColumnFiltersChange: setColumnFilters,
62 b15ff05 Mrdn 2y ago getCoreRowModel: getCoreRowModel(),
63 b15ff05 Mrdn 2y ago getPaginationRowModel: getPaginationRowModel(),
64 b15ff05 Mrdn 2y ago getSortedRowModel: getSortedRowModel(),
65 b15ff05 Mrdn 2y ago getFilteredRowModel: getFilteredRowModel(),
66 b15ff05 Mrdn 2y ago onColumnVisibilityChange: setColumnVisibility,
67 3b7feef Mrdn 2y ago onRowSelectionChange: setSelectedRow,
68 b15ff05 Mrdn 2y ago state: {
69 b15ff05 Mrdn 2y ago sorting,
70 b15ff05 Mrdn 2y ago columnFilters,
71 b15ff05 Mrdn 2y ago columnVisibility,
72 3b7feef Mrdn 2y ago rowSelection: selectedRow !== undefined ? selectedRow : {},
73 b15ff05 Mrdn 2y ago },
74 b15ff05 Mrdn 2y ago })
75 b15ff05 Mrdn 2y ago const { t } = useTranslation();
76 b15ff05 Mrdn 2y ago return (
77 b15ff05 Mrdn 2y ago <div>
78 b15ff05 Mrdn 2y ago <div className="flex items-center py-4">
79 b15ff05 Mrdn 2y ago <Input
80 b15ff05 Mrdn 2y ago placeholder={t('table.filter-placeholder', { name: filteredColumn })}
81 b15ff05 Mrdn 2y ago value={(table.getColumn(filteredColumn)?.getFilterValue() as string) ?? ""}
82 b15ff05 Mrdn 2y ago onChange={(event) =>
83 b15ff05 Mrdn 2y ago table.getColumn(filteredColumn)?.setFilterValue(event.target.value)
84 b15ff05 Mrdn 2y ago }
85 b15ff05 Mrdn 2y ago className="max-w-sm"
86 b15ff05 Mrdn 2y ago />
87 b15ff05 Mrdn 2y ago <DataTableViewOptions table={table} />
88 b15ff05 Mrdn 2y ago {onCreate && (<Button onClick={onCreate}>{t('create')}</Button>)}
89 b15ff05 Mrdn 2y ago </div>
90 b15ff05 Mrdn 2y ago <div className="rounded-md border">
91 b15ff05 Mrdn 2y ago <Table>
92 b15ff05 Mrdn 2y ago <TableHeader>
93 b15ff05 Mrdn 2y ago {table.getHeaderGroups().map((headerGroup) => (
94 b15ff05 Mrdn 2y ago <TableRow key={headerGroup.id}>
95 b15ff05 Mrdn 2y ago {headerGroup.headers.map((header) => {
96 b15ff05 Mrdn 2y ago return (
97 b15ff05 Mrdn 2y ago <TableHead key={header.id}>
98 b15ff05 Mrdn 2y ago {header.isPlaceholder
99 b15ff05 Mrdn 2y ago ? null
100 b15ff05 Mrdn 2y ago : flexRender(
101 b15ff05 Mrdn 2y ago header.column.columnDef.header,
102 b15ff05 Mrdn 2y ago header.getContext()
103 b15ff05 Mrdn 2y ago )}
104 b15ff05 Mrdn 2y ago </TableHead>
105 b15ff05 Mrdn 2y ago )
106 b15ff05 Mrdn 2y ago })}
107 b15ff05 Mrdn 2y ago </TableRow>
108 b15ff05 Mrdn 2y ago ))}
109 b15ff05 Mrdn 2y ago </TableHeader>
110 b15ff05 Mrdn 2y ago <TableBody>
111 b15ff05 Mrdn 2y ago {table.getRowModel().rows?.length ? (
112 b15ff05 Mrdn 2y ago table.getRowModel().rows.map((row) => (
113 b15ff05 Mrdn 2y ago <TableRow
114 b15ff05 Mrdn 2y ago key={row.id}
115 b15ff05 Mrdn 2y ago data-state={row.getIsSelected() && "selected"}
116 b15ff05 Mrdn 2y ago onClick={() => onOpen !== undefined && onOpen(row.original)}
117 b15ff05 Mrdn 2y ago >
118 b15ff05 Mrdn 2y ago {row.getVisibleCells().map((cell) => (
119 b15ff05 Mrdn 2y ago <TableCell key={cell.id}>
120 b15ff05 Mrdn 2y ago {flexRender(cell.column.columnDef.cell, cell.getContext())}
121 b15ff05 Mrdn 2y ago </TableCell>
122 b15ff05 Mrdn 2y ago ))}
123 b15ff05 Mrdn 2y ago </TableRow>
124 b15ff05 Mrdn 2y ago ))
125 b15ff05 Mrdn 2y ago ) : (
126 b15ff05 Mrdn 2y ago <TableRow>
127 b15ff05 Mrdn 2y ago <TableCell colSpan={columns.length} className="h-24 text-center">
128 b15ff05 Mrdn 2y ago {t('table.no-result')}
129 b15ff05 Mrdn 2y ago </TableCell>
130 b15ff05 Mrdn 2y ago </TableRow>
131 b15ff05 Mrdn 2y ago )}
132 b15ff05 Mrdn 2y ago </TableBody>
133 b15ff05 Mrdn 2y ago </Table>
134 b15ff05 Mrdn 2y ago <DataTablePagination table={table} />
135 b15ff05 Mrdn 2y ago </div>
136 b15ff05 Mrdn 2y ago </div>
137 b15ff05 Mrdn 2y ago )
138 b15ff05 Mrdn 2y ago }