Grid column properties
Usage
columns:[
{
id: string | number,
width?: number, // 100 by default
minWidth?: number, // 20 by default
maxWidth?: number,
autoWidth?: boolean, // false by default
header: [
{
text?: string | number,
tooltip?: boolean | object, // true by default
tooltipTemplate?: (value: string | undefined, header: object, column: object) => string | boolean,
align?: "left" | "center" | "right", // "left" by default
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, // true by default
sortAs?: (cellValue: any) => string | number,
htmlEnable?: boolean, // false by default
}
],
footer?: [
{
text?: string | number,
tooltip?: boolean | object, // true by default
tooltipTemplate?: (value: string | undefined, footer: object, column: object) => string | boolean,
align?: "left" | "center" | "right", // "left" by default
colspan?: number,
rowspan?: number,
css?: string,
content?: "avg" | "sum" | "max" | "min" | "count",
htmlEnable?: boolean, // false by default
},
],
type?: "string" | "number" | "boolean" | "date" | "percent", // "string" by default
// "input" by default
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, // false by default
align?: "left" | "center" | "right", // "left" by default
htmlEnable?: boolean, // false by default
hidden?: boolean, // false by default
draggable?: boolean, // false by default
editable?: boolean, // false by default
resizable?: boolean, // false by default
sortable?: boolean, // true by default
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, // true by default
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, 100 by default. Note that width can't be less than 20px. The property is ignored if the adjust property is used |
| minWidth | (optional) the minimum width to be set for a column, 20 by default 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, false by default 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", "input" by default |
| 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: Grid. Rich example with templates and different editors |
| adjust | (optional) false by default, defines whether the width of a column is automatically adjusted to its content. |
| align | (optional) aligns data in a column: "left" | "center" | "right", "left" by default |
| htmlEnable | (optional) false by default. 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, false by default Related Sample: Grid. Hidden columns |
| draggable | (optional) defines whether a column is draggable, false by default |
| editable | (optional) defines whether a column is editable, false by default |
| resizable | (optional) defines whether a column can be resized, false by default |
| sortable | (optional) defines whether a column is sortable, true by default |
| 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 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: