Results:
Loading...
Javascript Data GridJavascriptReact Data GridReactAngular Data GridAngularVue Data GridVue

JavaScript Data GridColumn Properties

Properties are available for columns ColDef and column groups ColGroupDef. For column groups, the property children is mandatory. When the grid sees children it knows it's a column group.

Typescript supports a generic row data type via ColDef<TData> and ColDefGroup<TData>. If not set TData defaults to any. See Typescript Generics for more details.

Columns

field
string
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'. See Accessing Row Data Values.
colId
string
The unique ID to give the column. This is optional. If missing, the ID will default to the field. If both field and colId are missing, a unique ID will be generated. This ID is used to identify the column in the API for sorting, filtering etc.
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. See Column Types.
valueGetter
string | ValueGetterFunc
Function or expression. Gets the value from your data for display. See Value Getters.
valueGetter: string | ValueGetterFunc<TData>;

interface ValueGetterFunc<TData = any> {
    (params: ValueGetterParams<TData>) : any
}

interface ValueGetterParams<TData = any> {
  // A utility method for getting other column values 
  getValue: (field: string) => any;
  // Row node for the given row 
  node: IRowNode<TData> | null;
  // Data associated with the node 
  data: TData | undefined;
  // Column for this callback 
  column: Column;
  // ColDef provided for this column 
  colDef: ColDef<TData>;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}
valueFormatter
string | ValueFormatterFunc
A function or expression to format a value, should return a string. Not used for CSV export or copy to clipboard, only for UI cell rendering. See Value Formatters.
valueFormatter: string | ValueFormatterFunc<TData>;

interface ValueFormatterFunc<TData = any> {
    (params: ValueFormatterParams<TData>) : string
}

interface ValueFormatterParams<TData = any, TValue = any> {
  // Value for the cell. 
  value: TValue;
  // Row node for the given row 
  node: IRowNode<TData> | null;
  // Data associated with the node 
  data: TData | undefined;
  // Column for this callback 
  column: Column;
  // ColDef provided for this column 
  colDef: ColDef<TData>;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}
refData
{ [key: string]: string; }
Provided a reference data map to be used to map column values to their respective value from the map. See Using the 'refData' Property.
keyCreator
Function
Function to return a string key for a value. This string is used for grouping, Set filtering, and searching within cell editor dropdowns. When filtering and searching the string is exposed to the user, so make sure to return a human-readable value. 
keyCreator = (
    params: KeyCreatorParams<TData>
) => string;

interface KeyCreatorParams<TData = any, TValue = any> {
  // Value for the cell. 
  value: TValue;
  // Row node for the given row 
  node: IRowNode<TData> | null;
  // Data associated with the node 
  data: TData;
  // Column for this callback 
  column: Column;
  // ColDef provided for this column 
  colDef: ColDef<TData>;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}
equals
Function
Custom comparator for values, used by renderer to know if values have changed. Cells who's values have not changed don't get refreshed. By default the grid uses === is used which should work for most use cases. See Change Detection Comparing Values.
equals = (
    valueA: any,
    valueB: any
) => boolean;
checkboxSelection
boolean | CheckboxSelectionCallback
Set to true (or return true from function) to render a selection checkbox in the column.
Default: false 
checkboxSelection: boolean | CheckboxSelectionCallback<TData>;

interface CheckboxSelectionCallback<TData = any> {
    (params: CheckboxSelectionCallbackParams<TData>) : boolean
}

interface CheckboxSelectionCallbackParams<TData = any> {
  // Row node for the given row 
  node: IRowNode<TData>;
  // Data associated with the node. Will be `undefined` for group rows. 
  data: TData | undefined;
  // Column for this callback 
  column: Column;
  // ColDef provided for this column 
  colDef: ColDef<TData>;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}
showDisabledCheckboxes
boolean
Set to true to display a disabled checkbox when row is not selectable and checkboxes are enabled.
Default: false
toolPanelClass
ToolPanelClass
CSS class to use for the tool panel cell. Can be a string, array of strings, or function. 
toolPanelClass: ToolPanelClass<TData>;

type ToolPanelClass = 
      string 
    | string[] 
    | ((params: ToolPanelClassParams<TData>) => string | string[] | undefined)


interface ToolPanelClassParams<TData = any> {
  colDef: AbstractColDef<TData>;
  column?: Column | null;
  columnGroup?: ProvidedColumnGroup | null;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}
suppressColumnsToolPanel
boolean
Set to true if you do not want this column or group to appear in the Columns Tool Panel.
Default: false
columnGroupShow
ColumnGroupShowType
Whether to only show the column when the group is open / closed. If not set the column is always displayed as part of the group. 
columnGroupShow: ColumnGroupShowType;

type ColumnGroupShowType = 'open' | 'closed'
icons
{ [key: string]: Function | string; }
Icons to use inside the column instead of the grid's default icons. Leave undefined to use defaults. See Custom Icons.
suppressNavigable
boolean | SuppressNavigableCallback
Set to true if this column is not navigable (i.e. cannot be tabbed into), otherwise false. Can also be a callback function to have different rows navigable.
Default: false 
suppressNavigable: boolean | SuppressNavigableCallback<TData>;

interface SuppressNavigableCallback<TData = any> {
    (params: SuppressNavigableCallbackParams<TData>) : boolean
}

interface SuppressNavigableCallbackParams<TData = any> {
  // Row node for the given row 
  node: IRowNode<TData>;
  // Data associated with the node. Will be `undefined` for group rows. 
  data: TData | undefined;
  // Column for this callback 
  column: Column;
  // ColDef provided for this column 
  colDef: ColDef<TData>;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}
suppressKeyboardEvent
Function
Allows the user to suppress certain keyboard events in the grid cell. See Suppress Keyboard Events.
Default: false 
suppressKeyboardEvent = (
    params: SuppressKeyboardEventParams<TData>
) => boolean;

interface SuppressKeyboardEventParams<TData = any> {
  // The keyboard event the grid received 
  event: KeyboardEvent;
  // Whether the cell is editing or not 
  editing: boolean;
  // Row node for the given row 
  node: IRowNode<TData>;
  // Data associated with the node. Will be `undefined` for group rows. 
  data: TData | undefined;
  // Column for this callback 
  column: Column;
  // ColDef provided for this column 
  colDef: ColDef<TData>;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}
suppressPaste
boolean | SuppressPasteCallback
Pasting is on by default as long as cells are editable (non-editable cells cannot be modified, even with a paste operation). Set to true turn paste operations off. 
suppressPaste: boolean | SuppressPasteCallback<TData>;

interface SuppressPasteCallback<TData = any> {
    (params: SuppressPasteCallbackParams<TData>) : boolean
}

interface SuppressPasteCallbackParams<TData = any> {
  // Row node for the given row 
  node: IRowNode<TData>;
  // Data associated with the node. Will be `undefined` for group rows. 
  data: TData | undefined;
  // Column for this callback 
  column: Column;
  // ColDef provided for this column 
  colDef: ColDef<TData>;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}
suppressFillHandle
boolean
Set to true to prevent the fillHandle from being rendered in any cell that belongs to this column See Suppressing the Fill Handle.

Columns: Display

hide
boolean
Set to true for this column to be hidden.
Default: false
initialHide
boolean
Same as hide, except only applied when creating a new column. Not applied when updating column definitions.
lockVisible
boolean
Set to true to block making column visible / hidden via the UI (API will still work).
Default: false
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'
suppressMovable
boolean
Set to true if you do not want this column to be movable via dragging.
Default: false

Columns: Editing

See Cell Editing for more information.

editable
boolean | EditableCallback
Set to true if this column is editable, otherwise false. Can also be a function to have different rows editable.
Default: false 
editable: boolean | EditableCallback<TData>;

interface EditableCallback<TData = any> {
    (params: EditableCallbackParams<TData>) : boolean
}

interface EditableCallbackParams<TData = any> {
  // Row node for the given row 
  node: IRowNode<TData>;
  // Data associated with the node. Will be `undefined` for group rows. 
  data: TData | undefined;
  // Column for this callback 
  column: Column;
  // ColDef provided for this column 
  colDef: ColDef<TData>;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}
valueSetter
string | ValueSetterFunc
Function or expression. Custom function to modify your data based off the new value for saving. Return true if the data changed. See Saving Values.
valueSetter: string | ValueSetterFunc<TData>;

interface ValueSetterFunc<TData = any> {
    (params: ValueSetterParams<TData>) : boolean
}

interface ValueSetterParams<TData = any> {
  // The value before the change 
  oldValue: any;
  // The value after the change 
  newValue: any;
  // Row node for the given row 
  node: IRowNode<TData> | null;
  // Data associated with the node 
  data: TData;
  // Column for this callback 
  column: Column;
  // ColDef provided for this column 
  colDef: ColDef<TData>;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}
valueParser
string | ValueParserFunc
Function or expression. Parses the value for saving. See Parsing Values.
valueParser: string | ValueParserFunc<TData>;

interface ValueParserFunc<TData = any, TValue = any> {
    (params: ValueParserParams<TData>) : TValue
}

interface ValueParserParams<TData = any> {
  // The value before the change 
  oldValue: any;
  // The value after the change 
  newValue: any;
  // Row node for the given row 
  node: IRowNode<TData> | null;
  // Data associated with the node 
  data: TData;
  // Column for this callback 
  column: Column;
  // ColDef provided for this column 
  colDef: ColDef<TData>;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}
cellEditor
any
Provide your own cell editor component for this column's cells. See Cell Editors.
cellEditorParams
any
Params to be passed to the cellEditor component.
cellEditorSelector
CellEditorSelectorFunc
Callback to select which cell editor to be used for a given row within the same column. See Many Editors One Column.
cellEditorSelector: CellEditorSelectorFunc<TData>;

interface CellEditorSelectorFunc<TData = any> {
    (params: ICellEditorParams<TData>) : CellEditorSelectorResult | undefined
}

interface CellEditorSelectorResult {
  // Equivalent of setting `colDef.cellEditor` 
  component?: any;
  // Equivalent of setting `colDef.cellEditorParams` 
  params?: any;
  // Equivalent of setting `colDef.cellEditorPopup` 
  popup?: boolean;
  // Equivalent of setting `colDef.cellEditorPopupPosition` 
  popupPosition?: 'over' | 'under';
}
cellEditorPopup
boolean
Set to true, to have the cell editor appear in a popup.
cellEditorPopupPosition
'over' | 'under'
Set the position for the popup cell editor. Possible values are
  • over Popup will be positioned over the cell
  • under Popup will be positioned below the cell leaving the cell value visible.

    • Default: over.
    singleClickEdit
    boolean
    Set to true to have cells under this column enter edit mode after single click.
    Default: false

    Columns: Events

    onCellValueChanged
    NewValueParams
    Callback for after the value of a cell has changed, either due to editing or the application calling api.setValue(). 
    onCellValueChanged = (
    event: NewValueParams<TData>
) => void;

interface NewValueParams<TData = any> {
  // The value before the change 
  oldValue: any;
  // The value after the change 
  newValue: any;
  // Row node for the given row 
  node: IRowNode<TData> | null;
  // Data associated with the node 
  data: TData;
  // Column for this callback 
  column: Column;
  // ColDef provided for this column 
  colDef: ColDef<TData>;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}
    onCellClicked
    CellClickedEvent
    Callback called when a cell is clicked. 
    onCellClicked = (
    event: CellClickedEvent<TData>
) => void;

interface CellClickedEvent<TData = any, TValue = any> {
  column: Column;
  colDef: ColDef<TData>;
  // The value for the cell if available otherwise undefined. 
  value: TValue | undefined;
  // The user provided data for the row. Data is `undefined` for row groups. 
  data: TData | undefined;
  // The row node. 
  node: IRowNode<TData>;
  // The visible row index for the row 
  rowIndex: number | null;
  // Either 'top', 'bottom' or null / undefined (if not set) 
  rowPinned: RowPinnedType;
  // If event was due to browser event (eg click), this is the browser event 
  event?: Event | null;
  // If the browser `event` is present the `eventPath` persists the `event.composedPath()` result for access within AG Grid event handlers.  
  eventPath?: EventTarget[];
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // Event identifier 
  type: string;
}

type RowPinnedType = 
      'top' 
    | 'bottom' 
    | null 
    | undefined
    onCellDoubleClicked
    CellDoubleClickedEvent
    Callback called when a cell is double clicked. 
    onCellDoubleClicked = (
    event: CellDoubleClickedEvent<TData>
) => void;

interface CellDoubleClickedEvent<TData = any, TValue = any> {
  column: Column;
  colDef: ColDef<TData>;
  // The value for the cell if available otherwise undefined. 
  value: TValue | undefined;
  // The user provided data for the row. Data is `undefined` for row groups. 
  data: TData | undefined;
  // The row node. 
  node: IRowNode<TData>;
  // The visible row index for the row 
  rowIndex: number | null;
  // Either 'top', 'bottom' or null / undefined (if not set) 
  rowPinned: RowPinnedType;
  // If event was due to browser event (eg click), this is the browser event 
  event?: Event | null;
  // If the browser `event` is present the `eventPath` persists the `event.composedPath()` result for access within AG Grid event handlers.  
  eventPath?: EventTarget[];
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // Event identifier 
  type: string;
}

type RowPinnedType = 
      'top' 
    | 'bottom' 
    | null 
    | undefined
    onCellContextMenu
    CellContextMenuEvent
    Callback called when a cell is right clicked. 
    onCellContextMenu = (
    event: CellContextMenuEvent<TData>
) => void;

interface CellContextMenuEvent<TData = any, TValue = any> {
  column: Column;
  colDef: ColDef<TData>;
  // The value for the cell if available otherwise undefined. 
  value: TValue | undefined;
  // The user provided data for the row. Data is `undefined` for row groups. 
  data: TData | undefined;
  // The row node. 
  node: IRowNode<TData>;
  // The visible row index for the row 
  rowIndex: number | null;
  // Either 'top', 'bottom' or null / undefined (if not set) 
  rowPinned: RowPinnedType;
  // If event was due to browser event (eg click), this is the browser event 
  event?: Event | null;
  // If the browser `event` is present the `eventPath` persists the `event.composedPath()` result for access within AG Grid event handlers.  
  eventPath?: EventTarget[];
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
  // Event identifier 
  type: string;
}

type RowPinnedType = 
      'top' 
    | 'bottom' 
    | null 
    | undefined

    Columns: Filter

    See Filtering for more information.

    filter
    any
    Filter component to use for this column.
    Set to true to use the default filter.
    Set to the name of a Provided Filter or set to a IFilterComp. See Column Filters.
    filterParams
    any
    Params to be passed to the filter component specified in filter or filterFramework. See Filter Parameters.
    filterValueGetter
    string | ValueGetterFunc
    Function or expression. Gets the value for filtering purposes.
    filterValueGetter: string | ValueGetterFunc<TData>;

interface ValueGetterFunc<TData = any> {
    (params: ValueGetterParams<TData>) : any
}

interface ValueGetterParams<TData = any> {
  // A utility method for getting other column values 
  getValue: (field: string) => any;
  // Row node for the given row 
  node: IRowNode<TData> | null;
  // Data associated with the node 
  data: TData | undefined;
  // Column for this callback 
  column: Column;
  // ColDef provided for this column 
  colDef: ColDef<TData>;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}
    getQuickFilterText
    Function
    A function to tell the grid what Quick Filter text to use for this column if you don't want to use the default (which is calling toString on the value). See Overriding the Quick Filter Value.
    getQuickFilterText = (
    params: GetQuickFilterTextParams<TData>
) => string;

interface GetQuickFilterTextParams<TData = any, TValue = any> {
  // Value for the cell. 
  value: TValue;
  // Row node for the given row 
  node: IRowNode<TData>;
  // Row data associated with the node. 
  data: TData;
  // Column for this callback 
  column: Column;
  // ColDef provided for this column 
  colDef: ColDef<TData>;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}
    floatingFilter
    boolean
    Whether to display a floating filter for this column. See Floating Filter.
    Default: false
    floatingFilterComponent
    any
    The custom component to be used for rendering the floating filter. If none is specified the default AG Grid is used. See Floating Filter Component.
    floatingFilterComponentParams
    any
    Params to be passed to floatingFilterComponent or floatingFilterComponentFramework. See Floating Filter Parameters.
    suppressFiltersToolPanel
    boolean
    Set to true if you do not want this column (filter) or group (filter group) to appear in the Filters Tool Panel.
    Default: false

    Columns: Header

    See Column Headers for more information.

    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.
    headerValueGetter
    string | HeaderValueGetterFunc
    Function or expression. Gets the value for display in the header.
    headerValueGetter: string | HeaderValueGetterFunc<TData>;

interface HeaderValueGetterFunc<TData = any> {
    (params: HeaderValueGetterParams<TData>) : any
}

interface HeaderValueGetterParams<TData = any> {
  colDef: AbstractColDef<TData>;
  // Column for this callback if applicable
  column?: Column | null;
  // ColumnGroup for this callback if applicable 
  columnGroup?: ColumnGroup | ProvidedColumnGroup | null;
  // Original column group if applicable 
  providedColumnGroup: ProvidedColumnGroup | null;
  // Where the column is going to appear 
  location: string | null;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}
    headerTooltip
    string
    Tooltip for the column header
    headerClass
    HeaderClass
    CSS class to use for the header cell. Can be a string, array of strings, or function. 
    headerClass: HeaderClass;

type HeaderClass = 
      string 
    | string[] 
    | ((params: HeaderClassParams<TData>) => string | string[] | undefined)


interface HeaderClassParams<TData = any> {
  colDef: AbstractColDef<TData>;
  column?: Column | null;
  columnGroup?: ColumnGroup | null;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}
    headerComponent
    any
    The custom header group component to be used for rendering the component header. If none specified the default AG Grid is used. See Header Component.
    headerComponentParams
    any
    The parameters to be passed to the headerComponent.
    wrapHeaderText
    boolean
    If enabled then column header names that are too long for the column width will wrap onto the next line. Default false
    autoHeaderHeight
    boolean
    If enabled then the column header row will automatically adjust height to accommodate the size of the header cell. This can be useful when using your own headerComponent or long header names in conjunction with wrapHeaderText. See Auto Header Height.
    Default: false
    menuTabs
    ColumnMenuTab[]
    Set to an array containing zero, one or many of the following options: 'filterMenuTab' | 'generalMenuTab' | 'columnsMenuTab'. This is used to figure out which menu tabs are present and in which order the tabs are shown. 
    menuTabs: ColumnMenuTab[];

type ColumnMenuTab = 
      'filterMenuTab' 
    | 'generalMenuTab' 
    | 'columnsMenuTab'
    columnsMenuParams
    ColumnsMenuParams
    Params used to change the behaviour and appearance of the Columns Menu tab. See Customising the Columns Menu Tab.
    columnsMenuParams: ColumnsMenuParams;

interface ColumnsMenuParams {
  // To suppress updating the layout of columns as they are rearranged in the grid 
  suppressSyncLayoutWithGrid?: boolean;
  // To suppress Column Filter section
  suppressColumnFilter?: boolean;
  // To suppress Select / Un-select all widget
  suppressColumnSelectAll?: boolean;
  // To suppress Expand / Collapse all widget
  suppressColumnExpandAll?: boolean;
  // By default, column groups start expanded.
  // Pass true to default to contracted groups
  contractColumnSelection?: boolean;
  // Custom Columns Panel layout 
  columnLayout?: (ColDef | ColGroupDef)[];
}
    suppressMenu
    boolean
    Set to true if no menu should be shown for this column header.
    Default: false
    suppressHeaderKeyboardEvent
    Function
    Suppress the grid taking action for the relevant keyboard event when a header is focused. See Suppress Keyboard Events.
    suppressHeaderKeyboardEvent = (
    params: SuppressHeaderKeyboardEventParams<TData>
) => boolean;

interface SuppressHeaderKeyboardEventParams<TData = any> {
  column: Column | ColumnGroup;
  colDef: ColDef<TData> | ColGroupDef<TData> | null;
  // The index of the header row of the current focused header 
  headerRowIndex: number;
  // The keyboard event the grid received 
  event: KeyboardEvent;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}
    headerCheckboxSelection
    boolean | HeaderCheckboxSelectionCallback
    If true or the callback returns true, a 'select all' checkbox will be put into the header. See Header Checkbox Selection.
    headerCheckboxSelection: boolean | HeaderCheckboxSelectionCallback<TData>;

interface HeaderCheckboxSelectionCallback<TData = any> {
    (params: HeaderCheckboxSelectionCallbackParams<TData>) : boolean
}

interface HeaderCheckboxSelectionCallbackParams<TData = any> {
  column: Column;
  colDef: ColDef<TData>;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}
    headerCheckboxSelectionFilteredOnly
    boolean
    If true, the header checkbox selection will only select filtered items. See Select Everything or Just Filtered.
    headerCheckboxSelectionCurrentPageOnly
    boolean
    If true, the header checkbox selection will only select nodes on the current page. See Select Everything on the Current Page.

    Columns: Integrated Charts

    (Enterprise only) See Integrated Charts

    chartDataType
    'category' | 'series' | 'time' | 'excluded'
    Defines the chart data type that should be used for a column.

    Columns: Pinned

    See Column Pinning for more information.

    pinned
    boolean | 'left' | 'right' | null
    Pin a column to one side: right or left. A value of true is converted to 'left'.
    initialPinned
    boolean | 'left' | 'right'
    Same as pinned, except only applied when creating a new column. Not applied when updating column definitions.
    lockPinned
    boolean
    Set to true to block the user pinning the column, the column can only be pinned via definitions or API.
    Default: false

    Columns: Pivoting

    (Enterprise only) See Pivoting

    pivot
    boolean
    Set to true to pivot by this column.
    initialPivot
    boolean
    Same as pivot, except only applied when creating a new column. Not applied when updating column definitions.
    pivotIndex
    number | null
    Set this in columns you want to pivot by. If only pivoting by one column, set this to any number (e.g. 0). If pivoting by multiple columns, set this to where you want this column to be in the order of pivots (e.g. 0 for first, 1 for second, and so on).
    initialPivotIndex
    number
    Same as pivotIndex, except only applied when creating a new column. Not applied when updating column definitions.
    pivotComparator
    Function
    Comparator to use when ordering the pivot columns, when this column is used to pivot on. The values will always be strings, as the pivot service uses strings as keys for the pivot groups. 
    pivotComparator = (
    valueA: string,
    valueB: string
) => number;
    enablePivot
    boolean
    Set to true if you want to be able to pivot by this column via the GUI. This will not block the API or properties being used to achieve pivot.
    Default: false

    Columns: Rendering and Styling

    cellStyle
    CellStyle | CellStyleFunc
    An object of css values / or function returning an object of css values for a particular cell. See Cell Style.
    cellStyle: CellStyle | CellStyleFunc<TData>;

interface CellStyle {
  [cssProperty: string]: string | number;
}

interface CellStyleFunc<TData = any> {
    (cellClassParams: CellClassParams<TData>) : CellStyle | null | undefined
}

interface CellClassParams<TData = any, TValue = any> {
  // Column for this callback 
  column: Column;
  // The colDef associated with the column for this cell 
  colDef: ColDef<TData>;
  // The value to be rendered 
  value: TValue;
  // The data associated with this row from rowData. Data is `undefined` for row groups. 
  data: TData | undefined;
  // The RowNode associated with this row 
  node: IRowNode<TData>;
  // The index of the row 
  rowIndex: number;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
}
    cellClass
    string | string[] | CellClassFunc
    Class to use for the cell. Can be string, array of strings, or function that returns a string or array of strings. See Cell Class.
    cellClass: string | string[] | CellClassFunc<TData>;

interface CellClassFunc<TData = any> {
    (cellClassParams: CellClassParams<TData>) : string | string[] | null | undefined
}

interface CellClassParams<TData = any, TValue = any> {
  // Column for this callback 
  column: Column;
  // The colDef associated with the column for this cell 
  colDef: ColDef<TData>;
  // The value to be rendered 
  value: TValue;
  // The data associated with this row from rowData. Data is `undefined` for row groups. 
  data: TData | undefined;
  // The RowNode associated with this row 
  node: IRowNode<TData>;
  // The index of the row 
  rowIndex: number;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
}
    cellClassRules
    CellClassRules
    Rules which can be applied to include certain CSS classes. See Cell Class Rules.
    cellClassRules: CellClassRules<TData>;

interface CellClassRules<TData = any> {
  [cssClassName: string]: (((params: CellClassParams<TData>) => boolean) | string);
}

interface CellClassParams<TData = any, TValue = any> {
  // Column for this callback 
  column: Column;
  // The colDef associated with the column for this cell 
  colDef: ColDef<TData>;
  // The value to be rendered 
  value: TValue;
  // The data associated with this row from rowData. Data is `undefined` for row groups. 
  data: TData | undefined;
  // The RowNode associated with this row 
  node: IRowNode<TData>;
  // The index of the row 
  rowIndex: number;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
}
    cellRenderer
    any
    Provide your own cell Renderer component for this column's cells. See Cell Renderer.
    cellRendererParams
    any
    Params to be passed to the cellRenderer component. See Cell Renderer Params.
    cellRendererSelector
    CellRendererSelectorFunc
    Callback to select which cell renderer to be used for a given row within the same column. See Many Renderers One Column.
    cellRendererSelector: CellRendererSelectorFunc<TData>;

interface CellRendererSelectorFunc<TData = any> {
    (params: ICellRendererParams<TData>) : CellRendererSelectorResult | undefined
}

interface CellRendererSelectorResult {
  // Equivalent of setting `colDef.cellRenderer` 
  component?: any;
  // Equivalent of setting `colDef.cellRendererParams` 
  params?: any;
}
    autoHeight
    boolean
    Set to true to have the grid calculate the height of a row based on contents of this column.
    Default: false
    wrapText
    boolean
    Set to true to have the text wrap inside the cell - typically used with autoHeight.
    Default: false
    enableCellChangeFlash
    boolean
    Set to true to flash a cell when it's refreshed.
    Default: false
    suppressCellFlash
    boolean
    Set to true to prevent this column from flashing on changes. Only applicable if cell flashing is turned on for the grid.
    Default: false

    Columns: Row Dragging

    See Row Dragging for more information.

    rowDrag
    boolean | RowDragCallback
    boolean or Function. Set to true (or return true from function) to allow row dragging.
    Default: false 
    rowDrag: boolean | RowDragCallback<TData>;

interface RowDragCallback<TData = any> {
    (params: RowDragCallbackParams<TData>) : boolean
}

interface RowDragCallbackParams<TData = any> {
  // Row node for the given row 
  node: IRowNode<TData>;
  // Data associated with the node. Will be `undefined` for group rows. 
  data: TData | undefined;
  // Column for this callback 
  column: Column;
  // ColDef provided for this column 
  colDef: ColDef<TData>;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}
    rowDragText
    Function
    A callback that should return a string to be displayed by the rowDragComp while dragging a row. If this callback is not set, the rowDragText callback in the gridOptions will be used and if there is no callback in the gridOptions the current cell value will be used. 
    rowDragText = (
    params: IRowDragItem,
    dragItemCount: number
) => string;

interface IRowDragItem {
  // The default text that would be applied to this Drag Element 
  defaultTextValue: string;
  // When dragging a row, this contains the row node being dragged
  // When dragging multiple rows, this contains the row that started the drag.
  rowNode?: IRowNode;
  // When dragging multiple rows, this contains all rows being dragged 
  rowNodes?: IRowNode[];
  // When dragging columns, this contains the columns being dragged 
  columns?: Column[];
  // When dragging columns, this contains the visible state of the columns 
  visibleState?: { [key: string]: boolean; };
}
    dndSource
    boolean | DndSourceCallback
    boolean or Function. Set to true (or return true from function) to allow dragging for native drag and drop.
    Default: false 
    dndSource: boolean | DndSourceCallback<TData>;

interface DndSourceCallback<TData = any> {
    (params: DndSourceCallbackParams<TData>) : boolean
}

interface DndSourceCallbackParams<TData = any> {
  // Row node for the given row 
  node: IRowNode<TData>;
  // Data associated with the node. Will be `undefined` for group rows. 
  data: TData | undefined;
  // Column for this callback 
  column: Column;
  // ColDef provided for this column 
  colDef: ColDef<TData>;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}
    dndSourceOnRowDrag
    Function
    Function to allow custom drag functionality for native drag and drop. 
    dndSourceOnRowDrag = (
    params: DndSourceOnRowDragParams<TData>
) => void;

interface DndSourceOnRowDragParams<TData = any> {
  // Row node for the given row 
  rowNode: IRowNode<TData>;
  // The DOM event that represents a drag and drop interaction 
  dragEvent: DragEvent;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}

    Columns: Row Grouping

    (Enterprise only) See Row Grouping

    rowGroup
    boolean
    Set to true to row group by this column.
    Default: false
    initialRowGroup
    boolean
    Same as rowGroup, except only applied when creating a new column. Not applied when updating column definitions.
    rowGroupIndex
    number | null
    Set this in columns you want to group by. If only grouping by one column, set this to any number (e.g. 0). If grouping by multiple columns, set this to where you want this column to be in the group (e.g. 0 for first, 1 for second, and so on).
    initialRowGroupIndex
    number
    Same as rowGroupIndex, except only applied when creating a new column. Not applied when updating column definitions.
    enableRowGroup
    boolean
    Set to true if you want to be able to row group by this column via the GUI. This will not block the API or properties being used to achieve row grouping.
    Default: false
    showRowGroup
    string | boolean
    Set to true to have the grid place the values for the group into the cell, or put the name of a grouped column to just show that group. See Custom Group Columns.
    enableValue
    boolean
    Set to true if you want to be able to aggregate by this column via the GUI. This will not block the API or properties being used to achieve aggregation.
    Default: false
    aggFunc
    string | IAggFunc | null
    Name of function to use for aggregation. In-built options are: sum, min, max, count, avg, first, last. Also accepts a custom aggregation name or an aggregation function. 
    aggFunc: string | IAggFunc<TData> | null;

interface IAggFunc<TData = any, TValue = any> {
    (params: IAggFuncParams<TData, TValue>) : any
}

interface IAggFuncParams<TData = any, TValue = any> {
  // Values to aggregate 
  values: TValue[];
  // Column the aggregation function is working on 
  column: Column;
  // ColDef of the aggregation column 
  colDef: ColDef<TData>;
  // Pivot Result Column being produced using this aggregation 
  pivotResultColumn?: Column;
  // The parent RowNode, where the aggregation result will be shown 
  rowNode: IRowNode<TData>;
  // data (if any) of the parent RowNode 
  data: TData;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}
    initialAggFunc
    string | IAggFunc
    Same as aggFunc, except only applied when creating a new column. Not applied when updating column definitions. 
    initialAggFunc: string | IAggFunc<TData>;

interface IAggFunc<TData = any, TValue = any> {
    (params: IAggFuncParams<TData, TValue>) : any
}

interface IAggFuncParams<TData = any, TValue = any> {
  // Values to aggregate 
  values: TValue[];
  // Column the aggregation function is working on 
  column: Column;
  // ColDef of the aggregation column 
  colDef: ColDef<TData>;
  // Pivot Result Column being produced using this aggregation 
  pivotResultColumn?: Column;
  // The parent RowNode, where the aggregation result will be shown 
  rowNode: IRowNode<TData>;
  // data (if any) of the parent RowNode 
  data: TData;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}
    allowedAggFuncs
    string[]
    Aggregation functions allowed on this column e.g. ['sum', 'avg']. If missing, all installed functions are allowed. This will only restrict what the GUI allows a user to select, it does not impact when you set a function via the API.
    defaultAggFunc
    string
    The name of the aggregation function to use for this column when it is enabled via the GUI. Note that this does not immediately apply the aggregation function like aggFunc
    Default: sum

    Columns: Sort

    See Row Sorting for more information.

    sortable
    boolean
    Set to true to allow sorting on this column.
    Default: false
    sort
    SortDirection
    If sorting by default, set it here. Set to asc or desc. 
    sort: SortDirection;

type SortDirection = 
      'asc' 
    | 'desc' 
    | null
    initialSort
    SortDirection
    Same as sort, except only applied when creating a new column. Not applied when updating column definitions. 
    initialSort: SortDirection;

type SortDirection = 
      'asc' 
    | 'desc' 
    | null
    sortIndex
    number | null
    If sorting more than one column by default, specifies order in which the sorting should be applied.
    initialSortIndex
    number
    Same as sortIndex, except only applied when creating a new column. Not applied when updating column definitions.
    sortingOrder
    (SortDirection)[]
    Array defining the order in which sorting occurs (if sorting is enabled). An array with any of the following in any order ['asc','desc',null] 
    sortingOrder: (SortDirection)[];

type SortDirection = 
      'asc' 
    | 'desc' 
    | null
    comparator
    Function
    Override the default sorting order by providing a custom sort comparator.
  • valueA, valueB are the values to compare.
  • nodeA, nodeB are the corresponding RowNodes. Useful if additional details are required by the sort.
  • isDescending - true if sort direction is desc. Not to be used for inverting the return value as the grid already applies asc or desc ordering.
    • Return:
  • 0 valueA is the same as valueB
  • > 0 Sort valueA after valueB
  • < 0 Sort valueA before valueB 
    • comparator = (
    valueA: any,
    valueB: any,
    nodeA: IRowNode<TData>,
    nodeB: IRowNode<TData>,
    isDescending: boolean
) => number;
    unSortIcon
    boolean
    Set to true if you want the unsorted icon to be shown when no sort is applied to this column.
    Default: false

    Columns: Spanning

    See Column / Row Spanning

    colSpan
    Function
    By default, each cell will take up the width of one column. You can change this behaviour to allow cells to span multiple columns. 
    colSpan = (
    params: ColSpanParams<TData>
) => number;

interface ColSpanParams<TData = any> {
  // Row node for the given row 
  node: IRowNode<TData> | null;
  // Data associated with the node 
  data: TData | undefined;
  // Column for this callback 
  column: Column;
  // ColDef provided for this column 
  colDef: ColDef<TData>;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}
    rowSpan
    Function
    By default, each cell will take up the height of one row. You can change this behaviour to allow cells to span multiple rows. 
    rowSpan = (
    params: RowSpanParams<TData>
) => number;

interface RowSpanParams<TData = any> {
  // Row node for the given row 
  node: IRowNode<TData> | null;
  // Data associated with the node 
  data: TData | undefined;
  // Column for this callback 
  column: Column;
  // ColDef provided for this column 
  colDef: ColDef<TData>;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}

    Columns: Tooltips

    tooltipField
    string
    The field of the tooltip to apply to the cell.
    tooltipValueGetter
    Function
    Callback that should return the string to use for a tooltip, tooltipField takes precedence if set. If using a custom tooltipComponent you may return any custom value to be passed to your tooltip component. See Tooltip Component.
    tooltipValueGetter = (
    params: ITooltipParams<TData>
) => string | any;

interface ITooltipParams<TData = any, TValue = any, TContext = any> {
  // What part of the application is showing the tooltip, e.g. 'cell', 'header', 'menuItem' etc 
  location: string;
  // The value to be rendered by the tooltip. 
  value?: TValue;
  // The formatted value to be rendered by the tooltip. 
  valueFormatted?: string | null;
  // Column / ColumnGroup definition. 
  colDef?: ColDef<TData> | ColGroupDef<TData> | null;
  // Column / ColumnGroup 
  column?: Column | ColumnGroup;
  // The index of the row containing the cell rendering the tooltip. 
  rowIndex?: number;
  // The row node. 
  node?: IRowNode<TData>;
  // Data for the row node in question. 
  data?: TData;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: TContext;
}
    tooltipComponent
    any
    Provide your own tooltip component for the column. See Tooltip Component.
    tooltipComponentParams
    any
    The params used to configure tooltipComponent.

    Columns: Width

    See Column Sizing for more information.

    width
    number
    Initial width in pixels for the cell.
    initialWidth
    number
    Same as width, except only applied when creating a new column. Not applied when updating column definitions.
    minWidth
    number
    Minimum width in pixels for the cell.
    maxWidth
    number
    Maximum width in pixels for the cell.
    flex
    number
    Used instead of width when the goal is to fill the remaining empty space of the grid. See Column Flex.
    initialFlex
    number
    Same as flex, except only applied when creating a new column. Not applied when updating column definitions.
    resizable
    boolean
    Set to true to allow this column should be resized.
    Default: false
    suppressSizeToFit
    boolean
    Set to true if you want this column's width to be fixed during 'size to fit' operations.
    Default: false
    suppressAutoSize
    boolean
    Set to true if you do not want this column to be auto-resizable by double clicking it's edge.
    Default: false

    Groups

    For column groups, the property children is mandatory. When the grid sees children it knows it's a column group.

    See Column Groups for more information.

    children *
    (ColDef | ColGroupDef)[]
    A list containing a mix of columns and column groups.
    groupId
    string
    The unique ID to give the column. This is optional. If missing, a unique ID will be generated. This ID is used to identify the column group in the column API.
    marryChildren
    boolean
    Set to true to keep columns in this group beside each other in the grid. Moving the columns outside of the group (and hence breaking the group) is not allowed.
    Default: false
    stickyLabel
    boolean
    If true the label of the Column Group will scroll alongside the grid to always remain visible.
    Default: false
    openByDefault
    boolean
    Set to true if this group should be opened by default.
    Default: false
    columnGroupShow
    ColumnGroupShowType
    Whether to only show the column when the group is open / closed. If not set the column is always displayed as part of the group. 
    columnGroupShow: ColumnGroupShowType;

type ColumnGroupShowType = 'open' | 'closed'
    toolPanelClass
    ToolPanelClass
    CSS class to use for the tool panel cell. Can be a string, array of strings, or function. 
    toolPanelClass: ToolPanelClass<TData>;

type ToolPanelClass = 
      string 
    | string[] 
    | ((params: ToolPanelClassParams<TData>) => string | string[] | undefined)


interface ToolPanelClassParams<TData = any> {
  colDef: AbstractColDef<TData>;
  column?: Column | null;
  columnGroup?: ProvidedColumnGroup | null;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}
    suppressColumnsToolPanel
    boolean
    Set to true if you do not want this column or group to appear in the Columns Tool Panel.
    Default: false
    suppressFiltersToolPanel
    boolean
    Set to true if you do not want this column (filter) or group (filter group) to appear in the Filters Tool Panel.
    Default: false
    spanHeaderHeight
    boolean
    Set to true if you want this column header for this column to span the whole height of the header container.
    Default: false
    tooltipComponent
    any
    Provide your own tooltip component for the column group. See Tooltip Component.
    tooltipComponentParams
    any
    The params used to configure tooltipComponent.

    Groups: Header

    See Column Headers for more information.

    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.
    headerClass
    HeaderClass
    CSS class to use for the header cell. Can be a string, array of strings, or function. 
    headerClass: HeaderClass;

type HeaderClass = 
      string 
    | string[] 
    | ((params: HeaderClassParams<TData>) => string | string[] | undefined)


interface HeaderClassParams<TData = any> {
  colDef: AbstractColDef<TData>;
  column?: Column | null;
  columnGroup?: ColumnGroup | null;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}
    headerTooltip
    string
    Tooltip for the column header
    headerGroupComponent
    any
    The custom header group component to be used for rendering the component header. If none specified the default AG Grid is used. See Header Group Component.
    headerGroupComponentParams
    any
    The params used to configure the headerGroupComponent.