bc-grid
GitHub

Toolbar slots

View source

The toolbar render-prop receives a typed context with pre-built sub-slots — search input, group-by dropdown, density picker, clear-filters button, saved-view picker — that you compose alongside your domain actions.

Orders
Order #
Customer
Region
Status
Amount
Sales rep
R-000001
Customer 00001
North
active
$0.00
Avery Chen
R-000002
Customer 00002
North
pending
$31.42
Ben Singh
R-000003
Customer 00003
North
closed
$62.83
Cara Diaz
R-000004
Customer 00004
North
active
$94.25
Drew Lin
R-000005
Customer 00005
South
pending
$125.66
Elena Park
R-000006
Customer 00006
South
closed
$157.08
Felix Roy
R-000007
Customer 00007
South
active
$188.50
Gita Bose
R-000008
Customer 00008
South
pending
$219.91
Henry Kao
R-000009
Customer 00009
East
closed
$251.33
Avery Chen
R-000010
Customer 00010
East
active
$282.74
Ben Singh
R-000011
Customer 00011
East
pending
$314.16
Cara Diaz
R-000012
Customer 00012
East
closed
$345.57
Drew Lin
R-000013
Customer 00013
West
active
$376.99
Elena Park
R-000014
Customer 00014
West
pending
$408.41
Felix Roy
R-000015
Customer 00015
West
closed
$439.82
Gita Bose

Try this

Every chrome element in the toolbar except the title and the buttons on the right comes from BcToolbarContext sub-slots.

  • Type in the search box — built-in search input from ctx.searchInput.
  • Click the group-by dropdown — pre-wired against ctx.groupBy.
  • Toggle density — same chrome the right-click menu would surface, surfaced inline via ctx.densityPicker.
  • Apply a filter, then click Clear filters — built-in button.
  • The Export and New order buttons are consumer-owned — your domain logic.

Pre-built sub-slots

  • searchInput. Search field bound to ctx.searchText / setSearchText. Honours the search-hotkey badge and the column highlight pipeline.
  • quickFilterInput. Optional advanced quick-filter input — opt in via quickFilter on BcGridProps.
  • groupByDropdown. Multi-select dropdown of every groupable: true column. Wires to setGroupBy.
  • densityPicker. compact / normal / comfortable.
  • clearFiltersButton. Disabled when no filters active.
  • savedViewPicker. Placeholder slot — swap in your saved-view chrome and the toolbar layout stays stable.

Why slots beat hand-rolled toolbars

Each pre-built slot speaks the right grid API — search composes with column highlight, group-by composes with aggregations, density composes with row virtualization. Hand-rolling them means re-discovering all those compositions yourself. The slots are also screen-reader-correct, keyboard-navigable, and theme-aware out of the box.

Or skip the toolbar

The toolbar is opt-in. If you don't need chrome above the grid, omit the prop and bc-grid renders the body directly. Search / group / density still work — they just live in the right-click context menu only.