ConceptProd/Portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

R: Move pagination handling to main body

Browse Source
This commit is contained in:
Ivan 2025-03-12 00:18:34 +03:00
parent 2b0f074ffa
commit fb23c32ca8
2 changed files with 18 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
rsconcept/frontend/src/components/DataTable/DataTable.tsx
View File

@ -1,7 +1,7 @@
'use client'; 'use client';
'use no memo'; 'use no memo';
import { useMemo, useState } from 'react'; import { useCallback, useMemo, useState } from 'react';
import { import {
type ColumnSort, type ColumnSort,
createColumnHelper, createColumnHelper,
@ -13,6 +13,7 @@ import {
type RowSelectionState, type RowSelectionState,
type SortingState, type SortingState,
type TableOptions, type TableOptions,
type Updater,
useReactTable, useReactTable,
type VisibilityState type VisibilityState
} from '@tanstack/react-table'; } from '@tanstack/react-table';
@ -148,6 +149,19 @@ export function DataTable<TData extends RowData>({
pageSize: paginationPerPage 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 tableImpl = useReactTable({ const tableImpl = useReactTable({
getCoreRowModel: getCoreRowModel(), getCoreRowModel: getCoreRowModel(),
getSortedRowModel: enableSorting ? getSortedRowModel() : undefined, getSortedRowModel: enableSorting ? getSortedRowModel() : undefined,
@ -160,7 +174,7 @@ export function DataTable<TData extends RowData>({
columnVisibility: columnVisibility ?? {} columnVisibility: columnVisibility ?? {}
}, },
enableHiding: enableHiding, enableHiding: enableHiding,
onPaginationChange: enablePagination ? setPagination : undefined, onPaginationChange: enablePagination ? handleChangePagination : undefined,
onSortingChange: enableSorting ? setSorting : undefined, onSortingChange: enableSorting ? setSorting : undefined,
enableMultiRowSelection: enableRowSelection, enableMultiRowSelection: enableRowSelection,
...restProps ...restProps
@ -222,7 +236,6 @@ export function DataTable<TData extends RowData>({
id={id ? `${id}__pagination` : undefined} id={id ? `${id}__pagination` : undefined}
table={tableImpl} table={tableImpl}
paginationOptions={paginationOptions} paginationOptions={paginationOptions}
onChangePaginationOption={onChangePaginationOption}
/> />
) : null} ) : null}
{isEmpty ? noDataComponent ?? <DefaultNoData /> : null} {isEmpty ? noDataComponent ?? <DefaultNoData /> : null}

13
rsconcept/frontend/src/components/DataTable/PaginationTools.tsx
View File

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