diff --git a/dashboard/src/components/entity-table/hooks/use-entity-table.ts b/dashboard/src/components/entity-table/hooks/use-entity-table.ts index 4a31c8f..ac79957 100644 --- a/dashboard/src/components/entity-table/hooks/use-entity-table.ts +++ b/dashboard/src/components/entity-table/hooks/use-entity-table.ts @@ -1,64 +1,63 @@ import { - getCoreRowModel, - getPaginationRowModel, - getSortedRowModel, - useReactTable, -} from "@tanstack/react-table"; -import type { ColumnDef, OnChangeFn, PaginationState, + getCoreRowModel, + getPaginationRowModel, + getSortedRowModel, + useReactTable } from "@tanstack/react-table"; -import type { +import { UseRowSelectionReturn, UseSortingReturn, UseVisibilityReturn, } from "."; interface UseEntityTableProps { - columns: ColumnDef[]; + columns: ColumnDef[] data: { - entity: TData[]; - pageCount: number; - }; - sorting: UseSortingReturn; - visibility: UseVisibilityReturn; - rowSelection?: UseRowSelectionReturn; - manualSorting?: boolean; - pageIndex: number; - pageSize: number; - onPaginationChange: OnChangeFn; + entity: TData[] + pageCount: number + } + sorting: UseSortingReturn + visibility: UseVisibilityReturn + rowSelection?: UseRowSelectionReturn + manualSorting?: boolean + pageIndex: number + pageSize: number + onPaginationChange: OnChangeFn } -export const useEntityTable = ({ +export const useEntityTable = ( + { + columns, + data, + sorting, + manualSorting = false, + visibility, + rowSelection, + pageIndex, + pageSize, + onPaginationChange + }: UseEntityTableProps +) => useReactTable({ + data: data.entity, columns, - data, - sorting, - manualSorting = false, - visibility, - rowSelection, - pageIndex, - pageSize, + manualPagination: true, + manualSorting, + pageCount: data.pageCount + 1, + autoResetPageIndex: false, onPaginationChange, -}: UseEntityTableProps) => - useReactTable({ - data: data.entity, - columns, - manualPagination: true, - manualSorting, - pageCount: data.pageCount + 1, - autoResetPageIndex: false, - onPaginationChange, - onSortingChange: sorting.setSorting, - getCoreRowModel: getCoreRowModel(), - getPaginationRowModel: getPaginationRowModel(), - getSortedRowModel: getSortedRowModel(), - onColumnVisibilityChange: visibility.setColumnVisibility, - onRowSelectionChange: rowSelection?.setSelectedRow, - state: { - sorting: sorting.sorting, - columnVisibility: visibility.columnVisibility, - pagination: { pageIndex: pageIndex - 1, pageSize }, - rowSelection: rowSelection ? rowSelection.selectedRow : {}, - }, - }); + onSortingChange: sorting.setSorting, + getCoreRowModel: getCoreRowModel(), + getPaginationRowModel: getPaginationRowModel(), + getSortedRowModel: getSortedRowModel(), + onColumnVisibilityChange: visibility.setColumnVisibility, + onRowSelectionChange: rowSelection && rowSelection.setSelectedRow, + state: { + sorting: sorting.sorting, + columnVisibility: visibility.columnVisibility, + pagination: { pageIndex: pageIndex - 1, pageSize }, + rowSelection: rowSelection ? rowSelection.selectedRow : {}, + }, +}) diff --git a/dashboard/src/components/entity-table/table-pagination.tsx b/dashboard/src/components/entity-table/table-pagination.tsx index eef3948..f9189fa 100644 --- a/dashboard/src/components/entity-table/table-pagination.tsx +++ b/dashboard/src/components/entity-table/table-pagination.tsx @@ -3,7 +3,7 @@ import { ChevronRightIcon, DoubleArrowLeftIcon, DoubleArrowRightIcon, -} from "@radix-ui/react-icons"; +} from "@radix-ui/react-icons" import { Button, Select, @@ -11,35 +11,30 @@ import { SelectItem, SelectTrigger, SelectValue, -} from "@marzneshin/components"; -import { useTranslation } from "react-i18next"; +} from "@marzneshin/components" +import { useTranslation } from "react-i18next" import { useEntityTableContext } from "./entity-table-provider"; -import { useEffect } from "react"; + +export interface DataTablePaginationProps { } export function DataTablePagination() { const { t } = useTranslation(); - const { table } = useEntityTableContext(); - - useEffect(() => { - if (table.getState().pagination.pageIndex === 0) table.setPageIndex(1); - }, [table]); - + const { table } = useEntityTableContext() return (
- {table.options.onRowSelectionChange && ( + {table.options.onRowSelectionChange &&
{table.getFilteredSelectedRowModel().rows.length} {"/"} - {table.getFilteredRowModel().rows.length} {t("table.selected")} -
- )} + {table.getFilteredRowModel().rows.length} {t('table.selected')} +
}
-

{t("table.row-per-page")}

+

{t('table.row-per-page')}