import { getPaginationRowModel } from '@tanstack/react-table' import React from 'react' import type { PaginationConfig } from './DataTable' export function usePagination(pagination?: PaginationConfig) { const [paginationState, setPaginationState] = React.useState({ pageIndex: pagination?.pageIndex ?? 0, pageSize: pagination?.pageSize || 10, }) // Sync internal state with controlled pageIndex prop React.useEffect(() => { if ( pagination?.pageIndex !== undefined && pagination.pageIndex !== paginationState.pageIndex ) { setPaginationState((prev) => ({ ...prev, pageIndex: pagination.pageIndex ?? 0, })) } }, [pagination?.pageIndex]) const handlePaginationChange = React.useCallback( (updater: any) => { const newPagination = typeof updater === 'function' ? updater(paginationState) : updater setPaginationState(newPagination) // Call server-side pagination handler if provided if (pagination?.serverSide && pagination?.onPageChange) { pagination.onPageChange(newPagination.pageIndex, newPagination.pageSize) } }, [pagination, paginationState], ) const paginationOptions = React.useMemo(() => { if (pagination?.serverSide) { return { manualPagination: true, pageCount: pagination.totalCount ? Math.ceil(pagination.totalCount / paginationState.pageSize) : -1, state: { pagination: paginationState, }, onPaginationChange: handlePaginationChange, meta: { totalCount: pagination.totalCount, currentPageCount: pagination.currentPageCount, canNextPage: pagination.canNextPage, }, } } // Client-side pagination (default behavior) return { getPaginationRowModel: getPaginationRowModel(), initialState: { pagination: { pageIndex: 0, pageSize: pagination?.pageSize || 10, }, }, } }, [pagination, paginationState, handlePaginationChange]) return paginationOptions }