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 | ((content: {
[key: string]: string | number | null
}) => string),
tooltip?: boolean | object, // true by default
tooltipTemplate?: (
content: { value: string } & { [key: string]: string | number | null },
header: IHeader,
column: ICol
) => string | boolean,
align?: "left" | "center" | "right", // "left" by default
colspan?: number,
rowspan?: number,
css?: string,
content?: "inputFilter" | "selectFilter" | "comboFilter",
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 | ((content: {
[key: string]: string | number | null
}) => string),
tooltip?: boolean | object, // true by default
tooltipTemplate?: (
content: { value: string } & { [key: string]: string | number | null },
header: IHeader,
column: ICol
) => string | boolean,
align?: "left" | "center" | "right", // "left" by default
colspan?: number,
rowspan?: number,
css?: string,
htmlEnable?: boolean, // false by default
},
],
type?: "string" | "number" | "boolean" | "date", // "string" by default
numberMask?:
| {
prefix?: string, // "" by default (before the value)
suffix?: string, // "" by default (after the value)
groupSeparator?: string, // "," by default
decSeparator?: string, // "." by default
allowNegative?: boolean, // true by default
maxIntLength?: number,
maxDecLength?: number,
minDecLength?: number // 0 by default
}
| boolean,
patternMask?:
| {
pattern: ((value: string | number) => string) | string,
charFormat?: {
[char: string]: RegExp
}
}
| string,
// "input" by default
editorType?: "input" | "select" | "datePicker" | "combobox" | "multiselect" | "textarea",
dateFormat?: string, // "%M %d %Y" by default
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,
groupable?: boolean, // false by default
closable?: boolean, // true by default
summary?: {
[key: string]: string | [string, string] | (row: IRow[]) => string | number
} | 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:
|
| numberMask | (optional) sets an input mask for entering number values. Can be set in two ways:
|
| patternMask | (optional) sets an input mask for entering number and string values according to a special pattern. Can be set in two ways:
|
| editorType | (optional) the type of an editor used in a column: "input" | "select" | "combobox" | "textarea" | "multiselect" | "datePicker", "input" by default |
| dateFormat | (optional) defines the format of dates. The date format must include delimiters (spaces or symbols), 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:
|
| groupable | (optional) PRO version only, enables data grouping by the values of a certain column. Columns' header can be dragged to the special grouping area - group panel. Grid will automatically create data groups based on the values of these columns. Note that the groupable property works only with the group panel |
| closable | (optional) PRO version only, either allows closing a particular element of the group panel or makes it permanently enabled |
| summary | (optional) creates the list of calculated values based on the column's data. The defined list is available only at the column's level. Can be initialized either as an object or as a string. As an object it contains calculated values set as key:value pairs, where the keys are the field names and values can be:
|
Example
Related articles: