Data grid style & display
Grid style
Styling can be passed down to the grid through the
gridStyle prop. It accepts an object that allows for customization.With the default settings, the showDisplaySelector.allowDensity setting in toolbarVisibility means the user has the ability to override the padding and font size passed into gridStyle by the engineer. The font size overriding only works with text or elements that can inherit the parent font size or elements that use units relative to the parent container.
Grid row classes
Specific rows can be highlighted or otherwise have custom styling passed to them via thegridStyle.rowClasses prop. It accepts an object associating the row's index with a class name string.
The example below sets a custom striped class on the 3rd row and dynamically updates the rowClasses map when rows are selected.
Row heights options
By default, all rows get a height of 34 pixels, but there are scenarios where you might want to adjust the height to fit more content. To do that, you can pass an object to the rowHeightsOptions prop. This object accepts the following properties:
defaultHeight- Defines the default size for all rows
- Can be configured with an exact pixel height, a line count, or
"auto"to fit all content
rowHeights- Overrides the height for a specific row
- Can be configured with an exact pixel height, a line count, or
"auto"to fit all content
lineHeight- Sets a default line height for all cells, which is used to calculate row height
- Accepts any value that the
line-heightCSS property normally takes (e.g. px, ems, rems, or unitless)
onChange- Optional callback when the user changes the data grid's internal
rowHeightsOptions(e.g., via the toolbar display selector). - Can be used to store and preserve user display preferences on page refresh - see this data grid styling and control example.
scrollAnchorRow- Optional indicator of the row that should be used as an anchor for vertical layout shift compensation.
- Can be set to the default
undefined,"start", or"center". - If set to
"start", the topmost visible row will monitor for unexpected changes to its vertical position and try to compensate for these by scrolling the grid scroll container such that the topmost row position remains stable. - If set to
"center", the middle visible row will monitor for unexpected changes to its vertical position and try to compensate for these by scrolling the grid scroll container such that the middle row position remains stable. - This is particularly useful when the grid contains
autosized rows. Since these rows are measured as they appear in the overscan, they can cause surprising shifts of the vertical position of all following rows when their measured height is different from the estimated height.
Rows must be at least 34 pixels tall so they can render at least one line of text. If you provide a smaller height the row will default to 34 pixels.
Setting a default height and line height for rows
You can change the default height for all rows via the defaultHeight property. Note that the showDisplaySelector.allowRowHeight setting in toolbarVisibility means the user has the ability to override this default height. Users will be able to toggle between single rows, a configurable line count, or "auto".
You can also customize the line height of all cells with the lineHeight property. However, if you wrap your cell content with CSS that overrides/sets line-height (e.g. in an EuiText), your row heights will not be calculated correctly - make sure to match the passed lineHeight property to the actual cell content line height.
Overriding specific row heights
You can override the default height of a specific row by passing arowHeights object associating the row's index with a specific height configuration.
Individual row heights will be overridden by the toolbar display controls. If you do not want users to be able to override specific row heights, set toolbarVisibility.showDisplaySelector.allowRowHeight to false.
Auto heights for rows
To enable automatically fitting rows to their content you can set defaultHeight="auto". This ensures every row automatically adjusts its height to fit the contents.
You can also override the height of a specific row by passing arowHeights object associating the row's index with an "auto" value.
Adjusting your grid to user/toolbar changes
You can use the optional gridStyle.onChange and rowHeightsOptions.onChange callbacks to adjust your data grid based on user density or row height changes.
For example, if the user changes the grid density to compressed, you may want to adjust a cell's content sizing in response. Or you could store user settings in localStorage or other database to preserve display settings on page refresh, like the below example does.