B: Fix pagination change rendering error

rsconcept/frontend/src/components/data-table/data-table.tsx

@@ -120,6 +120,7 @@ export function DataTable<TData extends RowData>({
   onRowDoubleClicked,
   noDataComponent,
 
+  onChangePaginationOption,
   paginationPerPage,
   paginationOptions = [10, 20, 30, 40, 50],
 
@@ -182,6 +183,7 @@ export function DataTable<TData extends RowData>({
         <PaginationTools
           id={id ? `${id}__pagination` : undefined}
           table={table}
+          onChangePaginationOption={onChangePaginationOption}
           paginationOptions={paginationOptions}
         />
       ) : null}

rsconcept/frontend/src/components/data-table/pagination-tools.tsx

@@ -12,15 +12,22 @@ interface PaginationToolsProps<TData> {
   id?: string;
   table: Table<TData>;
   paginationOptions: number[];
+  onChangePaginationOption?: (newValue: number) => void;
 }
 
-export function PaginationTools<TData>({ id, table, paginationOptions }: PaginationToolsProps<TData>) {
+export function PaginationTools<TData>({
+  id,
+  table,
+  onChangePaginationOption,
+  paginationOptions
+}: PaginationToolsProps<TData>) {
   const handlePaginationOptionsChange = useCallback(
     (event: React.ChangeEvent<HTMLSelectElement>) => {
       const perPage = Number(event.target.value);
       table.setPageSize(perPage);
+      onChangePaginationOption?.(perPage);
     },
-    [table]
+    [table, onChangePaginationOption]
   );
 
   return (

rsconcept/frontend/src/components/data-table/use-data-table.ts

@@ -1,6 +1,6 @@
 'use client';
 
-import { useCallback, useState } from 'react';
+import { useState } from 'react';
 import {
   type ColumnSort,
   getCoreRowModel,
@@ -11,7 +11,6 @@ import {
   type RowSelectionState,
   type SortingState,
   type TableOptions,
-  type Updater,
   useReactTable,
   type VisibilityState
 } from '@tanstack/react-table';
@@ -45,9 +44,6 @@ interface UseDataTableProps<TData extends RowData>
   /** Number of rows per page. */
   paginationPerPage?: number;
 
-  /** Callback to be called when the pagination option is changed. */
-  onChangePaginationOption?: (newValue: number) => void;
-
   /** Enable sorting. */
   enableSorting?: boolean;
 
@@ -73,7 +69,6 @@ export function useDataTable<TData extends RowData>({
 
   enablePagination,
   paginationPerPage = 10,
-  onChangePaginationOption,
 
   ...restProps
 }: UseDataTableProps<TData>) {
@@ -83,19 +78,6 @@ export function useDataTable<TData extends RowData>({
     pageSize: paginationPerPage
   });
 
-  const handleChangePagination = useCallback(
-    (updater: Updater<PaginationState>) => {
-      setPagination(prev => {
-        const resolvedValue = typeof updater === 'function' ? updater(prev) : updater;
-        if (onChangePaginationOption && prev.pageSize !== resolvedValue.pageSize) {
-          onChangePaginationOption(resolvedValue.pageSize);
-        }
-        return resolvedValue;
-      });
-    },
-    [onChangePaginationOption]
-  );
-
   const table = useReactTable({
     state: {
       pagination: pagination,
@@ -111,7 +93,7 @@ export function useDataTable<TData extends RowData>({
     onSortingChange: enableSorting ? setSorting : undefined,
 
     getPaginationRowModel: enablePagination ? getPaginationRowModel() : undefined,
-    onPaginationChange: enablePagination ? handleChangePagination : undefined,
+    onPaginationChange: enablePagination ? setPagination : undefined,
 
     enableHiding: enableHiding,
     enableMultiRowSelection: enableRowSelection,

rsconcept/frontend/src/index.css

@@ -7,6 +7,24 @@
 
 @custom-variant dark (&:is(.dark *));
 
+/* Uncomment to debug layering and overflow */
+/* *,
+*::after,
+*::before {
+  :focus,
+  :focus-visible,
+  :focus-within {
+    outline: 2px solid hotpink !important;
+  }
+} */
+
+/* *,
+*::after,
+*::before {
+  background: hsla(135, 50%, 50%, 0.05) !important;
+  outline: 2px solid hotpink !important;
+} */
+
 @theme {
   /* stylelint-disable-next-line custom-property-pattern */
   --color-*: initial;

rsconcept/frontend/src/styling/setup.css

@@ -4,24 +4,6 @@
 
 @import './constants.css' layer(base);
 
-/* Uncomment to debug layering and overflow */
-/* *,
-*::after,
-*::before {
-  :focus,
-  :focus-visible,
-  :focus-within {
-    outline: 2px solid hotpink !important;
-  }
-} */
-
-/* *,
-*::after,
-*::before {
-  background: hsla(135, 50%, 50%, 0.05) !important;
-  outline: 2px solid hotpink !important;
-} */
-
 @layer utilities {
   *,
   *::after,