diff --git a/dashboard/src/libs/entity-table/components/table-pagination.tsx b/dashboard/src/libs/entity-table/components/table-pagination.tsx
@@ -14,9 +14,13 @@ import {
} from "@marzneshin/common/components";
import { useTranslation } from "react-i18next";
import { Table } from "@tanstack/react-table"
+import { useLocalStorage } from "@uidotdev/usehooks";
+import { useEntityTableContext } from "../contexts";
export function DataTablePagination<TData>({ table }: { table: Table<TData> }) {
const { t } = useTranslation();
+ const { entityKey } = useEntityTableContext();
+ const [,setRowPerPageLocal] = useLocalStorage<number>(`marzneshin-table-row-per-page-${entityKey}`, 10);
return (
<div className="flex justify-between items-center p-2 w-full">
@@ -36,6 +40,7 @@ export function DataTablePagination<TData>({ table }: { table: Table<TData> }) {
onValueChange={(value) => {
table.setPageSize(Number(value));
table.setPageIndex(1);
+ setRowPerPageLocal(Number(value));
}}
aria-labelledby="rows-per-page-label"
>
diff --git a/dashboard/src/libs/entity-table/contexts/entity-table-provider.tsx b/dashboard/src/libs/entity-table/contexts/entity-table-provider.tsx
@@ -3,6 +3,7 @@ import { UseFiltersReturn, UsePrimaryFilterReturn } from "../hooks";
import { Table } from "@tanstack/react-table";
interface EntityTableContextProps<TData> {
+ entityKey: string
table: Table<TData>
data: TData[]
primaryFilter: UsePrimaryFilterReturn
diff --git a/dashboard/src/libs/entity-table/double-entity-table.tsx b/dashboard/src/libs/entity-table/double-entity-table.tsx
@@ -45,7 +45,7 @@ export function DoubleEntityTable<T>({
const filters = useFilters();
const sorting = useSorting();
const visibility = useVisibility();
- const { onPaginationChange, pageIndex, pageSize } = usePagination();
+ const { onPaginationChange, pageIndex, pageSize } = usePagination({ entityKey });
const query: DoubleEntityQueryKey = [
entityKey,
@@ -80,8 +80,8 @@ export function DoubleEntityTable<T>({
});
const contextValue = useMemo(
- () => ({ table, data: data.entities, primaryFilter: columnPrimaryFilter, filters, isLoading: isFetching }),
- [table, data.entities, filters, columnPrimaryFilter, isFetching],
+ () => ({ entityKey, table, data: data.entities, primaryFilter: columnPrimaryFilter, filters, isLoading: isFetching }),
+ [entityKey, table, data.entities, filters, columnPrimaryFilter, isFetching],
);
return (
diff --git a/dashboard/src/libs/entity-table/entity-table.tsx b/dashboard/src/libs/entity-table/entity-table.tsx
@@ -43,7 +43,7 @@ export function EntityTable<T>({
const filters = useFilters();
const sorting = useSorting();
const visibility = useVisibility();
- const { onPaginationChange, pageIndex, pageSize } = usePagination();
+ const { onPaginationChange, pageIndex, pageSize } = usePagination({ entityKey });
const query: QueryKey = [
entityKey,
@@ -77,8 +77,8 @@ export function EntityTable<T>({
});
const contextValue = useMemo(
- () => ({ table, data: data.entities, primaryFilter: columnPrimaryFilter, filters, isLoading: isFetching }),
- [table, data.entities, filters, columnPrimaryFilter, isFetching],
+ () => ({ entityKey, table, data: data.entities, primaryFilter: columnPrimaryFilter, filters, isLoading: isFetching }),
+ [entityKey, table, data.entities, filters, columnPrimaryFilter, isFetching],
);
return (
diff --git a/dashboard/src/libs/entity-table/hooks/use-pagination.ts b/dashboard/src/libs/entity-table/hooks/use-pagination.ts
@@ -1,8 +1,10 @@
import { useState } from "react";
+import { useLocalStorage } from "@uidotdev/usehooks";
-export function usePagination() {
+export function usePagination({ entityKey}: { entityKey: string }) {
+ const [rowPerPageLocal] = useLocalStorage<number>(`marzneshin-table-row-per-page-${entityKey}`, 10);
const [pagination, setPagination] = useState({
- pageSize: 10,
+ pageSize: rowPerPageLocal,
pageIndex: 1,
});
const { pageSize, pageIndex } = pagination;
diff --git a/dashboard/src/libs/entity-table/hooks/use-sidebar-entity-table.ts b/dashboard/src/libs/entity-table/hooks/use-sidebar-entity-table.ts
@@ -58,7 +58,7 @@ export const useSidebarEntityTable = <T, S>({
const sorting = useSorting();
const visibility = useVisibility();
const desktop = useScreenBreakpoint("md");
- const { onPaginationChange, pageIndex, pageSize } = usePagination();
+ const { onPaginationChange, pageIndex, pageSize } = usePagination({entityKey});
const query: SidebarQueryKey = [
entityKey,
@@ -95,8 +95,8 @@ export const useSidebarEntityTable = <T, S>({
});
const entityTableContextValue = useMemo(
- () => ({ table, data: data.entities, primaryFilter, filters, isLoading: isFetching }),
- [table, data.entities, filters, primaryFilter, isFetching],
+ () => ({ entityKey, table, data: data.entities, primaryFilter, filters, isLoading: isFetching }),
+ [entityKey, table, data.entities, filters, primaryFilter, isFetching],
);
const sidebarEntityTableContextValue = useMemo(
diff --git a/dashboard/src/libs/entity-table/selectable-entity-table.tsx b/dashboard/src/libs/entity-table/selectable-entity-table.tsx
@@ -49,7 +49,7 @@ export function SelectableEntityTable<T extends { id: number }>({
const visibility = useVisibility();
const { selectedRow, setSelectedRow } = rowSelection;
const { setSelectedEntity } = entitySelection;
- const { onPaginationChange, pageIndex, pageSize } = usePagination();
+ const { onPaginationChange, pageIndex, pageSize } = usePagination({ entityKey });
const query: SelectableQueryKey = [
parentEntityKey,
parentEntityId,
@@ -110,8 +110,8 @@ export function SelectableEntityTable<T extends { id: number }>({
const contextValue = useMemo(
- () => ({ table, data: data.entities, primaryFilter: columnPrimaryFilter, filters, isLoading: isFetching }),
- [table, data.entities, filters, columnPrimaryFilter, isFetching],
+ () => ({ entityKey, table, data: data.entities, primaryFilter: columnPrimaryFilter, filters, isLoading: isFetching }),
+ [entityKey, table, data.entities, filters, columnPrimaryFilter, isFetching],
);
return (