Wijmo React Framework

Cell Merging for React Datagrids

Wijmo's React 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 React 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 React datagrid.

Header Merging Demo

Custom Merging

By default, React FlexGrid merges cells based on their content. If you with to use a different strategy for cell merging, the datagrid's functionality extends to support craeting 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 React custom merging manager that only merges cells in the datagrid with matching content to a neighboring cell content.

Restricted Merging Demo