Closed kodiidok closed 6 months ago
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(<></>);
}
fixed!!!
Two issues were found.
DynamicTable
component didn't re-trigger after a data re-fetch.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.
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]);
First page
Second page