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

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, interspering 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: "text" | "accent" | "primary" | "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 ↵

𐘂𐘂