Toolbar in Apex Grid

The Apex grid renders an opt-in <apex-grid-toolbar> element above the header row. The toolbar is shared chrome for features such as the quick filter and the export dropdown. It appears whenever at least one of show-quick-filter or show-export is set; otherwise it is not rendered at all.

Enabling the toolbar

The toolbar surfaces automatically based on the grid attributes:

<apex-grid show-quick-filter show-export></apex-grid>

Or programmatically:

grid.showQuickFilter = true;
grid.showExport = true;

Layout

The toolbar has two regions:

  • Leading — search input rendered when show-quick-filter is on.
  • Trailing — action buttons rendered when show-export (or future action flags) are on.

When neither region has content, the toolbar element is omitted from the DOM.

CSS parts

Style the toolbar via the following parts on the host:

  • toolbar — the root container
  • toolbar-search — wrapper around the search field
  • search-field — the search input's outlined wrapper
  • search-icon — the inline search SVG
  • search-input — the underlying <input>
  • toolbar-actions — wrapper around trailing action buttons
  • export-trigger — the export dropdown button
  • export-menu — the dropdown listbox
  • export-menu-item — each menu item
apex-grid::part(toolbar) {
  background: var(--surface-2);
  padding-inline: 12px;
}

apex-grid::part(search-field):focus-within {
  outline: 2px solid var(--accent);
}