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: |
| header | (required) an array of objects with header rows configuration. Each header object may include:
Related Sample: TreeGrid. Header spans |
| footer | (optional) an array of objects with footer rows configuration. Each footer object may include:
|
| 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:
|
| 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:
|
| 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:
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 |
| 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:
|
| template | (optional) a function which returns a template with content for a cell(s). Takes 3 parameters:
|
| 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:
|
| tooltipTemplate | (optional) a function which returns a template for the content of the tooltip. Takes 3 parameters:
|
Example
Related articles: