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