The data grid offers multiple layout modes.
:::error By default, the Data Grid has no intrinsic dimensions. Instead, it takes up the space given by its parent. The Data Grid will raise an error in the console if its container has no intrinsic dimensions. :::
When using percentages (%) for height or width, make sure that the Data Grid's parent container has intrinsic dimensions. Browsers adjust the element based on a percentage of its parent's size. If the parent has no size, the percentage will be zero.
You can predefine dimensions for the parent of the data grid.
{{"demo": "FixedSizeGrid.js", "bg": "inline"}}
The autoHeight prop enables the Data Grid to adjust its size based on its content.
This means that the Data Grid's height will be determined by the number of rows, ensuring that all rows will be visible to the user simultaneously.
:::warning This is not recommended for large datasets as row virtualization will not be able to improve performance by limiting the number of elements rendered in the DOM. :::
{{"demo": "AutoHeightGrid.js", "bg": "inline"}}
When autoHeight is enabled but there are no rows, grid overlays (such as
"Loading" or
"No rows")
take the height of two rows by default.
To customize the overlay height, use the --DataGrid-overlayHeight CSS variable.
{{"demo": "AutoHeightOverlayNoSnap.js", "bg": "inline"}}