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 ac79957..148866a 100644 --- a/dashboard/src/components/entity-table/hooks/use-entity-table.ts +++ b/dashboard/src/components/entity-table/hooks/use-entity-table.ts @@ -1,63 +1,64 @@ import { - ColumnDef, - OnChangeFn, - PaginationState, getCoreRowModel, getPaginationRowModel, getSortedRowModel, - useReactTable + useReactTable, } from "@tanstack/react-table"; -import { +import type { + ColumnDef, + OnChangeFn, + PaginationState, +} from "@tanstack/react-table"; +import type { 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 = ( - { - columns, - data, - sorting, - manualSorting = false, - visibility, - rowSelection, - pageIndex, - pageSize, - onPaginationChange - }: UseEntityTableProps -) => useReactTable({ - data: data.entity, +export const useEntityTable = ({ columns, - manualPagination: true, - manualSorting, - pageCount: data.pageCount + 1, - autoResetPageIndex: false, + data, + sorting, + manualSorting = false, + visibility, + rowSelection, + pageIndex, + pageSize, onPaginationChange, - 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 : {}, - }, -}) +}: 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: 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 f9189fa..3fb9806 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,30 +11,35 @@ 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"; - -export interface DataTablePaginationProps { } +import { useEffect } from "react"; export function DataTablePagination() { const { t } = useTranslation(); - const { table } = useEntityTableContext() + const { table } = useEntityTableContext(); + + useEffect(() => { + if (table.getState().pagination.pageIndex === 1) table.setPageIndex(2); + }, [table]); + 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")}