Only details of records in the first page of requests can be viewed. Any subsequent pages will not show details in the detail panel.

[kodiidok]

First page

Second page

[kodiidok]

this might be the issue

// function to get the relevant view data from the row
// when the view action button is clicked
const handleViewClick = useCallback((rowId: any) => {
    console.log("Handling View click for row:", rowId);
    getRowData && getRowData({ data: data, action: 'view' }, rowId);
}, []);

as data is a prop passed in to the component and only contains initial page of data.

export default function DynamicTable({ 
    headerColumns,
    data,
    pageNumber,
    pageSize,
    total,
    onPaginationChange,
    getRowData
}: DynamicTableProps) {
    return(<></>);
}

[kodiidok]

fixed!!!

Two issues were found.

1. The DynamicTable component didn't re-trigger after a data re-fetch.

2. The hanldeViewClick, hanldeEditClick and hanleDeleteClick were all callback functions inside useCallback hooks so the latest refences to the getRowData callback function or the latest data weren't available.

   ---

FIXES

const [tableData, setTableData] = useState(data);

// function to get the relevant view data from the row
// when the view action button is clicked
const handleViewClick = useCallback((rowId: any) => {
    console.log("Handling View click for row:", rowId);
    getRowData && getRowData({ data: tableData, action: 'view' }, rowId);
}, [getRowData, tableData]);

// function to get the relevant edit data from the row
// when the view action button is clicked
const handleEditClick = useCallback((rowId: any) => {
        console.log("Handling Edit click for row:", rowId);
        getRowData && getRowData({ data: tableData, action: 'edit' }, rowId);
}, [getRowData, tableData]);

// function to get the relevant delete data from the row
// when the view action button is clicked
const handleDeleteClick = useCallback((rowId: any) => {
        console.log("Handling Delete click for row:", rowId);
        getRowData && getRowData({ data: tableData, action: 'delete' }, rowId);
}, [getRowData, tableData]);

const MemoizedActionsWithIcons = useMemo(() => (
// the state of the actions buttons for each row is memoized
// inorder to prevent unneccessary re-renders
    ({ row }: { row: any }) => (
            <ActionsWithIcons
                id={row.id}
                onViewClick={handleViewClick}
                onEditClick={handleEditClick}
                onDeleteClick={handleDeleteClick}
            />
        )
), [handleViewClick, handleEditClick, handleDeleteClick, data]);