Version 1
Common Interface IColumn GrapeCity DataViewsJS Interface

IColumn Interface

Defines available configuration of single grid column


  • IColumn


Optional action

A single action or an array of actions for the column

Optional align

align: "left" | "right" | "center"

Specifies horizontal alignment of cell content.

Optional allowCellMerging

allowCellMerging: boolean

If true, merging for this column is allowed. Default value is false

Optional allowEditing

allowEditing: boolean

Specifies whether the cells in this column can be edited. Default value is true

Optional allowGrouping

allowGrouping: boolean

If true, the column can be grouped with drag and drop

Optional allowResizing

allowResizing: boolean

If false, the column can no longer be resized. Default value is true

Optional allowSorting

allowSorting: boolean

If true, clicking on the column header sorts this column


caption: string

Sets the display name of the column header. For a bound column, the default value is the string of the dataField, for others, the default value is null

Optional cellRenderer

cellRenderer: CellRendererFn | "animateCellChange" | "animateSlide"

Specifies additional cell renderer applied after main cell content is rendered.

Optional colHeaderPresenter

colHeaderPresenter: string

Used to customize the appearance of cell in the column header

Optional columns

columns: IColumn[]

A child column object array that contains columns in the column group

Optional cssClass

cssClass: string | ColumnCssClassFn

The default css class for cells in this column or a function


dataField: string

The string name of the property in the data model you want the column to refer to. The prefix a '=' if it is a calculated column or different column types

Optional dataType

dataType: string

Specifies the type of value stored in this column. Values are coerced into the proper type when editing the grid. The available data types are Array, Boolean, Date, Number, Object, and String

Optional editor

editor: ColumnEditor

The general editor will be used if not specified. The user can define their own custom editors for different field types

Optional footer

footer: string

The renderer or aggregate formulas for the column on grid footer

Optional format

format: string | FormatFunc

Used to format the value of data items to different forms of text. This can be a string or a function

Optional ganttColumn

ganttColumn: IGanttOptions

An object defines the gantt column. Only one gantt column is allowed

Optional groupFooter

groupFooter: string

The renderer or aggregate formulas for the column on group footer

Optional groupHeader

groupHeader: string

The renderer or aggregate formulas for the column on group header

Optional headerGroupShow

headerGroupShow: "expanded" | "collapsed"

Indicates when to show a child column in a column group. There are two values. expanded - the column is only shown when the group is expanded. collapsed - the column is only shown when the group is collapsed

Optional headerRow

headerRow: Object

An object used to define the header row settings.

Optional hierarchyFooter

hierarchyFooter: string

The renderer or aggregate formulas for the column on hierarchy footer


id: string

A unique identifier for the column

Optional isCollapsed

isCollapsed: boolean

Indicates whether the column group is collapsed initially. Default value is true

Optional minWidth

minWidth: Length

Specifies the minimum width of the column. It can be any positive number. If this option is omitted, it uses the layout engine default minimum column width as the default value. This option takes effect on GridLayout or HorizontalLayout

Optional pinned

pinned: Pinned

Can be 'left' or 'right' to pin columns left or right

Optional presenter

presenter: string

Used to customize the appearance of cells in the column. Notice that if you use doT expression, the value passed to evaluate the template will be the formatted value

Optional showMenu

showMenu: boolean

If true, column will render menu button that can provide filtering, sorting and grouping options

Optional swipeDirection

swipeDirection: string

Specifies when to show the swipe column. If IGridOptions.allowSwipe is true and this property exists, the column is hidden by default and only shows when swiping in the same direction

Optional visible

visible: boolean

Specifies whether the column is visible by default. Default value is true

Optional width

width: Length

Specifies the width of the column. It can be any positive number (column width in pixels), null, negative number (use the layoutEngine default column width), or string in the format '{number}' (star sizing). If this option is omitted, it uses the layout engine default column width. Start-sizing allows you to define columns that automatically stretch to fill the width available. For example, if a grid has three columns with widths '100', '', and '3*' the first column is 100 pixels wide, the second takes up to 1/4th of the remaining space, and the last takes up the remaining 3/4ths of the remaining space


Optional asyncRender

  • asyncRender(data: any, container: HTMLElement): void
  • Used to load heavy javascript widget asynchronously in column


    • data: any

      the entire row data

    • container: HTMLElement

      the cell DOM element

    Returns void