Grid column properties
Usage
columns:[
{
id: string | number,
width?: number,
minWidth?: number,
maxWidth?: number,
autoWidth?: boolean,
header: [
{
text?: string | number,
tooltip?: boolean,
tooltipTemplate?: (value: string | undefined, header: IHeader, col: ICol) => string | boolean,
align?: "left" | "center" | "right",
colspan?: number,
rowspan?: number,
css?: string,
content?: "inputFilter" | "selectFilter" | "comboFilter" |
"avg" | "sum" | "max" | "min" | "count",
filterConfig?: {
filter?: (item: any, input: string) => boolean,
multiselection?: boolean,
readonly?: boolean,
placeholder?: string,
virtual?: boolean,
template?: function
},
customFilter?: (item: any, input: string) => boolean,
headerSort?: boolean,
sortAs?: (cellValue: any) => string | number,
}
],
footer?: [
{
text?: string | number,
tooltip?: boolean,
tooltipTemplate?: (value: string | undefined, footer: IFooter, col: ICol) => string | boolean,
align?: "left" | "center" | "right",
colspan?: number,
rowspan?: number,
css?: string,
content?: "avg" | "sum" | "max" | "min" | "count",
},
],
type?: "string" | "number" | "boolean" | "date" | "percent",
editorType?: "input" | "select" | "datePicker" | "combobox" | "multiselect" | "textarea",
format?: string,
options?: (string | { id: string | number, value: string })[] |
(col: 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, col: object) => string,
tooltip?: boolean,
tooltipTemplate?: (cellValue: any, row: object, col: 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: Grid. Columns min width |
| maxWidth | (optional) the maximal width to be set for a column Related Sample: Grid. Columns max width |
| autoWidth | (optional) enables/disables the ability of a column to adjust its size to the size of Grid Also note: |
| header | (required) an array of objects with header rows configuration. Each header object may include:
Related Sample: Grid. Grouped headers (spans) |
| footer | (optional) an array of objects with footer rows configuration. Each footer object may include:
Related Sample: Grid. Grid with footer |
| 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. If editorType: "combobox/multiselect" is specified, the editorConfig object can include the following properties:
In case of editorType: "multiselect", the editorConfig object can include one more property:
If type: "date" is specified, the editorConfig object can include a set of properties of Calendar (except for the value, range, and dateFormat ones) Related Sample: Grid. 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: Grid. Html in data |
| hidden | (optional) defines whether a column is hidden Related Sample: Grid. Hidden columns |
| 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:
Related Sample: Grid. Mark cells |
| template | (optional) a function which returns a template with content for a cell(s). Takes 3 parameters:
Related Sample: Grid. Cell templates |
| tooltip | (optional) enables/disables all the tooltips of a column, true by default. 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:
false from the function will block showing of the tooltip |
Example
Related articles: