syidaxgrid
Home Pricing Settings

GRID FEATURE

Multi-level headers

Multi-level headers place related columns under a shared heading. Unlike row grouping, they do not change data counts or aggregate values.

Markdown source Features

How it works and when to use it

Specify groupId and children on parent groups, and field or colId on leaf columns that read values. Keeping group and column IDs distinct makes persistence and control clearer.

In the code, grid is the Grid element prepared in the installation chapter. Check each example's data and settings, and implement the app functions and server endpoints for your project.

Example 1. Separate order and pricing information

Group product and quantity under one heading and display unit price separately.

javascript
grid.columnDefs = [
  { groupId: 'order', headerName: 'Order details', children: [
    { field: 'product', headerName: 'Product' },
    { field: 'quantity', headerName: 'Quantity' }
  ] },
  { field: 'price', headerName: 'Unit price' }
];

Verify the result: Two columns appear under Order details. Source order objects can retain their flat structure.

Example 2. Control expansion

Configure some groups to collapse when screen space is limited.

javascript
await grid.setColumnGroupOpened('order', false);
// After the user chooses to show details
await grid.setColumnGroupOpened('order', true);

Verify the result: The specified group's expansion state changes. columnGroupShow also determines which child columns are actually hidden.

Example 3. Query live groups

Query the connected group object to display group information in a settings view.

javascript
const group = await grid.getColumnGroup('order');
const groups = await grid.getColumnGroups();
console.log(group, groups);

Verify the result: A missing group may return null. Distinguish serializable settings JSON from a live group reference.

Combining features and troubleshooting

A group with children is not itself a cell that reads row data. Assigning field to a group heading does not create a calculated column.

Combining pinning and hiding changes the visible group structure. Verify that headers remain readable in both pinned and regular areas.

Related reading