Column Properties

Reference for common column properties used in ColDef and column definitions

Column properties define the behavior and appearance of individual columns in AG Grid. These properties are set via the ColDef interface.

Overview

Column properties can be set on individual columns or in defaultColDef to apply to all columns:

const gridOptions = {
  defaultColDef: {
    sortable: true,
    filter: true,
    resizable: true
  },
  columnDefs: [
    { field: 'name', headerName: 'Full Name', pinned: 'left' },
    { field: 'age', type: 'numericColumn' }
  ]
};

Display Properties

field · ColDefField<TData, TValue>

The field of the row object to get the cell’s data from. Deep references into a row object is supported via dot notation, i.e 'address.firstLine'.

{ field: 'name' }
{ field: 'address.city' } // nested field
{ field: 'scores.0' } // array index

headerName · string

The name to render in the column header. If not specified and field is specified, the field name will be used as the header name.

{ field: 'name', headerName: 'Full Name' }

hide · boolean | null · default: "false"

Set to true for this column to be hidden.

{ field: 'id', hide: true }

initialHide · boolean

Same as hide, except only applied when creating a new column. Not applied when updating column definitions.

Initial: This property is only used when creating columns.

{ field: 'advanced', initialHide: true }

lockVisible · boolean · default: "false"

Set to true to block making column visible / hidden via the UI (API will still work).

{ field: 'name', lockVisible: true }

Width Properties

width · number

Initial width in pixels for the cell. If no width or flex properties set, cell width will default to 200 pixels.

{ field: 'name', width: 150 }

initialWidth · number

Same as width, except only applied when creating a new column. Not applied when updating column definitions.

Initial: This property is only used when creating columns.

{ field: 'name', initialWidth: 200 }

minWidth · number

Minimum width in pixels for the cell.

{ field: 'name', minWidth: 100, resizable: true }

maxWidth · number

Maximum width in pixels for the cell.

{ field: 'description', maxWidth: 500, resizable: true }

flex · number | null

Equivalent to flex-grow in CSS. When flex is set on one or more columns, any width value is ignored and instead the remaining free space in the grid is divided among flex columns in proportion to their flex value.

{ field: 'name', flex: 1 },
{ field: 'description', flex: 2 } // twice as wide as name

resizable · boolean · default: "true"

Set to false to disable resizing which is enabled by default.

{ field: 'name', resizable: false }

Sorting

sortable · boolean · default: "true"

Set to false to disable sorting which is enabled by default.

{ field: 'actions', sortable: false }

sort · SortDirection | SortDef

Set the default sort. Can be 'asc', 'desc', or a SortDef object.

{ field: 'age', sort: 'desc' }
{ field: 'score', sort: { type: 'absolute', direction: 'desc' } }

sortIndex · number | null

If sorting more than one column by default, specifies order in which the sorting should be applied.

{ field: 'country', sort: 'asc', sortIndex: 0 },
{ field: 'city', sort: 'asc', sortIndex: 1 }

comparator · SortComparatorFn<TData, TValue>

Override the default sorting order by providing a custom sort comparator.

{
  field: 'name',
  comparator: (valueA, valueB, nodeA, nodeB, isDescending) => {
    return valueA.toLowerCase().localeCompare(valueB.toLowerCase());
  }
}

unSortIcon · boolean · default: "false"

Set to true if you want the unsorted icon to be shown when no sort is applied to this column.

{ field: 'name', sortable: true, unSortIcon: true }

Filtering

filter · any

Filter to use for this column. Set to true to use the default filter. Set to the name of a provided filter or a custom filter component.

{ field: 'age', filter: 'agNumberColumnFilter' }
{ field: 'name', filter: true } // uses default filter
{ field: 'custom', filter: MyCustomFilter }

filterParams · any

Params to be passed to the filter component specified in filter.

{
  field: 'age',
  filter: 'agNumberColumnFilter',
  filterParams: {
    buttons: ['apply', 'reset'],
    closeOnApply: true
  }
}

floatingFilter · boolean · default: "false"

Whether to display a floating filter for this column.

{ field: 'name', filter: true, floatingFilter: true }

Pinning

pinned · boolean | 'left' | 'right' | null

Pin a column to one side: right or left. A value of true is converted to 'left'.

{ field: 'name', pinned: 'left' }
{ field: 'actions', pinned: 'right' }

lockPosition · boolean | 'left' | 'right'

Lock a column to position to 'left' or 'right' to always have this column displayed in that position. true is treated as 'left'.

{ field: 'name', lockPosition: 'left' }

lockPinned · boolean · default: "false"

Set to true to block the user pinning the column, the column can only be pinned via definitions or API.

{ field: 'name', pinned: 'left', lockPinned: true }

Value Handling

valueGetter · string | ValueGetterFunc<TData, TValue>

Function or expression. Gets the value from your data for display.

{
  headerName: 'Full Name',
  valueGetter: params => `${params.data.firstName} ${params.data.lastName}`
}

valueFormatter · string | ValueFormatterFunc<TData, TValue>

A function or expression to format a value, should return a string.

{
  field: 'price',
  valueFormatter: params => '$' + params.value.toFixed(2)
}

valueSetter · string | ValueSetterFunc<TData, TValue>

Function or expression. Sets the value into your data for saving. Return true if the data changed.

{
  field: 'price',
  editable: true,
  valueSetter: params => {
    const newValue = parseFloat(params.newValue);
    if (!isNaN(newValue)) {
      params.data.price = newValue;
      return true;
    }
    return false;
  }
}

valueParser · string | ValueParserFunc<TData, TValue>

Function or expression. Parses the value for saving.

{
  field: 'age',
  editable: true,
  valueParser: params => Number(params.newValue)
}

Cell Rendering

cellRenderer · any

Provide your own cell Renderer component for this column’s cells.

{ field: 'status', cellRenderer: StatusCellRenderer }
{ field: 'actions', cellRenderer: 'agAnimateShowChangeCellRenderer' }

cellRendererParams · any

Params to be passed to the cellRenderer component.

{
  field: 'button',
  cellRenderer: ButtonCellRenderer,
  cellRendererParams: {
    clicked: (data) => console.log('Clicked:', data)
  }
}

Cell Editing

editable · boolean | EditableCallback<TData, TValue> · default: "false"

Set to true if this column is editable, otherwise false. Can also be a function to have different rows editable.

{ field: 'name', editable: true }
{ field: 'age', editable: params => params.data.status === 'active' }

cellEditor · any

Provide your own cell editor component for this column’s cells.

{ field: 'country', editable: true, cellEditor: 'agSelectCellEditor' }
{ field: 'rating', editable: true, cellEditor: CustomRatingEditor }

cellEditorParams · any

Params to be passed to the cellEditor component.

{
  field: 'country',
  editable: true,
  cellEditor: 'agSelectCellEditor',
  cellEditorParams: {
    values: ['USA', 'UK', 'Canada', 'Australia']
  }
}

singleClickEdit · boolean · default: "false"

Set to true to have cells under this column enter edit mode after single click.

{ field: 'notes', editable: true, singleClickEdit: true }

Styling

cellClass · string | string[] | CellClassFunc<TData, TValue>

Class to use for the cell. Can be string, array of strings, or function that returns a string or array of strings.

Module: CellStyleModule

{ field: 'status', cellClass: 'status-cell' }
{ field: 'priority', cellClass: params => `priority-${params.value}` }

cellStyle · CellStyle | CellStyleFunc<TData, TValue>

An object of CSS values / or function returning an object of CSS values for a particular cell.

Module: CellStyleModule

{
  field: 'status',
  cellStyle: params => {
    if (params.value === 'active') {
      return { backgroundColor: 'lightgreen' };
    }
    return null;
  }
}

headerClass · HeaderClass<TData, TValue>

CSS class to use for the header cell. Can be a string, array of strings, or function.

{ field: 'priority', headerClass: 'priority-header' }

Type & Data Type

type · string | string[]

A comma separated string or array of strings containing ColumnType keys which can be used as a template for a column. This helps to reduce duplication of properties when you have a lot of common column properties.

{ field: 'age', type: 'numericColumn' }
{ field: 'date', type: ['dateColumn', 'nonEditableColumn'] }

cellDataType · boolean | string · default: "true"

The data type of the cell values for this column. Can either infer the data type from the row data (true), define a specific data type (string), or have no data type (false).

{ field: 'age', cellDataType: 'number' }
{ field: 'birthDate', cellDataType: 'date' }
{ field: 'active', cellDataType: 'boolean' }

Related APIs

Column Definitions

Complete ColDef interface reference

Column Events

Events fired by column interactions

GridApi

Programmatic column control