React Data GridFull Width Rows

react logo

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 and not use columns. 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.

You may be wondering what full width rows are useful for. Their usage is very rare and most applications will not use them. If you cannot think of a use case for it, then don't worry, do not use it. Full width rows were initially introduced into AG Grid to support Master / Detail before the grid provided direct support for master / detail. Now that master / detail is directly supported, the usefulness of full width is reduced.

Example of Full Width Rows

Below shows an example using full width. The following can be noted:

  • The rows for countries France, Italy and Peru have full width components instead of cells.

  • Sorting and filtering all work as if the data was displayed as normal.

Understanding Full Width

A fullWidth (full width) component takes up the entire width of the grid. A full width 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 isFullWidthRow(params) 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.