Companion Elements (Enterprise)

Alongside the grid, apex-grid-enterprise ships three companion custom elements you place in your own markup. Each binds to a grid instance through its grid property. (The chart companion is covered separately in Integrated Charts.)

All three are registered by apex-grid-enterprise/define.

Status bar — <apex-grid-status-bar>

Shows live aggregates (count, sum, average, min, max) for the current range selection, with zero code beyond binding the grid:

import 'apex-grid-enterprise/define';

const grid = document.querySelector('apex-grid-enterprise');
const statusBar = document.createElement('apex-grid-status-bar');
statusBar.grid = grid;
document.querySelector('#status-slot').appendChild(statusBar);

Select a range of numeric cells and the bar updates automatically.

Tool panel — <apex-grid-tool-panel>

A side panel that manages the grid's columns (show/hide, reorder) and the grouping/pivot configuration. Users drag columns into Row Groups, Values, or (in pivot mode) the column dimension — driving groupBy, aggregations, and pivotOn/pivotRows/pivotValues:

const toolPanel = document.createElement('apex-grid-tool-panel');
toolPanel.grid = grid;
document.querySelector('#panel-slot').appendChild(toolPanel);

It reflects and edits the same properties documented in Row Grouping, Aggregations, and Pivoting.

Set filter — <apex-grid-set-filter>

An Excel-style checklist of a column's distinct values. Set its grid and column; it computes the distinct values from grid.data and filters the column to the checked set:

const setFilter = document.createElement('apex-grid-set-filter');
setFilter.grid = grid;
setFilter.column = 'country';   // column key
document.querySelector('#country-filter').appendChild(setFilter);

Typically mounted inside a header popover for the column. Selecting every value clears that column's filter.

Element	Tag	Key properties
Status bar	<apex-grid-status-bar>	grid
Tool panel	<apex-grid-tool-panel>	grid
Set filter	<apex-grid-set-filter>	grid, column

React example

import { useEffect, useRef } from 'react'
import 'apex-grid-enterprise/define'

export default function GridWithPanels() {
  const gridRef = useRef<any>(null)
  const statusRef = useRef<any>(null)
  const panelRef = useRef<any>(null)

  useEffect(() => {
    const grid = gridRef.current
    grid.columns = columns
    grid.data = data
    statusRef.current.grid = grid
    panelRef.current.grid = grid
  }, [])

  return (
    <div style={{ display: 'flex', gap: 12 }}>
      <div style={{ flex: 1 }}>
        <apex-grid-enterprise ref={gridRef} style={{ height: 480 }} />
        <apex-grid-status-bar ref={statusRef} />
      </div>
      <apex-grid-tool-panel ref={panelRef} />
    </div>
  )
}