diff --git a/rsconcept/frontend/src/components/DataTable/DataTable.tsx b/rsconcept/frontend/src/components/DataTable/DataTable.tsx index a7f4d0d8..71dd7647 100644 --- a/rsconcept/frontend/src/components/DataTable/DataTable.tsx +++ b/rsconcept/frontend/src/components/DataTable/DataTable.tsx @@ -1,7 +1,7 @@ 'use client'; 'use no memo'; -import { useMemo, useState } from 'react'; +import { useCallback, useMemo, useState } from 'react'; import { type ColumnSort, createColumnHelper, @@ -13,6 +13,7 @@ import { type RowSelectionState, type SortingState, type TableOptions, + type Updater, useReactTable, type VisibilityState } from '@tanstack/react-table'; @@ -148,6 +149,19 @@ export function DataTable({ pageSize: paginationPerPage }); + const handleChangePagination = useCallback( + (updater: Updater) => { + setPagination(prev => { + const resolvedValue = typeof updater === 'function' ? updater(prev) : updater; + if (onChangePaginationOption && prev.pageSize !== resolvedValue.pageSize) { + onChangePaginationOption(resolvedValue.pageSize); + } + return resolvedValue; + }); + }, + [onChangePaginationOption] + ); + const tableImpl = useReactTable({ getCoreRowModel: getCoreRowModel(), getSortedRowModel: enableSorting ? getSortedRowModel() : undefined, @@ -160,7 +174,7 @@ export function DataTable({ columnVisibility: columnVisibility ?? {} }, enableHiding: enableHiding, - onPaginationChange: enablePagination ? setPagination : undefined, + onPaginationChange: enablePagination ? handleChangePagination : undefined, onSortingChange: enableSorting ? setSorting : undefined, enableMultiRowSelection: enableRowSelection, ...restProps @@ -222,7 +236,6 @@ export function DataTable({ id={id ? `${id}__pagination` : undefined} table={tableImpl} paginationOptions={paginationOptions} - onChangePaginationOption={onChangePaginationOption} /> ) : null} {isEmpty ? noDataComponent ?? : null} diff --git a/rsconcept/frontend/src/components/DataTable/PaginationTools.tsx b/rsconcept/frontend/src/components/DataTable/PaginationTools.tsx index 47adea56..affa8cab 100644 --- a/rsconcept/frontend/src/components/DataTable/PaginationTools.tsx +++ b/rsconcept/frontend/src/components/DataTable/PaginationTools.tsx @@ -12,24 +12,15 @@ interface PaginationToolsProps { id?: string; table: Table; paginationOptions: number[]; - onChangePaginationOption?: (newValue: number) => void; } -export function PaginationTools({ - id, - table, - paginationOptions, - onChangePaginationOption -}: PaginationToolsProps) { +export function PaginationTools({ id, table, paginationOptions }: PaginationToolsProps) { const handlePaginationOptionsChange = useCallback( (event: React.ChangeEvent) => { const perPage = Number(event.target.value); table.setPageSize(perPage); - if (onChangePaginationOption) { - onChangePaginationOption(perPage); - } }, - [onChangePaginationOption, table] + [table] ); return (