diff --git a/dashboard/src/libs/entity-table/components/table-pagination.tsx b/dashboard/src/libs/entity-table/components/table-pagination.tsx index 3bf04b5..6bf241e 100644 --- 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({ table }: { table: Table }) { const { t } = useTranslation(); + const { entityKey } = useEntityTableContext(); + const [,setRowPerPageLocal] = useLocalStorage(`marzneshin-table-row-per-page-${entityKey}`, 10); return (
@@ -36,6 +40,7 @@ export function DataTablePagination({ table }: { table: Table }) { 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 index 26edb4f..e581514 100644 --- 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 { + entityKey: string table: Table 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 index 65b6251..44949ae 100644 --- 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({ 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({ }); 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 index 6160dd4..e9441c9 100644 --- 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({ 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({ }); 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 index d0f3965..bad7798 100644 --- 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(`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 index 492a980..7ff65a3 100644 --- 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 = ({ 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 = ({ }); 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 index af1a5dc..56c99d1 100644 --- 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({ 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({ 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 (