Skip to main content

TreeGrid column properties

id(string|number) the id of a column
width(number) the width of a column
header(array) an array of objects with header rows configuration. Each header object may include:
  • text - (string|number) the text of a header
  • align - (string) aligns data in the header: "left"|"center"|"right"
  • colspan - (number) the number of columns in a colspan
  • rowspan - (number) the number of rows in a rowspan
  • css - (any) styling to be applied to a header
  • content - (string) 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
  • filterConfig - (object) optional, a configuration object for "comboFilter". It can contain a set of properties:
      - filter - (function) sets a custom function for filtering Combo Box options
      - readonly - (boolean) makes ComboBox readonly (it is only possible to select options from the list, without entering words in the input)
      - template - (function) sets a template of displaying options in the popup list
      - placeholder - (string) sets a placeholder in the input of ComboBox
      - virtual - (boolean) enables dynamic loading of data on scrolling the list of options

Related Sample: TreeGrid. Header spans
htmlEnable(boolean) 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
footer(array) an array of objects with footer rows configuration. Each footer object may include:
  • text - (string|number) the text of a footer
  • css - (any) styling to be applied to a footer
  • content - (string) additional content of a footer, which can be:
      - a filter: "inputFilter" | "selectFilter" | "comboFilter"
      - one of the methods that process values in a column and show result in the footer:
      "avg" | "sum" | "max" | "min" | "count"
      - some other string
maxWidth(number) the maximal width to be set for a column

Related Sample: TreeGrid. Max Width
minWidth(number) the minimal width to be set for a column

Related Sample: TreeGrid. Min Width
mark(object|function) returns a template for marking a cell(s)
  • 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 takes several parameters:
      - cell - (string) the value of a cell
      - columnCells - (array) an array of all cell values in the specified column
      - row - (object) an object with all cells in a row
      - col - (object) the config of a column (see the columns config)
resizable(boolean) defines whether a column can be resized
type(string) 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
format(string) defines the format for the content of the column's cells
editorType(string) the type of an editor used in a column: "input"|"select"|"combobox"|"textarea"
options(array) a set of options to be displayed in the editor of a cell (editorType: "select"|"combobox")
template(function) returns a template with content for a cell(s). Takes 3 parameters:
  • cellValue - (any) the value of a cell
  • row - (object) an object with all cells in a row
  • col - (object) the config of a column (see the columns config)
hidden(boolean) defines whether a column is hidden
draggable(boolean) defines whether a column is draggable
editable(boolean) defines whether a column is editable
sortable(boolean) defines whether a column is sortable
adjust(boolean|string) defines whether the width of a column is automatically adjusted to its content
autoWidth(boolean) enables/disables the ability of a column to adjust its size to the size of TreeGrid
align(string) aligns data in a column: "left" | "center" | "right"
tooltip(boolean) enables a tooltip on hovering over the content of a column, true by default
tooltipTemplate(function) returns a template for the content of the tooltip. Takes 3 parameters:
  • value - (any) the value of a cell
  • row - (object) an object with all cells in a row
  • col - (object) the config of a column (see the columns config)