Row Spanning

By default, each cell will take up the height of one row. You can change this behavior to allow cells to span multiple
rows. This feature is similar to ‘cell merging’ in Excel or ‘row spanning’ in HTML tables.

Configuring Row Spanning

To allow row spanning, the grid must have the Grid Option:

dashGridOptions = {'suppressRowTransform': True}

Row spanning is then configured at the Column Definition level. To have a cell span more than one row, return how many
rows to span in the function rowSpan.

rowSpan (Function) By default, each cell will take up the height of one row. You can change this behavior to allow
cells to span multiple rows.

columnDefs = [
    {
        'field': 'country',
        # row span is 2 for rows with Russia, but 1 for everything else
        'rowSpan': {'function': "params.data.country === 'Russia' ? 2 : 1"}
    },
    # other column definitions ...
]

grid = dag.AgGrid(
    columnDefs=columnDefs,
    dashGridOptions={'suppressRowTransform': True}
    # other grid options
)

Setting the property suppressRowTransform=True stops the grid positioning rows using CSS transform and instead
the grid will use CSS top.
For an explanation of the difference between these two methods, see the
article JavaScript
GPU Animation with Transform and Translate.
The reason row span will not work with CSS transform is that CSS transform creates a stacking context which
constrains CSS z-index from placing cells on top of other cells in another row.
Having cells extend into other rows is necessary for row span, meaning it will not work when using CSS transform.
The downside to not using transform is performance; row animation (after sort or filter) will be slower.

Row Spanning Simple Example

Below is a simple example using row spanning. The example doesn’t make much sense, it just arbitrarily sets row span on
some cells for demonstration purposes.

View the CSS classes used for this example

These CSS classes must be added to any *.css file in the assets folder.
See Loading CSS files for more information.

.spanned-row {
    background-color: #119dff;
}

View the JavaScript functions used for this example

These JavaScript functions must be added to the dashAgGridFunctions.js file in the assets folder.
See JavaScript Functions
for more information.

var dagfuncs = window.dashAgGridFunctions = window.dashAgGridFunctions || {};

dagfuncs.rowSpanningSimple = function (params) {
    var athlete = params.data ? params.data.athlete : undefined;
    if (athlete === 'Aleksey Nemov') {
        // have all Russia age columns width 2
        return 2;
    } else if (athlete === 'Ryan Lochte') {
        // have all United States column width 4
        return 4;
    } else {
        // all other rows should be just normal
        return 1;
    }
}

Row Spanning Complex Example

Row spanning will typically be used for creating reports with AG Grid. Below is something that would be more typical of
the row spanning feature. The following can be noted from the example:

<br>

View the CSS classes used for this example

These CSS classes must be added to any *.css file in the assets folder.
See Loading CSS files for more information.

.show-cell {
    background: #119dff;
    border-left: 1px solid lightgrey !important;
    border-right: 1px solid lightgrey !important;
    border-bottom: 1px solid lightgrey !important;
}

.show-name {
    font-weight: bold;
}

.show-presenter {
    font-style: italic;
}

View the JavaScript functions used for this example

These JavaScript functions must be added to the dashAgGridFunctions.js file in the assets folder.
See JavaScript Functions
for more information.

var dagfuncs = window.dashAgGridFunctions = window.dashAgGridFunctions || {};

dagfuncs.rowSpanningComplex = function (params) {
    if (params.data.show) {
        return 4;
    } else {
        return 1;
    }
}

View Custom Cell Renderer used for this example

This JavaScript function must be added to the dashAgGridComponentFunctions.js file in the assets folder.
See Custom Components for more
information.

var dagcomponentfuncs = (window.dashAgGridComponentFunctions = window.dashAgGridComponentFunctions || {});

dagcomponentfuncs.RowSpanningComplexCellRenderer = function (props) {
    let children;
    if (props.value) {
        children = [
            React.createElement('div', {className: 'show-name'}, props.value.name),
            React.createElement('div', {className: 'show-presenter'}, props.value.presenter),
        ]
    }
    return React.createElement('div', null, children)
}

Constraints with Row Spanning

Row Spanning breaks out of the row / cell calculations that a lot of features in the grid are based on. If using Row
Spanning, be aware of the following: