Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions docker/redirects.conf
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/grid/api/gridcolumn_properties/gridcolumn_header_property/ /suite/grid/api/gridcolumn_properties/api_gridcolumn_header_properties/;
/suite/window/index/ /suite/window/;
/usage_rangeselection/ /suite/grid/usage_rangeselection/;
/guides/ai/ /suite/guides/mcp-server/;
Expand Down
62 changes: 31 additions & 31 deletions docs/grid/api/api_gridcolumn_properties.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,40 +6,40 @@ description: You can explore the Grid column properties of Grid in the documenta

# Grid column properties

Click the name of the necessary property to see the details on its usage.
The configuration of Grid columns is set via the [`columns`](/grid/api/grid_columns_config/) array. This section contains the list of the column objects' properties. Click the name of the necessary property to see the details on its usage.

| Property | Description |
|---------------------------------------------------------------------- |------------------------------------------------------- |
| [adjust](grid/api/gridcolumn_properties/gridcolumn_adjust_property.md) | (optional) *false* by default, defines whether the width of a column is automatically adjusted to its content |
| [align](grid/api/gridcolumn_properties/gridcolumn_align_property.md) | (optional) aligns data in a column: *"left"*/*"center"*/*"right"*|
| [autoWidth](grid/api/gridcolumn_properties/gridcolumn_autowidth_property.md) | (optional) enables/disables the ability of a column to adjust its size to the size of Grid, *false* by default |
| [closable](grid/api/gridcolumn_properties/gridcolumn_closable_property.md) | (optional) either allows closing a particular element of the [`group`](grid/api/grid_group_config.md) panel or makes it permanently enabled (**PRO version only**)|
| [dateFormat](grid/api/gridcolumn_properties/gridcolumn_dateformat_property.md) | (optional) defines the format of dates. The date format must include delimiters (spaces or symbols), otherwise an error will be thrown |
| [draggable](grid/api/gridcolumn_properties/gridcolumn_draggable_property.md) | (optional) defines whether a column is draggable, *false* by default |
| [editable](grid/api/gridcolumn_properties/gridcolumn_editable_property.md) | (optional) defines whether a column is editable, *false* by default |
| [editorConfig](grid/api/gridcolumn_properties/gridcolumn_editorconfig_property.md) | (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 |
| [editorType](grid/api/gridcolumn_properties/gridcolumn_editortype_property.md) | (optional) the type of an editor used in a column: *"input"*/*"select"*/*"combobox"*/*"textarea"*/*"multiselect"*/*"datePicker"* |
| [footer](grid/api/gridcolumn_properties/gridcolumn_footer_property.md) | (optional) an array of objects with footer rows configuration |
|[gravity](grid/api/gridcolumn_properties/gridcolumn_gravity_property.md)| (optional) sets the relative width proportions for Grid columns |
| [groupable](grid/api/gridcolumn_properties/gridcolumn_groupable_property.md) | (optional) enables data grouping by the values of a certain column via the user interface (**PRO version only**) |
| [header](grid/api/gridcolumn_properties/gridcolumn_header_property.md) | (required) an array of objects with header rows configuration |
| [hidden](grid/api/gridcolumn_properties/gridcolumn_hidden_property.md) | (optional) defines whether a column is hidden, *false* by default |
| [htmlEnable](grid/api/gridcolumn_properties/gridcolumn_htmlenable_property.md) | (optional) allows using and displaying HTML content in a column. If set to *false*, the content of the column cells will be displayed as a *string* value, *false* by default |
| [id](grid/api/gridcolumn_properties/gridcolumn_id_property.md) | (required) the id of a column |
| [mark](grid/api/gridcolumn_properties/gridcolumn_mark_property.md) | (optional) returns a template for marking a cell(s) or applies the desired CSS classes to cells with minimal/maximal values in a column |
| [maxWidth](grid/api/gridcolumn_properties/gridcolumn_maxwidth_property.md) | (optional) the maximal width to be set for a column |
| [minWidth](grid/api/gridcolumn_properties/gridcolumn_minwidth_property.md) | (optional) the minimum width to be set for a column |
| [numberMask](grid/api/gridcolumn_properties/gridcolumn_numbermask_property.md) | (optional) sets an input mask for entering number values |
| [options](grid/api/gridcolumn_properties/gridcolumn_options_property.md) | (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"` |
| [patternMask](grid/api/gridcolumn_properties/gridcolumn_patternmask_property.md) | (optional) sets an input mask for entering number and string values according to a special pattern |
| [resizable](grid/api/gridcolumn_properties/gridcolumn_resizable_property.md) | (optional) defines whether a column can be resized, *false* by default |
| [sortable](grid/api/gridcolumn_properties/gridcolumn_sortable_property.md) | (optional) defines whether a column is sortable, *true* by default |
| [summary](grid/api/gridcolumn_properties/gridcolumn_summary_property.md) | (optional) creates the list of calculated values based on the column's data. The defined list is available only at the column's level |
| [template](grid/api/gridcolumn_properties/gridcolumn_template_property.md) | (optional) a function which returns a template with content for a cell |
| [tooltip](grid/api/gridcolumn_properties/gridcolumn_tooltip_property.md) | (optional) enables/disables the header tooltip, or sets the configuration object with the tooltip settings |
| [tooltipTemplate](grid/api/gridcolumn_properties/gridcolumn_tooltiptemplate_property.md) | (optional) a function which returns a template for the content of the tooltip |
| [type](grid/api/gridcolumn_properties/gridcolumn_type_property.md) | (optional) the type of a column |
| [width](grid/api/gridcolumn_properties/gridcolumn_width_property.md) | (optional) the width of a column, *100* by default |
| [`adjust`](grid/api/gridcolumn_properties/gridcolumn_adjust_property.md) | (optional) *false* by default, defines whether the width of a column is automatically adjusted to its content |
| [`align`](grid/api/gridcolumn_properties/gridcolumn_align_property.md) | (optional) aligns data in a column: *"left"*/*"center"*/*"right"*|
| [`autoWidth`](grid/api/gridcolumn_properties/gridcolumn_autowidth_property.md) | (optional) enables/disables the ability of a column to adjust its size to the size of Grid, *false* by default |
| [`closable`](grid/api/gridcolumn_properties/gridcolumn_closable_property.md) | (optional) either allows closing a particular element of the [`group`](grid/api/grid_group_config.md) panel or makes it permanently enabled (**PRO version only**)|
| [`dateFormat`](grid/api/gridcolumn_properties/gridcolumn_dateformat_property.md) | (optional) defines the format of dates. The date format must include delimiters (spaces or symbols), otherwise an error will be thrown |
| [`draggable`](grid/api/gridcolumn_properties/gridcolumn_draggable_property.md) | (optional) defines whether a column is draggable, *false* by default |
| [`editable`](grid/api/gridcolumn_properties/gridcolumn_editable_property.md) | (optional) defines whether a column is editable, *false* by default |
| [`editorConfig`](grid/api/gridcolumn_properties/gridcolumn_editorconfig_property.md) | (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 |
| [`editorType`](grid/api/gridcolumn_properties/gridcolumn_editortype_property.md) | (optional) the type of an editor used in a column: *"input"*/*"select"*/*"combobox"*/*"textarea"*/*"multiselect"*/*"datePicker"* |
| [`footer`](grid/api/gridcolumn_properties/gridcolumn_footer_property.md) | (optional) an array of objects with footer rows configuration |
|[`gravity`](grid/api/gridcolumn_properties/gridcolumn_gravity_property.md)| (optional) sets the relative width proportions for Grid columns |
| [`groupable`](grid/api/gridcolumn_properties/gridcolumn_groupable_property.md) | (optional) enables data grouping by the values of a certain column via the user interface (**PRO version only**) |
| [`header`](grid/api/gridcolumn_properties/api_gridcolumn_header_properties.md) | (required) an array of objects with header rows configuration |
| [`hidden`](grid/api/gridcolumn_properties/gridcolumn_hidden_property.md) | (optional) defines whether a column is hidden, *false* by default |
| [`htmlEnable`](grid/api/gridcolumn_properties/gridcolumn_htmlenable_property.md) | (optional) allows using and displaying HTML content in a column. If set to *false*, the content of the column cells will be displayed as a *string* value, *false* by default |
| [`id`](grid/api/gridcolumn_properties/gridcolumn_id_property.md) | (required) the id of a column |
| [`mark`](grid/api/gridcolumn_properties/gridcolumn_mark_property.md) | (optional) returns a template for marking a cell(s) or applies the desired CSS classes to cells with minimal/maximal values in a column |
| [`maxWidth`](grid/api/gridcolumn_properties/gridcolumn_maxwidth_property.md) | (optional) the maximal width to be set for a column |
| [`minWidth`](grid/api/gridcolumn_properties/gridcolumn_minwidth_property.md) | (optional) the minimum width to be set for a column |
| [`numberMask`](grid/api/gridcolumn_properties/gridcolumn_numbermask_property.md) | (optional) sets an input mask for entering number values |
| [`options`](grid/api/gridcolumn_properties/gridcolumn_options_property.md) | (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"` |
| [`patternMask`](grid/api/gridcolumn_properties/gridcolumn_patternmask_property.md) | (optional) sets an input mask for entering number and string values according to a special pattern |
| [`resizable`](grid/api/gridcolumn_properties/gridcolumn_resizable_property.md) | (optional) defines whether a column can be resized, *false* by default |
| [`sortable`](grid/api/gridcolumn_properties/gridcolumn_sortable_property.md) | (optional) defines whether a column is sortable, *true* by default |
| [`summary`](grid/api/gridcolumn_properties/gridcolumn_summary_property.md) | (optional) creates the list of calculated values based on the column's data. The defined list is available only at the column's level |
| [`template`](grid/api/gridcolumn_properties/gridcolumn_template_property.md) | (optional) a function which returns a template with content for a cell |
| [`tooltip`](grid/api/gridcolumn_properties/gridcolumn_tooltip_property.md) | (optional) enables/disables the header tooltip, or sets the configuration object with the tooltip settings |
| [`tooltipTemplate`](grid/api/gridcolumn_properties/gridcolumn_tooltiptemplate_property.md) | (optional) a function which returns a template for the content of the tooltip |
| [`type`](grid/api/gridcolumn_properties/gridcolumn_type_property.md) | (optional) the type of a column |
| [`width`](grid/api/gridcolumn_properties/gridcolumn_width_property.md) | (optional) the width of a column, *100* by default |


## Example
Expand Down
4 changes: 3 additions & 1 deletion docs/grid/api/grid_columns_config.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,4 +25,6 @@ const grid = new dhx.Grid("grid_container", {

Each column object may contain a set of properties. You will find the full list of the configuration properties of a Grid column [here](grid/api/api_gridcolumn_properties.md).

[comment]: # (@related: grid/initialization.md#initialize-grid grid/configuration.md#columns grid/customization.md)
**Related articles**:
- [Configuration](grid/configuration.md#columns)
- [Grid column properties](grid/api/api_gridcolumn_properties.md)
2 changes: 1 addition & 1 deletion docs/grid/api/grid_spans_config.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ Each object in the spans array contains the following properties:
- the *key* is either the key defined in the list or the functor name
- the *value* can be a *string*, *number* or *null*

The counted values are taken either from the [`summary`](grid/api/grid_summary_config.md) config option of the component or the [`summary`](grid/api/api_gridcolumn_properties.md) config option of a column.
The counted values are taken either from the [`summary`](grid/api/grid_summary_config.md) config option of the component or the [`summary`](grid/api/gridcolumn_properties/gridcolumn_summary_property.md) config option of a column.

:::note
In case key names in the `summary` configs are the same, values are taken from the column's configuration option.
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
---
sidebar_label: header
title: JavaScript Grid - Grid Column Header Properties
description: You can explore the Grid column header properties of Grid in the documentation of the DHTMLX JavaScript UI library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite.
---

# Grid column header properties

The Grid column `header` is a required property that presents an array of objects with header rows configuration. This section contains the list of the column header objects' properties. Click the name of the necessary property to see the details on its usage.

## Usage

~~~jsx
header: [
{
text?:
string |
((content: {
[key: string]: string | number | null
}) => string),
tooltip?: boolean | object, // true by default
tooltipTemplate?: (
content: {
[key: string]: string | number | null;
value: string;
},
header: IHeader,
column: ICol
) => string | boolean,
align?: "left" | "center" | "right", // "left" by default
colspan?: number,
rowspan?: number,
css?: string,
content?: "inputFilter" | "selectFilter" | "comboFilter" | "dateFilter",
filterConfig?: object,
customFilter?: (
value: string | number | Date | Date[],
match: string | string[] | Date | Date[]
) => boolean,
headerSort?: boolean, // true by default
sortAs?: (cellValue) => string | number,
htmlEnable?: boolean, // false by default
}
];
~~~

## Properties

| Property | Description |
|---------------------------------------------------------------------------------- |------------------------------------------------------- |
| [`align`](grid/api/gridcolumn_properties/gridcolumn_header_property/align.md) | (optional) aligns data in the header |
| [`colspan`](grid/api/gridcolumn_properties/gridcolumn_header_property/colspan.md) | (optional) the number of columns in a colspan |
| [`content`](grid/api/gridcolumn_properties/gridcolumn_header_property/content.md) | (optional) defines the content of the column header, including the filter type |
| [`css`](grid/api/gridcolumn_properties/gridcolumn_header_property/css.md) | (optional) styling to be applied to a header |
| [`customFilter`](grid/api/gridcolumn_properties/gridcolumn_header_property/customfilter.md) | (optional) a callback function that allows defining custom filtering logic |
| [`filterConfig`](grid/api/gridcolumn_properties/gridcolumn_header_property/filterconfig.md) | (optional) a configuration object for setting the behavior and appearance of the filter |
| [`headerSort`](grid/api/gridcolumn_properties/gridcolumn_header_property/headersort.md) | (optional) enables/disables sorting by clicking the header |
| [`htmlEnable`](grid/api/gridcolumn_properties/gridcolumn_header_property/htmlenable.md) | (optional) allows using and displaying HTML content in a header |
| [`rowspan`](grid/api/gridcolumn_properties/gridcolumn_header_property/rowspan.md) | (optional) the number of rows in a rowspan |
| [`sortAs`](grid/api/gridcolumn_properties/gridcolumn_header_property/sortas.md) | (optional) a function that defines the type to sort data as (e.g. string, number, date, etc.) |
| [`text`](grid/api/gridcolumn_properties/gridcolumn_header_property/text.md) | (optional) the text of a header |
| [`tooltip`](grid/api/gridcolumn_properties/gridcolumn_header_property/tooltip.md) | (optional) enables/disables the header tooltip, or sets the configuration object with the tooltip settings |
| [`tooltipTemplate`](grid/api/gridcolumn_properties/gridcolumn_header_property/tooltiptemplate.md) | (optional) sets a template for the header tooltip, taking into account the `htmlEnable` property |

## Example

~~~jsx
const grid = new dhx.Grid("grid_container", {
columns: [
{ id: "title", header: [{ text: "Title" }] },
// more columns configuration objects
],
// more options
});
~~~

**Related articles:**
- [Configuration](grid/configuration.md)
- [Grid column properties](grid/api/api_gridcolumn_properties.md)

**Related sample**: [Grid. Grouped headers (spans)](https://snippet.dhtmlx.com/eol76o68)
Loading