Is there a more efficient way to adjust the size of the action icon based on table density in response to user interaction? Currently, I am using onStageChange to track all changes in the table and update a state variable on the component.
...
const [density, setDensity] = useState<GridDensity>();
...
const actionEdit: GridColDef = {
field: '',
type: 'action',
align: 'right',
disableColumnMenu: true,
disableClickEventBubbling: true,
resizable: false,
flex: 1,
headerClassName: 'edit-theme-header',
cellClassName: 'edit-theme-cell',
renderCell: () => <EditAction size={density} onClick={() => alert('click')} />
};
...
<XGrid
.....
onStateChange={(v) => setDensity(v.state.density.value)}
/>
The current setup works, but onStateChange is triggered for all state changes, not just density. Is there a more optimized approach for this? :)