columns

specifies the configuration of grid columns

Example

var grid = new dhx.Grid("grid_container", {
    columns: [
        { width: 100, id: "a", header: [{ text: "#" }] },
        { width: 100, id: "b", header: [{ text: "Title" }] },
        { width: 200, id: "c", header: [{ text: "Name" }] },
        { width: 200, id: "d", header: [{ text: "Address" }] }
    ],
    data: dataset
});

Each column object may contain a set of properties described below:

id	(string|number) mandatory, the id of a column
width	(number) the width of a column
header	(array) mandatory, 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 Related sample:  Grid. Header Spans 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
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:  Grid. 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 Related sample:  Grid. Grid With 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 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
maxWidth	(number) the maximal width to be set for a column Related sample:  Grid. Max Width
minWidth	(number) the minimal width to be set for a column Related sample:  Grid. 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) Related sample:  Grid. Mark Cells
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"|"datePicker"|"checkbox"|"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) Related sample:  Grid. Cell Templates
hidden	(boolean) defines whether a column is hidden Related sample:  Grid. Hidden Columns
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 Grid
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)

Back to top