Column Pinning

Pin columns to the left or right side of the grid by dragging the column header to the left or right edge of the grid.
Setting the pinned property to true in the column definition to pin a column to the left.
Setting the pinned property to either left or right to pin a column accordingly.

Summary

This chapter introduced the details for specifying columns definitions.

We covered:

Setting the default column definition
Defining reusable column types that can be applied to columns in a grid, or multiple grids in an Angular application.
Controlling if columns are locked, can be moved, or programmatically moving columns using the Column API.
Allow resizing of columns or attempting to automatically resize all columns to fit in the viewport using the Grid API.
Pinning columns to the left or right side of the grid.

Define a default ColDef object that is applied to all columns in the grid.
Override properties in the default column definition in a specific column.
Bind the default column definition object to the defaultColDef input binding on the <ag-grid-angular> component.

Defining a reusable definition for a type of column for a grid, or for multiple grids in an application, or perhaps even, multiple grids across several application in your organization.
Binding the column type using the columnTypes input binding on the <ag-grid-angular> component.
Column types are defined as an object, where the key for each property in the string key to the column type, and the value is a ColDef object.
Specify one or more type keys in the type property for a column definition to inherit the type's column definition.

Moving columns in ag-Grid is as easy as dragging around the columns to change their order.
We can specify the lockPosition property in the column definition to lock the position of the column.
We can specify the suppressMovable property in the column definition to prevent the column from being moved.
We can also use the suppressDragLeaveHidesColumn input binding on the <ag-grid-angular> component to prevent columns from being hidden when dragged outside the scope of the grid.
Leverage the Column API's moveColumn and moveColumns methods to programmatically moving columns in the grid.

Use the resizable property in the column definition to toggle the ability to resize columns.
Set the width property in the column definition to hard-code the width of a column.
Instruct the grid to attempt to resize all columns in the grid to fit in the viewport using the sizeColumnsToFit() method in the Grid API.