Angular
Fundamentals of ag-Grid with Angular: Columns

Column Pinning

Goals

  • 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.

Default Column Definitions Summary

  • 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.

Column Types Summary

  • 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 Summary

  • 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.

Column Sizing Summary

  • 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.