bc-grid
GitHub

Saved views

View source

Capture the current sort / filter / group / column-state / pin / density into a typed BcSavedView DTO that you can persist anywhere — localStorage, a server endpoint, or the URL — and apply later with one call.

Tweak sort / filter / group / pin, then save the view.No saved views yet.
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

The demo's saved views live in component state — refreshing loses them. Real apps persist to localStorage / your API.

  • Sort by a column, filter another, then click Save current view.
  • Change the sort, then click your saved-view chip — the layout snaps back.
  • Save a second view with different settings; click between them to switch.
  • Click the × on a chip to delete that view.

The DTO

  • createSavedView({ name, gridId, layout }). Returns a typed BcSavedView<TRow> with id / version / createdAt stamped on. Persist it as JSON.
  • applySavedViewLayout(api, view). Mutates the grid imperatively to match the saved layout — sort, filter, group, column visibility / order / width / pin, density, the whole layout state. Migrates older versions automatically.
  • migrateSavedViewLayout. Standalone migrator if you need to upgrade stored views before re-displaying them in a saved-view picker.

Where the layout comes from

The grid emits onLayoutStateChange every time the layout changes (debounced). Capture the latest state, hand it to createSavedView. Or pull it on demand with apiRef.current?.getLayoutState().

Server sync

For multi-device / multi-user saved views, see the saved-view-server-sync recipe in packages/bc-grid/docs/recipes/. The DTO carries a version + revision string so a client can do conflict-aware sync (last-writer-wins, merge, or prompt) without writing custom diff logic.