Skip to main content
Elastic UI
Elastic UI
Getting startedComponentsPatternsContentData visualization
EUI ChangelogGitHubFigma
  • Overview
  • Layout
  • Containers
  • Navigation
  • Display
  • Forms
  • Tabular content
    • Data grid
      • Schema & columns
      • Cells & popovers
      • Toolbar
      • Style & display
      • Container constraints
      • Advanced use cases
    • Tables
  • Templates
  • Editors and syntax
  • EUI
  • Tabular content
  • Data grid
  • Toolbar

Toolbar

Toolbar visibility

The

toolbarVisibility prop, when used as a boolean, controls the visibility of the entire toolbar displayed above the grid. Using the prop's object configuration allows setting the visibility of the individual toolbar controls.

Toolbar visibility
✄𐘗
tsx code block:
✄𐘗const toolbarVisibility = true; <EuiDataGrid {...rest} toolbarVisibility={toolbarVisibility} />

Additional controls in the toolbar

Use the toolbarVisibility.additionalControls prop to pass more buttons to the toolbar.

Passing a single node to additionalControls will default to being placed in the left.append position of the toolbar. To configure which side of the toolbar your controls display in, pass an object with the left or right properties:

  • additionalControls.left appends the passed custom control into the left side of the toolbar.
    • left.prepend prepends the passed node into the left side of the toolbar, before the column & sort controls.
    • left.append appends the passed node into the left side of the toolbar, after the column & sort controls.
  • additionalControls.right prepends the passed node into the right side of the toolbar, before the density & full screen controls.

Although any node is allowed, the recommendation is to use <EuiDataGridToolbarControl /> for the left-side of the toolbar and <EuiButtonIcon size="xs" /> for the right-side of the toolbar.

Loading...

Completely custom toolbar rendering

If more customized control over the toolbar is required than toolbarVisibility or additionalControls allows, you can use the renderCustomToolbar prop to pass a component. The default datagrid controls are passed back as parameters for optional usage.

renderCustomToolbar should only be used when a very custom layout (e.g. moving default buttons between sides, interspersing custom controls between default controls, custom responsive behavior, etc.) is required. For consistent visuals, we recommend using the <EuiDataGridToolbarControl /> subcomponent when rendering custom controls.

Keep consistency in mind when customizing the toolbar

If using multiple datagrid instances across your app, users will typically want to reach for the same controls for each grid. Changing the available controls inconsistently across your app may result in user frustration.

Loading...

Props

EuiDataGridToolBarVisibilityOptions

𐘂𐘂
✄𐘗✄𐘗
Prop
↦
Description and type
↦
Default value
↵
Prop
showColumnSelector#
↦
Description and type

Allows the ability for the user to hide fields and sort columns, boolean or a #EuiDataGridToolBarVisibilityColumnSelectorOptions

Type: boolean | EuiDataGridToolBarVisibilityColumnSelectorOptions
↦
Default value
true
↵
Prop
showDisplaySelector#
↦
Description and type

Allows the ability for the user to customize display settings such as grid density and row heights.
User changes will override what is provided in #EuiDataGridStyle and #EuiDataGridRowHeightsOptions

Type: boolean | EuiDataGridToolBarVisibilityDisplaySelectorOptions
↦
Default value
true
↵
Prop
showSortSelector#
↦
Description and type

Allows the ability for the user to sort rows based upon column values

Type: boolean
↦
Default value
true
↵
Prop
showKeyboardShortcuts#
↦
Description and type

Displays a popover listing all keyboard controls and shortcuts for the data grid.
If set to false, the toggle will be visually hidden, but still focusable by keyboard and screen reader users.

Type: boolean
↦
Default value
true
↵
Prop
showFullScreenSelector#
↦
Description and type

Allows user to be able to fullscreen the data grid. If set to false make sure your grid fits within a large enough panel to still show the other controls.

Type: boolean
↦
Default value
true
↵
Prop
additionalControls#
↦
Description and type

If passed a ReactNode, appends the passed custom control into the left side of the toolbar, after the column & sort controls.
Or use #EuiDataGridToolBarAdditionalControlsOptions to customize the location of your control.

Type: ReactNode | EuiDataGridToolBarAdditionalControlsOptions
↦
Default value
↵
𐘂𐘂

EuiDataGridToolBarAdditionalControlsOptions

𐘂𐘂
✄𐘗✄𐘗
Prop
↦
Description and type
↦
Default value
↵
Prop
left#
↦
Description and type

If passed a ReactNode, appends the passed node into the left side of the toolbar, after the column & sort controls.
Or use #EuiDataGridToolBarAdditionalControlsLeftOptions to customize the location of your control.
We recommend using <EuiButtonEmpty size="xs" /> to match the existing controls on the left.

Type: ReactNode | EuiDataGridToolBarAdditionalControlsLeftOptions
↦
Default value
↵
Prop
right#
↦
Description and type

Will prepend the passed node into the right side of the toolbar, before the density & fullscreen controls.
We recommend using <EuiButtonIcon size="xs" /> to match the existing controls on the right.

Type: ReactNode
↦
Default value
↵
𐘂𐘂

EuiDataGridToolBarAdditionalControlsLeftOptions

𐘂𐘂
✄𐘗✄𐘗
Prop
↦
Description and type
↦
Default value
↵
Prop
prepend#
↦
Description and type

Will prepend the passed node into the left side of the toolbar, before the column & sort controls.

Type: ReactNode
↦
Default value
↵
Prop
append#
↦
Description and type

Will append the passed node into the left side of the toolbar, after the column & sort controls.

Type: ReactNode
↦
Default value
↵
𐘂𐘂

EuiDataGridCustomToolbarProps

𐘂𐘂
✄𐘗✄𐘗
Prop
↦
Description and type
↦
Default value
↵
Prop
hasRoomForGridControls#
↦
Description and type
Type: boolean
↦
Default value
Required
↵
Prop
fullScreenControl#
↦
Description and type
Type: ReactNode
↦
Default value
Required
↵
Prop
keyboardShortcutsControl#
↦
Description and type
Type: ReactNode
↦
Default value
Required
↵
Prop
displayControl#
↦
Description and type
Type: ReactNode
↦
Default value
Required
↵
Prop
columnControl#
↦
Description and type
Type: ReactNode
↦
Default value
Required
↵
Prop
columnSortingControl#
↦
Description and type
Type: ReactNode
↦
Default value
Required
↵
𐘂𐘂

EuiDataGridToolbarControl

Extends AnchorHTMLAttributes, ButtonHTMLAttributes
𐘂𐘂
✄𐘗✄𐘗
Prop
↦
Description and type
↦
Default value
↵
Prop
color#
↦
Description and type

Any of the named color palette options.

Type: "primary" | "text" | "accent" | "success" | "warning" | "danger"
↦
Default value
↵
Prop
size#
↦
Description and type
Type: "xs" | "s" | "m"
↦
Default value
↵
Prop
flush#
↦
Description and type

Ensure the text of the button sits flush to the left, right, or both sides of its container

Type: "left" | "right" | "both"
↦
Default value
↵
Prop
isDisabled#
↦
Description and type

disabled is also allowed

Type: boolean
↦
Default value
↵
Prop
isLoading#
↦
Description and type

Force disables the button and changes the icon to a loading spinner

Type: boolean
↦
Default value
↵
Prop
isSelected#
↦
Description and type

Applies the boolean state as the aria-pressed property to create a toggle button.
Only use when the readable text does not change between states.

Type: boolean
↦
Default value
↵
Prop
href#
↦
Description and type
Type: string
↦
Default value
↵
Prop
target#
↦
Description and type
Type: string
↦
Default value
↵
Prop
rel#
↦
Description and type
Type: string
↦
Default value
↵
Prop
type#
↦
Description and type
Type: "button" | "reset" | "submit"
↦
Default value
↵
Prop
buttonRef#
↦
Description and type
Type: Ref<HTMLAnchorElement | HTMLButtonElement>
↦
Default value
↵
Prop
contentProps#
↦
Description and type

Object of props passed to the <span> wrapping the button's content

Type: CommonProps & EuiButtonDisplayContentType
↦
Default value
↵
Prop
iconType#
↦
Description and type

Any type accepted by EuiIcon

Type: IconType
↦
Default value
↵
Prop
iconSide#
↦
Description and type

Can only be one side left or right

Type: ButtonContentIconSide
↦
Default value
↵
Prop
textProps#
↦
Description and type

Object of props passed to the <span> wrapping the content's text/children only (not icon)

This span wrapper can be removed by passing textProps={false}.

Type: false | (HTMLAttributes<HTMLSpanElement> & CommonProps & { ref?: Ref<HTMLSpanElement>; 'data-text'?: string; })
↦
Default value
↵
Prop
iconSize#
↦
Description and type
Type: "s" | "m"
↦
Default value
↵
Prop
className#
↦
Description and type
Type: string
↦
Default value
↵
Prop
aria-label#
↦
Description and type

Defines a string value that labels the current element.
@see aria-labelledby.

Type: string
↦
Default value
↵
Prop
data-test-subj#
↦
Description and type
Type: string
↦
Default value
↵
Prop
css#
↦
Description and type
Type: Interpolation<Theme>
↦
Default value
↵
Prop
onClick#
↦
Description and type
Type: MouseEventHandler<HTMLAnchorElement> | MouseEventHandler<HTMLButtonElement>
↦
Default value
↵
Prop
badgeContent#
↦
Description and type
Type: string | number
↦
Default value
↵
𐘂𐘂

EuiDataGridToolBarVisibilityColumnSelectorOptions

𐘂𐘂
✄𐘗✄𐘗
Prop
↦
Description and type
↦
Default value
↵
Prop
allowHide#
↦
Description and type

When false, removes the ability to show & hide columns through the UI

Type: boolean
↦
Default value
↵
Prop
allowReorder#
↦
Description and type

When false, removes the ability to re-order columns through the UI

Type: boolean
↦
Default value
↵
𐘂𐘂

EuiDataGridToolBarVisibilityDisplaySelectorOptions

𐘂𐘂
✄𐘗✄𐘗
Prop
↦
Description and type
↦
Default value
↵
Prop
allowDensity#
↦
Description and type

When false, removes the ability to change density display through the UI

Type: boolean
↦
Default value
↵
Prop
allowRowHeight#
↦
Description and type

When false, removes the ability to change row height display through the UI

Type: boolean
↦
Default value
↵
Prop
allowResetButton#
↦
Description and type

When false, removes the ability to reset styles to default through the UI

Type: boolean
↦
Default value
↵
Prop
additionalDisplaySettings#
↦
Description and type

Allows appending additional content to the bottom of the display settings popover

Type: ReactNode
↦
Default value
↵
Prop
customRender#
↦
Description and type

Allows completely custom rendering of the display selector popover via render prop.
Passes back the default controls as arguments for optional rendering.

Type: EuiDataGridDisplaySelectorCustomRender
↦
Default value
↵
𐘂𐘂

EuiDataGridDisplaySelectorCustomRenderProps

𐘂𐘂
✄𐘗✄𐘗
Prop
↦
Description and type
↦
Default value
↵
Prop
densityControl#
↦
Description and type
Type: ReactNode
↦
Default value
Required
↵
Prop
rowHeightControl#
↦
Description and type
Type: ReactNode
↦
Default value
Required
↵
Prop
additionalDisplaySettings#
↦
Description and type
Type: ReactNode
↦
Default value
Required
↵
Prop
resetButton#
↦
Description and type
Type: ReactNode
↦
Default value
Required
↵
𐘂𐘂
Edit this page

Previous
Cells & popovers
Next
Style & display
  • Toolbar visibility
  • Additional controls in the toolbar
  • Completely custom toolbar rendering
  • Props
EUI is dual-licensed under Elastic License 2.0 and Server Side Public License, v 1 | Crafted with ❤ by Elastic