Skip to main content

TreeGrid column properties

Usage

columns:[
{
id: string | number,
width?: number,
minWidth?: number,
maxWidth?: number,
autoWidth?: boolean,
header: [
{
text?: string | number,
tooltip?: boolean | object,
tooltipTemplate?: (value: string | undefined, header: object, column: object) => string | boolean,
align?: "left" | "center" | "right",
colspan?: number,
rowspan?: number,
css?: any,
content?: "inputFilter" | "selectFilter" | "comboFilter" |
"avg" | "sum" | "max" | "min" | "count" | string,
filterConfig?: {
filter?: (item: any, input: string) => boolean,
multiselection?: boolean,
readonly?: boolean,
placeholder?: string,
virtual?: boolean,
},
customFilter?: (item: any, input: string) => boolean,
headerSort?: boolean,
sortAs?: (cellValue: any) => string | number,
htmlEnable?: boolean,
}
],
footer?: [
{
text?: string | number,
tooltip?: boolean | object,
tooltipTemplate?: (value: string | undefined, footer: object, column: object) => string | boolean,
css?: any,
content?: "inputFilter" | "selectFilter" | "comboFilter" |
"avg" | "sum" | "max" | "min" | "count" | string,
customFilter?: (item: any, input: string) => boolean,
htmlEnable?: boolean,
}
],
type?: "string" | "number" | "boolean" | "date" | "percent",
editorType?: "input" | "select" | "datePicker" | "combobox" | "multiselect" | "textarea",
format?: string,
options?: (string | { id: string | number, value: string })[] |
(column: object, row?: object) => (string | { id: string | number, value: string })[],
editorConfig?: obj,
adjust?: "data" | "header" | "footer" | boolean,
align?: "left" | "center" | "right",
htmlEnable?: boolean,
hidden?: boolean,
draggable?: boolean,
editable?: boolean,
resizable?: boolean,
sortable?: boolean,
mark?: { min?: string, max?: string } |
(cell: any, columnCells: any[], row?: object, column?: object) => string,
template?: (cellValue: any, row: object, column: object) => string,
tooltip?: boolean | object,
tooltipTemplate?: (cellValue: any, row: object, column: object) => string,
},
// more column objects
]

Description

id(required) the id of a column
width(optional) the width of a column. The minimum with of the column is 20 px.
The property is ignored if the adjust property is used.
minWidth(optional) the minimum width to be set for a column. The minimum width of a column is 20px.

Related Sample: TreeGrid. Columns min width
maxWidth(optional) the maximal width to be set for a column

Related Sample: TreeGrid. Columns max width
autoWidth(optional) enables/disables the ability of a column to adjust its size to the size of TreeGrid

Also note:
  • If autoWidth is set for a column, the width of the column is calculated on the base of the sizes of the container of the treegrid and the values of the minWidth/maxWidth properties if they are set for the column.
  • The property is ignored if the adjust property is used.
  • If the width property is specified in the configuration object of a column, the autoWidth property won't work for this column.
  • header(required) an array of objects with header rows configuration. Each header object may include:
    • text - (optional) the text of a header
    • tooltip - (optional) enables/disables the header tooltip, or sets the configuration object with the tooltip settings; true by default. When set as an object, the tooltip config can have the following properties:
      • force - (optional) forces opening of a tooltip; if set to true, the showDelay and hideDelay settings are ignored, false by default
      • showDelay - (optional) the time period that should pass before showing a tooltip, in ms
      • hideDelay - (optional) the time period that should pass before hiding a tooltip, in ms
      • margin - (optional) the margin between the node and tooltip; 8px by default
      • position - (optional) the position of a tooltip: "right", "bottom", "center", "left", "top"; "bottom" by default
      • css - (optional) the style of a tooltip box
    • tooltipTemplate - (optional) sets a template for the header tooltip. Takes into account the htmlEnable property. Return false to disable the tooltip
    • align - (optional) aligns data in the header: "left" | "center" | "right", "left" by default
    • colspan - (optional) the number of columns in a colspan
    • rowspan - (optional) the number of rows in a rowspan
    • css - (optional) styling to be applied to a header
    • content - (optional) additional content of a header, which can be:
      • a filter: "inputFilter" | "selectFilter" | "comboFilter"
      • one of the methods that process values in a column and show result in the header: "avg" | "sum" | "max" | "min" | "count"
    • filterConfig - (optional) a configuration object for "comboFilter". It can contain a set of properties:
      • filter - (optional) sets a custom function for filtering Combo Box options
      • multiselection - (optional) enables selection of multiple options
      • readonly - (optional) makes ComboBox readonly (it is only possible to select options from the list, without entering words in the input)
      • placeholder - (optional) sets a placeholder in the input of ComboBox
      • virtual - (optional) enables dynamic loading of data on scrolling the list of options
      • template - (optional) a function which returns a template with content for the filter options. Takes an option item as a parameter:
        • item - (object) an option item
    • customFilter - (optional) a custom function for extended filtering. It takes two parameters:
      • item - (required) a data item the value of which should be compared
      • input - (required) the value of the option selected in the filter
      and returns true/false to specify whether the data item should be displayed in the treegrid after filtering
    • headerSort - (optional) enables/disables sorting by clicking the header, true by default
    • sortAs - (optional) a function that defines the type to sort data as (e.g. string, number, date, etc.)
    • htmlEnable - (optional) false by default. If set to true, specifies the HTML content (inner HTML) of a header. If set to false, the content of the header cells will be displayed as a string value

    Related Sample: TreeGrid. Header spans
    footer(optional) an array of objects with footer rows configuration. Each footer object may include:
    • text - (optional) the text of a footer
    • tooltip - (optional) enables/disables the header tooltip, or sets the configuration object with the tooltip settings; true by default. When set as an object, the tooltip config can have the following properties:
      • force - (optional) forces opening of a tooltip; if set to true, the showDelay and hideDelay settings are ignored, false by default
      • showDelay - (optional) the time period that should pass before showing a tooltip, in ms
      • hideDelay - (optional) the time period that should pass before hiding a tooltip, in ms
      • margin - (optional) the margin between the node and tooltip; 8px by default
      • position - (optional) the position of a tooltip: "right", "bottom", "center", "left", "top"; "bottom" by default
      • css - (optional) the style of a tooltip box
    • tooltipTemplate - (optional) sets a template for the footer tooltip. Takes into account the htmlEnable property. Return false to disable the tooltip
    • css - (optional) styling to be applied to a footer
    • content - (optional) additional content of a header, which can be:
      • a filter: "inputFilter" | "selectFilter" | "comboFilter"
      • one of the methods that process values in a column and show result in the header: "avg" | "sum" | "max" | "min" | "count"
      • some other string
    • customFilter - (optional) a custom function for extended filtering. It takes two parameters:
      • item - (required) a data item the value of which should be compared
      • input - (required) the value of the option selected in the filter
      and returns true/false to specify whether the data item should be displayed in the treegrid after filtering
    • htmlEnable - (optional) if set to true, specifies the HTML content (inner HTML) of a footer. If set to false, the content of the footer cells will be displayed as a string value
    type(optional) the type of a column. The type sets the alignment of the content and defines the type of the editor used in the column:
    • "string" (by default) - aligns data to the left side and applies the "input"/"textarea" editor
    • "number" - aligns data to the right side and applies the "input" editor
    • "boolean" - aligns data to the left side and applies the "checkbox" editor
    • "percent" - aligns data to the left side and applies the "input" editor
    • "date" - aligns data to the left side and applies the "datePicker" editor
    editorType(optional) the type of an editor used in a column: "input" | "select" | "combobox" | "textarea" | "multiselect" | "datePicker"
    format(optional) defines the format for the content of the column's cells. The date format must include delimiters (space or symbol), otherwise an error will be thrown
    options(optional) specifies a set of options to be displayed in the editor of a cell. It is required if you specify editorType: "select" | "combobox" | "multiselect". The property can be:
    • an array of string values
    • an array of objects with a set of key:value pairs - attributes of options and their values:
        The id attribute sets the id for the option
        The value attribute sets the value to be displayed both in the editor and in the treegrid cell. If the id of the option is specified in the data set, the value will also be displayed in the cell on TreeGrid initialization
    • a function which takes two parameters:
        column - (required) an object with the configuration of a column
        row - (optional) an object with all cells in a row
      and must return either an array of string values or an array of objects
    Related Samples:If newOptions property is enabled, all new options will be displayed in the editor regardless of the initialized options.
    editorConfig(optional) an object with configuration settings of the column's editor. The structure of this object depends on the specified type of the editor or the column. Check the list below:

    • editorType: "combobox/multiselect"

      For this type of editor, the editorConfig object can include the following properties:
      • css - (optional) styling to be applied to an option
      • filter - (optional) sets a custom function for filtering combobox options. Takes two parameters:
        • item - (object) an item of data collection
        • target - (string) the string to compare to
        and should return true/false to specify whether an item should be displayed in the filtered list of options
      • eventHandlers - (object) adds event handlers to HTML elements of a custom template of combobox items. Check the details.
      • itemHeight - (optional) the height of an option
      • listHeight - (optional) the height of the list of options
      • newOptions - (optional) allows end users to add new values into the list of combobox options from UI. The new options will also appear in the drop-down list of the header/footer filters (content: "selectFilter" | "comboFilter").
      • placeholder - (optional) sets a placeholder in the editor's input
      • readonly - (optional) makes the editor readonly (it is only possible to select options from the list, without entering words in the input)
      • template - (optional) a callback function which returns a string. It is called with an object argument which contains two properties:
        • id - the id of the selected option
        • value - the value of the selected option

    • editorType: "multiselect"

      For this type of editor, the editorConfig object can include the following properties:
      • selectAllButton - (optional) adds a button that allows selecting all the options in the editor

    • editorType:"datePicker"

      For this type of editor, the editorConfig object can include a set of properties of Calendar (except for the value, range, and dateFormat ones).

    • editorType:"input" and column type:"number"

      For this combination, the editorConfig object can include the following properties:
      • min - (optional) the minimum allowed value
      • max - (optional) the maximum allowed value

    Related Sample: TreeGrid. Rich example with templates and different editors
    adjust(optional) defines whether the width of a column is automatically adjusted to its content

  • The property has a priority over the autoWidth property if it is specified either for the treegrid or for the column, and over the width property of the column.
  • The width the columns will be adjusted to also depends on the values of the minWidth/maxWidth properties if they are set for a column.
  • align(optional) aligns data in a column: "left" | "center" | "right"
    htmlEnable(optional) if set to true, specifies the HTML content (inner HTML) of a column. If set to false, the content of the column cells will be displayed as a string value

    Related Sample: TreeGrid. HTML in data
    hidden(optional) defines whether a column is hidden
    draggable(optional) defines whether a column is draggable
    editable(optional) defines whether a column is editable
    resizable(optional) defines whether a column can be resized
    sortable(optional) defines whether a column is sortable
    mark(optional) can be either an object or a function:
    • as an object contains min and max properties, to apply desired CSS classes to cells with minimal|maximal values in a column
    • as a function returns a template for marking a cell(s) and takes several parameters:
      • cell - (required) the value of a cell
      • columnCells - (required) an array of all cell values in the specified column
      • row - (optional) an object with all cells in a row
      • column - (optional) an object with the configuration of a column (see the columns config)
    template(optional) a function which returns a template with content for a cell(s). Takes 3 parameters:
    • cellValue - (required) the value of a cell
    • row - (required) an object with all cells in a row
    • column - (required) an object with the configuration of a column (see the columns config)
    tooltip(optional) enables/disables the header tooltip, or sets the configuration object with the tooltip settings; true by default. When set as an object, the tooltip config can have the following properties:
    • force - (optional) forces opening of a tooltip; if set to true, the showDelay and hideDelay settings are ignored, false by default
    • showDelay - (optional) the time period that should pass before showing a tooltip, in ms
    • hideDelay - (optional) the time period that should pass before hiding a tooltip, in ms
    • margin - (optional) the margin between the node and tooltip; 8px by default
    • position - (optional) the position of a tooltip: "right", "bottom", "center", "left", "top"; "bottom" by default
    • css - (optional) the style of a tooltip box
    The tooltip config can be redefined for the header/footer tooltip
    tooltipTemplate(optional) a function which returns a template for the content of the tooltip. Takes 3 parameters:
    • value - (required) the value of a cell
    • row - (required) an object with all cells in a row
    • column - (required) an object with the configuration of a column (see the columns config)

    Example

    Related articles: