columns

specifies the configuration of grid columns

array 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
});

Details

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
    • 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"
      • 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 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
  • footer - (array) an array of objects with footer rows configuration. Each footer object may include:
    • text - (string|number) the text of a header
    • colspan - (number) the number of columns in a colspan
    • rowspan - (number) the number of rows in a rowspan
    • 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 footer: "avg" | "sum" | "max" | "min"
      • some other string
  • maxWidth - (number) the maximal width to be set for a column
  • minWidth - (number) the minimal width to be set for a column
  • 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)
  • resizable - (boolean) defines whether a column can be resized
  • type - (string) the type of a column: "string"|"number"|"boolean"|"any"|"date"
  • dateFormat - (string) defines the format of dates (type:"date")
  • editorType - (string) the type of an editor used in a column: "input"|"select"|"datePicker"|"checkbox"|"combobox"
  • 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)
  • hidden - (boolean) defines whether a column is hidden
  • 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
See also
Back to top