Blazor DataGrid Example - Row and Column Spanning

This sample demonstrates the DataGrid automatic cell merging feature for combining adjacent cells with identical values.

The Blazor DataGrid supports automatic cell merging, allowing adjacent cells with identical values to be combined horizontally, vertically, or in both directions. This creates a cleaner and more readable data layout.

The cell merging behavior is controlled by the AutoSpan property, which is bound to a dropdown selector in this demo. Available merging modes are:

• None - Disables cell merging; displays original grid layout
• Row - Merges identical cells horizontally across columns within the same row
• Column - Merges identical cells vertically down the same column
• HorizontalAndVertical - Applies both horizontal and vertical cell merging simultaneously (default)

Select different modes from the dropdown to see how the cell merging behavior changes. By default, AutoSpanMode.HorizontalAndVertical is applied, providing optimal readability by merging identical cells across both rows and columns.

For more detailed information about row and column spanning, refer to the row and column spanning documentation.