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.
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 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 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.
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:
getRowHeight()callback. The example sets body fullWidth rows to 55px.
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.
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:
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 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':
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:
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: