diff --git 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<TData, TValue> {
- columns: ColumnDef<TData, TValue>[]
+ columns: ColumnDef<TData, TValue>[];
data: {
- entity: TData[]
- pageCount: number
- }
- sorting: UseSortingReturn
- visibility: UseVisibilityReturn
- rowSelection?: UseRowSelectionReturn
- manualSorting?: boolean
- pageIndex: number
- pageSize: number
- onPaginationChange: OnChangeFn<PaginationState>
+ entity: TData[];
+ pageCount: number;
+ };
+ sorting: UseSortingReturn;
+ visibility: UseVisibilityReturn;
+ rowSelection?: UseRowSelectionReturn;
+ manualSorting?: boolean;
+ pageIndex: number;
+ pageSize: number;
+ onPaginationChange: OnChangeFn<PaginationState>;
}
-export const useEntityTable = <TData, TValue>(
- {
- columns,
- data,
- sorting,
- manualSorting = false,
- visibility,
- rowSelection,
- pageIndex,
- pageSize,
- onPaginationChange
- }: UseEntityTableProps<TData, TValue>
-) => useReactTable({
- data: data.entity,
+export const useEntityTable = <TData, TValue>({
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<TData, TValue>) =>
+ 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
@@ -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 (
<div className="flex justify-between items-center p-2 w-full">
- {table.options.onRowSelectionChange &&
+ {table.options.onRowSelectionChange && (
<div className="flex-1 text-sm text-muted-foreground">
{table.getFilteredSelectedRowModel().rows.length} {"/"}
- {table.getFilteredRowModel().rows.length} {t('table.selected')}
- </div>}
+ {table.getFilteredRowModel().rows.length} {t("table.selected")}
+ </div>
+ )}
<div className="flex justify-between items-center space-x-6 w-full lg:space-x-8">
<div className="flex items-center space-x-2">
- <p className="text-sm font-medium">{t('table.row-per-page')}</p>
+ <p className="text-sm font-medium">{t("table.row-per-page")}</p>
<Select
value={`${table.getState().pagination.pageSize}`}
onValueChange={(value) => {
- table.setPageSize(Number(value))
- table.setPageIndex(1)
+ table.setPageSize(Number(value));
+ table.setPageIndex(1);
}}
>
<SelectTrigger className="h-8 w-[70px]">
@@ -93,5 +98,5 @@ export function DataTablePagination() {
</div>
</div>
</div>
- )
+ );
}