Get and Set 'Datagrid density and row height'

[GenatHadri]

Hello everyone,

I hope you're all doing well. I'm seeking help with the Datagrid component, specifically regarding the toolbarVisibility properties: Density and RowHeight, both of which are set to true. My goal is to find a way to store their values somewhere and, when I render the datagrid, to check if these values have been specified. If they have, I'd like to display the table based on those settings. If not, I'd like to use the default values.

Is there a possible way to achieve this? How can I get and set the values for these properties? Below, you'll find an image of these options for reference:

Image

[cee-chen]

The gridStyle.onChange and rowHeightsOptions.onChange props are the callbacks you'll need use to get the current datagrid density or row height settings (fired whenever the user changes said settings). Take a look at the Demo JS tab of the below example:

https://eui.elastic.co/#/tabular-content/data-grid-style-display#adjusting-your-grid-to-usertoolbar-changes