Skip to main content

Column panel, toolbar, and saved views

The column panel manages visibility, pinning, and order; the toolbar surfaces grouping, sorting, quick filter, views, and export as opt-in sections; saved views capture the whole layout under application-owned persistence.

Loading interactive example…
React
const [views, setViews] = useState<SavedGridView[]>(loadViews);

<Grid
  rowData={rows}
  columnDefs={columns}
  columnPanel={{ trigger: "toolbar" }}
  toolbar={{ grouping: true, sorting: true, quickFilter: true, views: true, export: true }}
  savedViews={{
    views,
    onChange: (next) => {
      setViews(next);
      localStorage.setItem("grid-views", JSON.stringify(next));
    },
  }}
/>

Column panel​

const options = {
  columnPanel: {
    trigger: "rail",
    defaultOpen: false,
    width: 320,
  },
} satisfies GridOptions;

Change trigger to "header", "menu", "footer", or "toolbar". The drawer provides search, show/hide, pinning, pointer/keyboard ordering, bulk visibility, nested groups, and reset. Opt a column out with suppressColumnPanel: true.

Columns with pivot roles (row group, pivot column, aggregate) show removable role chips under their rows, and while pivot mode is on the panel doubles as the pivot customizer with ordered role wells.

Toolbar sections​

const options = {
  toolbar: {
    grouping: true,
    sorting: true,
    quickFilter: true,
    views: true,
    export: true,
  },
  columnPanel: { trigger: "toolbar" },
} satisfies GridOptions;

Every section is independently opt-in. The toolbar observes the grid container and automatically collapses labels and moves secondary commands into an overflow menu as space shrinks — resize the demo's window to see it adapt.

Application-owned saved views​

let views: SavedGridView[] = loadViews();
let activeViewId: string | null = null;

const options = {
  toolbar: { views: true },
  savedViews: {
    views,
    activeViewId,
    onChange: (nextViews) => {
      views = nextViews;
      localStorage.setItem("grid-views", JSON.stringify(nextViews));
    },
    onActiveViewChange: (id) => {
      activeViewId = id;
    },
  },
} satisfies GridOptions;

The application owns persistence; the grid supplies picker and CRUD behavior. A view contains column layout, grouping, sorting, filters, quick-filter text, and group expansion. (The live demo above persists its views to localStorage — shape the grid, save a view, and reload the page.)

Capture and apply view state directly​

const state = api.captureViewState();
localStorage.setItem("orders-view", JSON.stringify(state));

api.applyViewState(state);                       // exact column restore
api.applyViewState(state, { columns: "merge" }); // retain later columns