Full Width Cell

Define a function that returns a boolean indicating if a cell is full width, and then provide a reference to this function to the isFullWithCell input binding on the <ag-grid-angular> component.
The fullWidthCellRenderer input binding provides a hook to a function that returns the cell renderer for a full width cell.

Summary

In this chapter we learned how to control the behavior and functionality of rows in the grid.

We covered:

Enabling and disabling sorting of rows, or if necessary, overriding the default sorting order.
Row dragging has two different modes based on the requirements and the necessity for fine control over the behavior. The unmanaged row dragging mode is the easiest, but does have some limitiations. Managed row dragging mode provides us with the ability to programmatically control the behavior via several output event bindings. We can also specify which column contains the handle for row dragging.
Cells can span multiple rows if necessary, but it comes at a performance cost.
Pinning row data to either, or both, the top and bottom of the grid.
Controlling the height of rows in the grid, or allowing the grid to automatically calculate the height of rows based on the cell values for each row.
Programmatically enabling full-width rows as well as specifying a custom cell renderer for full-width cells.

Use the sortable property in the column definition to enable or disable sorting.
The default sort order is: ascending, descending, and then the original row data order. We can overide this behavior using the sortingOrder property in the column definition.
Set the default sorting order for all columns using the sortingOrder input binding on the <ag-grid-angular> component.
Specify the key for multi-column sorting via the multiSortKey input binding.

Set the rowDrag property for a column that contains a handle for dragging rows in the grid.
Use the managed row dragging mode by setting the rowDragManaged input binding on the <ag-grid-angular> component.
The animateRows input binding enables or disables animations when dragging rows.
Programmatically enable or disable row dragging using the setSuppressRowDrag() method in the Grid API.
Using unmanaged row dragging enables fine control over the row dragging behavior by binding to the rowDragEnter, rowDragEnd, rowDragMove, and rowDragLeave output bindings.

For row spanning to work, the first thing we need to do is use the suppressRowTransform input binding on the <ag-grid-angular> component to disable the highly-formant CSS transforms that position the cells in ag-Grid.
Set the rowSpan property for a column definition to a function that returns the number of rows a specific cell should span.
Row spanning will not provide grouping functionality. For that, you need to use the enterprise version of ag-Grid.
We can also set the cellClassRule property for a column definition to style cells that are spanning mutliple rows.

Using the pinnedTopRowData input binding on the <ag-grid-angular> component enables us to specify row data that is pinned to the top of the grid. The pinnedBottomRowData provides us the ability to pin row data to the bottom of the grid.
Enable single (or multiple) row selecting using the rowSelection input binding.
Set the checkboxSelection property for a column definition to include a checkbox in the column for all rows to enable the user to select rows in the grid UI.
The pinnedTopRowData does not have to be static or hard-coded row data, rather, we can leverage RxJS to stream the row data that the user selects to pin rows in the grid.

Set the rowHeight input binding on the <ag-grid-angular> component to specify the height of all rows in the grid.
Or, use the getRowHeight input binding to specify a function that is invoked with a params object that contains the data for each row, among many things, and returns the height for the row.
Set the autoHeight property for a column definition will enable the grid to automatically calculate the necessary height of a row to accomodate the contents of each cell value in the row.