Data grid styling
Styling can be passed down to the grid through the gridStyle prop. It accepts an object that allows for customization.
The toolbarVisibility prop when used as a boolean controls the visibility of the toolbar displayed above the grid. Using the prop as a shape, allows setting the visibility of the individual buttons within.
With the default settings, the showStyleSelector setting in toolbarVisibility means the user has the ability to override the padding and font size passed into gridStyle by the engineer.
<EuiDataGrid
{...usualProps}
// This can work as a shape.
toolbarVisibility={{
showColumnSelector: false
showStyleSelector: false
showSortSelector: false
showFullScreenSelector: false
}}
// Or as a boolean to turn everything off.
toolbarVisibility={false}
// Change the initial style of the grid.
gridStyle={{
border: 'all',
stripes: true,
rowHover: 'highlight',
header: 'shade',
// If showStyleSelector={true} from toolbarVisibility, these last two will be superceded by what the user decides.
fontSize: 'm',
cellPadding: 'm',
}}
/>
avatar
name
email
city
country
account
Cell contains interactive content.
Data grid adapts to its container
When wrapped inside a container, like a dashboard panel, the grid will start hiding controls and adopt a more strict flex layout
name
email
city
country
account
Cell contains interactive content.