Expand All

  Getting Started



  Row Models




  Third Party


Github stars make projects look great. Please help, donate a star, it's free.
Read about ag-Grid's Partnership with webpack.
Get informed on releases and other ag-Grid news only - never spam.
Follow on Twitter

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:

  1. Implement the isFullWidthCell(rowNode) callback, to tell the grid which rows should be treated as fullWidth.
  2. 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.

gridOptions.doesDataFlower = function(dataItem) { var canFlower = dataItem.checkSomeFlagThatYouSetOnTheData; return canFlower; }

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.