syidaxgrid
Home Pricing Settings

GRID FEATURE

Row height and pinned rows

Row height, top/bottom pinned rows, full-width rows, and merged cells are separate layout features. Choose based on whether you need persistent summaries or wide detail content.

Markdown source Features

How it works and when to use it

Pinned rows use separate data. They are not automatic totals; to update totals after filtering or editing, supply newly calculated values from your app.

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. Pin a bottom summary row

Calculate total quantity across the current data and display it in a separate row.

javascript
const quantity = grid.rowData.reduce((sum, row) => sum + Number(row.quantity || 0), 0);
grid.pinnedBottomRowData = [{ id: 'SUMMARY', product: 'Total quantity', quantity }];

Verify the result: The summary row remains while scrolling. This calculation uses all rowData, not the filtered result.

Example 2. Readable row heights

Offer a setting in your app for users to change row density.

javascript
grid.rowHeight = 44;
await grid.refreshRowHeights();

Verify the result: The layout reflects the new row heights. With automatic height, also inspect wrapping and cell content.

Example 3. Diagnose spans, full-width rows, and pinning together

When combining structural features on the same data, query the actual applied result.

javascript
console.log(await grid.getPinnedRows());
console.log(await grid.getFullWidthRowInfo());

Verify the result: Inspect which data uses full-width rows and pinned areas. For detailed span behavior, follow the argument contracts of getCellSpan and getSpanInteraction.

Combining features and troubleshooting

Merged boundaries change with sorting and filtering. Review both displayed ranges and merge handling during copying and export.

Do not assume regular column editing applies unchanged to full-width rows. If a layout is rejected, read reports such as rowLayoutRefused and resolve the cause.

Related reading