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.
Below shows a simple example using full width. The following can be noted:
A fullWidth (full width) component takes up the entire width of the grid. A fullWidth component:
To use fullWidth, you must:
isFullWidthCell(rowNode)callback, to tell the grid which rows should be treated as fullWidth.
fullWidthCellRenderer, to tell the grid what cellRenderer to use when doing fullWidth rendering.
The cell renderer can be any ag-Grid cell renderer. Refer to Cell Rendering on how to build cell renderers. The cell renderer for fullWidth has one difference to normal cell renderers, 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.
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 are NOT impacted by full width. Full width is a rendering time feature. The sorting and filtering applied to the data is done before rendering and is not impacted.
Below shows a detailed full width example including pinned rows and columns. The example's data is minimalistic to focus on how the full width impacts rows. For demonstration, the pinned rows are shaded blue (with full width a darker shade of blue) and body full width rows are green. The following points should be noted:
getRowHeight()callback. The example sets body fullWidth rows to 55px.
The grid uses a trick of placing the full width rows in another div, outside of the main rows and cells. This is what allows the full width 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 full width rows scroll after the main rows scroll.
If you want to embed the full with 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: