gitscope
/
← marzneshin / dashboard/src/libs/entity-table/components/data-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/data-table.tsx · v0.7.0
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 getCoreRowModel,
9 b15ff05 Mrdn 2y ago getFilteredRowModel,
10 b15ff05 Mrdn 2y ago getPaginationRowModel,
11 b15ff05 Mrdn 2y ago getSortedRowModel,
12 b15ff05 Mrdn 2y ago useReactTable,
13 b15ff05 Mrdn 2y ago } from "@tanstack/react-table"
14 b15ff05 Mrdn 2y ago
15 b15ff05 Mrdn 2y ago import {
16 b15ff05 Mrdn 2y ago Button,
17 7389ad0 Mardin 2y ago } from "@marzneshin/common/components"
18 3b7feef Mrdn 2y ago
19 b15ff05 Mrdn 2y ago import { useTranslation } from "react-i18next"
20 65bbe9d Mardin 2y ago import { DataTablePagination } from "./table-pagination"
21 b15ff05 Mrdn 2y ago import { useState } from "react"
22 b15ff05 Mrdn 2y ago import { DataTableViewOptions } from "./table-view-option"
23 7738ec1 Mardin 2y ago import { TableSearch } from "./table-filtering"
24 7738ec1 Mardin 2y ago import { EntityDataTable } from "./table";
25 b15ff05 Mrdn 2y ago
26 b15ff05 Mrdn 2y ago interface DataTableProps<TData, TValue> {
27 b15ff05 Mrdn 2y ago columns: ColumnDef<TData, TValue>[]
28 b15ff05 Mrdn 2y ago data: TData[]
29 b15ff05 Mrdn 2y ago filteredColumn: string
30 b15ff05 Mrdn 2y ago onCreate?: () => void
31 b15ff05 Mrdn 2y ago onOpen?: (object: TData) => void
32 3b7feef Mrdn 2y ago setSelectedRow?: OnChangeFn<RowSelectionState> | undefined
33 3b7feef Mrdn 2y ago selectedRow?: RowSelectionState | undefined
34 b15ff05 Mrdn 2y ago }
35 b15ff05 Mrdn 2y ago
36 b15ff05 Mrdn 2y ago export function DataTable<TData, TValue>({
37 b15ff05 Mrdn 2y ago columns,
38 b15ff05 Mrdn 2y ago data,
39 b15ff05 Mrdn 2y ago onCreate,
40 b15ff05 Mrdn 2y ago onOpen,
41 3b7feef Mrdn 2y ago selectedRow,
42 3b7feef Mrdn 2y ago setSelectedRow,
43 b15ff05 Mrdn 2y ago }: DataTableProps<TData, TValue>) {
44 b15ff05 Mrdn 2y ago const [sorting, setSorting] = useState<SortingState>([])
45 b15ff05 Mrdn 2y ago const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>(
46 b15ff05 Mrdn 2y ago []
47 b15ff05 Mrdn 2y ago )
48 b15ff05 Mrdn 2y ago const [columnVisibility, setColumnVisibility] =
49 b15ff05 Mrdn 2y ago useState<VisibilityState>({})
50 b15ff05 Mrdn 2y ago const table = useReactTable({
51 b15ff05 Mrdn 2y ago data,
52 b15ff05 Mrdn 2y ago columns,
53 b15ff05 Mrdn 2y ago onSortingChange: setSorting,
54 b15ff05 Mrdn 2y ago onColumnFiltersChange: setColumnFilters,
55 b15ff05 Mrdn 2y ago getCoreRowModel: getCoreRowModel(),
56 b15ff05 Mrdn 2y ago getPaginationRowModel: getPaginationRowModel(),
57 b15ff05 Mrdn 2y ago getSortedRowModel: getSortedRowModel(),
58 b15ff05 Mrdn 2y ago getFilteredRowModel: getFilteredRowModel(),
59 b15ff05 Mrdn 2y ago onColumnVisibilityChange: setColumnVisibility,
60 3b7feef Mrdn 2y ago onRowSelectionChange: setSelectedRow,
61 b15ff05 Mrdn 2y ago state: {
62 b15ff05 Mrdn 2y ago sorting,
63 b15ff05 Mrdn 2y ago columnFilters,
64 b15ff05 Mrdn 2y ago columnVisibility,
65 3b7feef Mrdn 2y ago rowSelection: selectedRow !== undefined ? selectedRow : {},
66 b15ff05 Mrdn 2y ago },
67 b15ff05 Mrdn 2y ago })
68 b15ff05 Mrdn 2y ago const { t } = useTranslation();
69 b15ff05 Mrdn 2y ago return (
70 b15ff05 Mrdn 2y ago <div>
71 b15ff05 Mrdn 2y ago <div className="flex items-center py-4">
72 7738ec1 Mardin 2y ago <TableSearch />
73 b15ff05 Mrdn 2y ago <DataTableViewOptions table={table} />
74 b15ff05 Mrdn 2y ago {onCreate && (<Button onClick={onCreate}>{t('create')}</Button>)}
75 b15ff05 Mrdn 2y ago </div>
76 b15ff05 Mrdn 2y ago <div className="rounded-md border">
77 7738ec1 Mardin 2y ago <EntityDataTable columns={columns} onRowClick={onOpen} />
78 b15ff05 Mrdn 2y ago <DataTablePagination table={table} />
79 b15ff05 Mrdn 2y ago </div>
80 b15ff05 Mrdn 2y ago </div>
81 b15ff05 Mrdn 2y ago )
82 b15ff05 Mrdn 2y ago }