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. The export menu offers Export CSV in the community grid; <apex-grid-enterprise> adds Export XLSX.

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);
}