- Define a function that returns a boolean indicating if a cell is full width, and then provide a reference to this function to the
isFullWithCellinput binding on the
fullWidthCellRendererinput binding provides a hook to a function that returns the cell renderer for a full width cell.
In this chapter we learned how to control the behavior and functionality of rows in the grid.
- 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.
Row Sorting Summary
- Use the
sortableproperty 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
sortingOrderproperty in the column definition.
- Set the default sorting order for all columns using the
sortingOrderinput binding on the
- Specify the key for multi-column sorting via the
Row Dragging Summary
- Set the
rowDragproperty for a column that contains a handle for dragging rows in the grid.
- Use the managed row dragging mode by setting the
rowDragManagedinput binding on the
animateRowsinput 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
Row Spanning Summary
- For row spanning to work, the first thing we need to do is use the
suppressRowTransforminput binding on the
<ag-grid-angular>component to disable the highly-formant CSS transforms that position the cells in ag-Grid.
- Set the
rowSpanproperty 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
cellClassRuleproperty for a column definition to style cells that are spanning mutliple rows.
Row Pinning Summary
- Using the
pinnedTopRowDatainput binding on the
<ag-grid-angular>component enables us to specify row data that is pinned to the top of the grid. The
pinnedBottomRowDataprovides us the ability to pin row data to the bottom of the grid.
- Enable single (or multiple) row selecting using the
- Set the
checkboxSelectionproperty 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.
pinnedTopRowDatadoes 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.
Row Height Summary
- Set the
rowHeightinput binding on the
<ag-grid-angular>component to specify the height of all rows in the grid.
- Or, use the
getRowHeightinput 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
autoHeightproperty 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.