Data grid 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 as a shape, allows setting the visibility of the individual controls within.

Loading...

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...

Toolbar props

EuiDataGridToolBarVisibilityOptions

This table contains 6 rows. | Prop

|

Sample snippet

| | --- | --- | |

showSortSelector

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

|

showSortSelector: false

| |

additionalControls

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.

|

additionalControls: {
  left: <EuiButtonEmpty size="xs" />,
  right: <EuiButtonIcon size="xs" />,
}

| |

showColumnSelector

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

|

showColumnSelector: {
  allowHide: false;
  allowReorder: false;
}

| |

showDisplaySelector

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

|

showDisplaySelector: {
  allowDensity: false;
  allowRowHeight: false;
  allowResetButton: false;
  additionalDisplaySettings: <EuiButtonEmpty size="xs" />;
}

| |

showFullScreenSelector

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.

|

showFullScreenSelector: false

| |

showKeyboardShortcuts

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.

|

|