Full Width Rows

Under normal operation, ag-Grid will render each row as a horizontal list of cells. Each cell in the row
will correspond to one column definition. It is possible to switch this off and allow you to provide
one component to span the entire width of the grid. This is useful if you want to embed a complex component
inside the grid instead of rendering a list of cells. This technique can be used for displaying panels
of information, including forms and embedding other grids. The pattern of having grids inside grids
is sometimes referred to as Master Detail grids.

Understanding Full Width

A fullWidth (full width) component takes up the entire width of the grid. A fullWidth component:

is not impacted by horizontal scrolling.

is the width of the grid, regardless of what columns are present.

is not impacted by pinned sections of the grid, will span left and right pinned areas regardless.

does not participate in the navigation, rangeSelection (ag-Grid Enterprise) or contextMenu (ag-Grid Enterprise)
of the main grid.

To use fullWidth, you must:

Implement the isFullWidthCell(rowNode) callback, to tell the grid which rows should be treated
as fullWidth.

Provide a fullWidthCellRenderer, to tell the grid what cellRenderer to use when doing
fullWidth rendering.

The cellRenderer can be any ag-Grid cellRenderer. Refer to
Cell Rendering on how to build cellRenderers. The cellRenderer for fullWidth has
one difference to normal cellRenderers, that is the parameters passed are missing the value and column information
as the cellRenderer, by definition, is not tied to a particular column. Instead you should work off the data
parameter, which represents the value for the entire row.

The isFullWidthCell(rowNode) callback takes a rowNode as input and should return a boolean true
(use fullWidth) or false (do not use fullWidth and render as normal).

Sorting and Filtering

Sorting and Filtering are NOT impacted by fullWidth. fullWidth is a rendering time feature. The sorting
and filtering applied to the data is done before rendering and is not impacted.

Basic fullWidth Example

Below shows a basic fullWidth example. The example's data is minimalistic to focus on how
the fullWidth feature is configured. For demonstration, the pinned rows are shaded blue (with
fullWidth a darker shade of blue) and body fullWidth rows are green.
The following points should be noted:

fullWidth can be applied to any row, including pinned rows. The example demonstrates fullWidth in
floating top, floating bottom and body rows.

fullWidth rows can be of any height, which is specified in the usual way using the getRowHeight()
callback. The example sets body fullWidth rows to 55px.

The floating fullWidth rows are not impacted by either the vertical or horizontal scrolling.

The body fullWidth rows are impacted by vertical scrolling only, and not the horizontal scrolling.

The fullWidth rows span the entire grid, including the pinned left and pinned right sections.

The fullWidth rows are the width of the grid, despite the grid requiring horizontal scrolling to show the cells.

The example is showing a flat list of data, there is no grouping or parent / child relationships between
the fullWidth and normal rows.

Parent / Child Relationships

ag-Grid's fullWidth concept is not related to the grids expand / collapse feature, however it often makes
sense to use the fullWidth with parent / child relationships. You will probably want to use fullWidth either
with Row Grouping, Tree Data
or Flower Nodes (explained below). It is up to you to decide what the child data is that gets passed to your
cellRenderer as the row data item.

Some other JavaScript grids cater directly for Master / Detail grids. This is not the pattern of ag-Grid. ag-Grid
allows you to embed another ag-Grid if you want, but does not constrain you to this. You can embed whatever
you like, even another vendors data grid. This control makes ag-Grid's fullWidth feature more powerful
than grids that cater for master / detail directly.

Expand Groups

To have the functionality to expand a group (ie have plus (+) and minus (-) icons, you need to configure the
group cellRenderer on one of the column definitions. This is done as follows:
colDef.cellRenderer = 'group'

Flower Nodes

You can mark a row as a 'can flower' node to tell the grid the row can be expanded even though it is not
a group (ie it has no children). This is useful if you have data that either a) has no grouping
in it but you still want to expand rows to show a master / detail panel or b) the data is already
grouped by another mechanism eg by using the grids internal grouping feature.

To tell the grid that a row 'can flower' (ie should be expandable) then implement the
doesDataFlower(dataItem) callback.

doesDataFlower gets called exactly once for each data item you provide to the grid. It does not
get called for groups when using the grids built in grouping or pivoting features.

A row that 'can flower' is expandable. The child row is called the 'flower row'.
The 'flower row':

will share the same data item as its parent.

does not participate in filtering - it will show if parent is shown.

does not participate in sorting - it will always display below the parent.

Flower nodes work with inMemory row model only. They do not work with virtual pagination or viewport.
Why call them 'flowers'? Well the groupings are a tree structure. The tree structure contains
leaf nodes, that is the bottom nodes of the tree. Leafs can then in turn have flowers.

Example - Expanding to Child Panels

Below shows using ag-Grid to show more information about a country when you click 'expand' on a country name.
The following should be noted from the example:

isFullWidthCell(rowNode) callback is configured to use fullWidth on all child rows (that is,
rowNode.level === 1).

getRowHeight(params) callback is configured to make each fullWidth panel 100px, ie bigger than
the normal rows.

doesDataFlower(dataItem) is used to tell the grid which rows to expand. All rows are maked
expandable except Venezuela

fullWidthCellRenderer is configured with a cellRenderer component.

The consumeMouseWheelOnCenterText method stops mouseWheel events getting processed by the grid
when the mouse is over the embedded text area. This stops both the text area AND the grid scrolling when
the user uses the mouse wheel.

ag-Grid is programmed to have mouse wheel events on the embedded fullWidth component scroll the main body.
This is because the component is not part of the main body DOM, however it appears to be as far as the user
is concerned, so the user would expect the wheel to scroll the main body. If this is not the case, and
you want the wheel to to something inside your component (such as scroll the text area in the example), then
you need to stop the mouse wheel events from bubbling up to the grid (as done in the example for the text area).

Embedded Full Width vs Normal Full Width

The grid uses a trick of placing the fullWidth rows in another div, outside of the main rows and cells.
This is what allows the fullWidth rows to span across the pinned areas. One downside of this approach
is speed in slower browsers (eg Internet Explorer) where vertical scrolling results in a lag, where
the fullWidth rows scroll after the main rows scroll.

If you want to embed the fullWith rows with the rest of the rows, and not be impacted by the scrolling
performance issue, then set embedFullWidthRows=true. The example below demonstrates as follows:

The fullWidth rows are embedded with the main rows.

Each fullWidth row is split into the pinned areas.

Each fullWidth row horizontally scrolls with the main grid.

Welcome to ag-Grid

Niall Crosby spent years building Enterprise Web Applications and found the JavaScript
data grid choice frustrating. That frustration led to Niall quitting his job and
setting up the ag-Grid project.
Read more about ag-Grid →