Style & display
Grid style
Styling can be passed down to the grid through the
gridStyle prop. It accepts an object that allows for customization.
To reduce grid re-renders, memoize or define your grid styles as a constant outside of components.
tsx code block:const gridStyle = { border: "none", fontSize: "m", cellPadding: "m", stripes: true, rowHover: "highlight", header: "underline", footer: "overline" }; <EuiDataGrid {...rest} gridStyle={gridStyle} />
Density selector and grid styles
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 have minimum height requirements
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.
Disabling the row height toolbar control
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.
Props
EuiDataGridStyle
Prop | Description and type | Default value |
|---|---|---|
Prop fontSize# | Description and type Size of fonts used within the row and column cells EuiDataGridStyleFontSizes | Default value m |
Prop cellPadding# | Description and type Defines the padding with the row and column cells EuiDataGridStyleCellPaddings | Default value m |
Prop border# | Description and type Border used for the row and column cells EuiDataGridStyleBorders | Default value all |
Prop stripes# | Description and type If set to true, rows will alternate zebra striping for clarity boolean | Default value false |
Prop header# | Description and type Visual style for the column headers. Recommendation is to use the EuiDataGridStyleHeader | Default value shade |
Prop footer# | Description and type Visual style for the column footers. EuiDataGridStyleFooter | Default value overline |
Prop stickyFooter# | Description and type If set to true, the footer row will be sticky boolean | Default value true |
Prop rowHover# | Description and type Will define what visual style to show on row hover EuiDataGridStyleRowHover | Default value hover |
Prop rowClasses# | Description and type Optionally pass custom classes to highlight or customize certain rows { [rowIndex: number]: string; } | Default value |
Prop onChange# | Description and type Optional callback returning the current (gridStyle: EuiDataGridStyle) => void | Default value |
EuiDataGridRowHeightsOptions
Prop | Description and type | Default value |
|---|---|---|
Prop defaultHeight# | Description and type Defines the default size for all rows. It can be line count or just height. EuiDataGridRowHeightOption | Default value |
Prop autoBelowLineCount# | Description and type Feature flag for custom This functionality is in beta and has performance implications; boolean | Default value |
Prop rowHeights# | Description and type Defines the height for a specific row. It can be line count or just height. When using row height overrides, we strongly setting the Record<number, EuiDataGridRowHeightOption> | Default value |
Prop lineHeight# | Description and type Defines a global lineHeight style to apply to all cells string | Default value |
Prop onChange# | Description and type Optional callback returning the current (rowHeightsOptions: EuiDataGridRowHeightsOptions) => void | Default value |
Prop scrollAnchorRow# | Description and type Optional indicator of the row that should be used as an anchor for vertical layout shift compensation. EuiDataGridScrollAnchorRow | Default value |