Skip to main content Skip to footer
JavaScript Icon

Cell Merging for JavaScript Datagrids

Wijmo's JavaScript datagrid, FlexGrid, allows users to merge data cells by matching content through the allowMerging property. Merge header cells, create custom cell merging rules, and set restrictions on how FlexGrid merges cells.

Cell Merging

Wijmo's JavaScript datagrid, FlexGrid, supports content-driven cell merging. Merge both cells and columns that contain matching data.

Cell Merging Demo

Cell Merging Documentation

Header Merging

When using multiple header rows, FlexGrid allows you to merge header cells. Group sub-headers in the column header row and have them span multiple rows in the JavaScript datagrid.

Header Merging Demo

Custom Merging

By default, JavaScript FlexGrid merges cells based on their content. If you wish to use a different strategy for cell merging, the datagrid's functionality extends to support creating a custom class that it uses to merge cells.

Custom Merging Demo

Custom Merging Documentation

Restricted Merging

By default, cell merging in FlexGrid merges cells that have the same content, regardless of the content in neighboring cells. Restrict this, for example, by creating a JavaScript custom merging manager that only merges cells in the datagrid with matching content to neighboring cell content.

Restricted Merging