diff --git a/docker/redirects.conf b/docker/redirects.conf index 89d6faf6..7f6918d8 100644 --- a/docker/redirects.conf +++ b/docker/redirects.conf @@ -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/; diff --git a/docs/grid/api/api_gridcolumn_properties.md b/docs/grid/api/api_gridcolumn_properties.md index 4c8f8885..1584fd3b 100644 --- a/docs/grid/api/api_gridcolumn_properties.md +++ b/docs/grid/api/api_gridcolumn_properties.md @@ -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 diff --git a/docs/grid/api/grid_columns_config.md b/docs/grid/api/grid_columns_config.md index 3105ca2c..3b709e7f 100644 --- a/docs/grid/api/grid_columns_config.md +++ b/docs/grid/api/grid_columns_config.md @@ -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) diff --git a/docs/grid/api/grid_spans_config.md b/docs/grid/api/grid_spans_config.md index 5c11ae37..b251d3ae 100644 --- a/docs/grid/api/grid_spans_config.md +++ b/docs/grid/api/grid_spans_config.md @@ -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. diff --git a/docs/grid/api/gridcolumn_properties/api_gridcolumn_header_properties.md b/docs/grid/api/gridcolumn_properties/api_gridcolumn_header_properties.md new file mode 100644 index 00000000..9ee4e0ad --- /dev/null +++ b/docs/grid/api/gridcolumn_properties/api_gridcolumn_header_properties.md @@ -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) diff --git a/docs/grid/api/gridcolumn_properties/gridcolumn_header_property.md b/docs/grid/api/gridcolumn_properties/gridcolumn_header_property.md deleted file mode 100644 index e92ecca8..00000000 --- a/docs/grid/api/gridcolumn_properties/gridcolumn_header_property.md +++ /dev/null @@ -1,136 +0,0 @@ ---- -sidebar_label: header -title: JavaScript Grid column - header Config -description: You can explore the header config of Grid column 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. ---- - -# header - -@short: Required. An array of objects with header rows configuration - -### 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?: { - placeholder?: string, // sets an input placeholder for `inputFilter`, `comboFilter` and `dateFilter` - icon?: string, // sets CSS class for the filter icon in `inputFilter` and the calendar icon in `dateFilter` - /* properties of `comboFilter` configuration */ - filter?: (item, input: string) => boolean, - multiselection?: boolean, // false by default - readonly?: boolean, // false by default - virtual?: boolean, // true by default - template?: function, - /* properties of `dateFilter` configuration */ - asDateObject?: boolean, // false by default - date?: Date | string, - mark?: (date: Date) => string, - disabledDates?: (date: Date) => boolean, - weekStart?: "saturday" | "sunday" | "monday", // "sunday" by default - weekNumbers?: boolean, // false by default - mode?: "calendar" | "year" | "month" | "timepicker", // "calendar" by default - timePicker?: boolean, // false by default - dateFormat?: string, // by default, applies the dateFormat used for the column - timeFormat?: 24 | 12, // 24 by default - thisMonthOnly?: boolean, // false by default - width?: string | number, // "250px" by default - range?: boolean // false by default - }, - 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 - } -]; -~~~ - -### Parameters - -Each header object may include: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
text(optional) the text of a header or a callback function which is called with the following parameter:
  • content - an object with the content of the header tooltip that contains the calculated values as *key:value* pairs, where
    • the *key* is either the key defined in the list or the functor name
    • the *value* can be a *string/number* or *null*
    The calculated values are taken either from the summary config option of the component or the summary config option of a column
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:
  • force - (optional) forces opening of a tooltip; if set to true, the showDelay and hideDelay settings are ignored, *false* by default
  • showDelay - (optional) the time period that should pass before showing a tooltip, in ms
  • hideDelay - (optional) the time period that should pass before hiding a tooltip, in ms
  • margin - (optional) the margin between the node and tooltip; *8px* by default
  • position - (optional) the position of a tooltip: *"right"*, *"bottom"*, *"center"*, *"left"*, *"top"*; *"bottom"* by default
  • css - (optional) the style of a tooltip box
tooltipTemplate(optional) sets a template for the header tooltip. Takes into account the htmlEnable property. The value of the tooltipTemplate property is a callback function which is called with the following parameters:
  • content - an object with the content of the header tooltip. Contains two properties which are available either from the component's or from the column's configuration:
    • value - the value rendered in a cell, including the applied templates
    • an object with the calculated values of the summary property, set as *key:value* pairs where:
      • the *key* is either the key defined in the list or the functor name
      • the *value* can be a *string/number* or *null*
  • header - the object of the column header
  • column - the object of a column
Return false to disable the tooltip
align(optional) aligns data in the header: *"left"* | *"center"* | *"right"*, "left" by default
colspan(optional) the number of columns in a colspan
rowspan(optional) the number of rows in a rowspan
css(optional) styling to be applied to a header
content(optional) defines the content of the column header, including the filter type. Allows setting one of the predefined filters: -
  • "inputFilter" — a text input field
  • "selectFilter" — a dropdown list
  • "comboFilter" — a combobox with search
  • "dateFilter" (PRO version) — a filter with a calendar for selecting a date or a date range
filterConfig(optional) a configuration object for setting the behavior and appearance of the filter. The set of properties depends on the filter type specified in the `content` property:

- a configuration object for "inputFilter" can contain the following properties:
  • placeholder - (optional) the placeholder text in the input field
  • icon - (optional) the CSS class for the filter icon

- a configuration object for "comboFilter" can contain a set of properties:
  • filter - (optional) sets a custom function for filtering Combo Box options
  • multiselection - (optional) enables selection of multiple options, *false* by default
  • readonly - (optional) makes ComboBox readonly (it is only possible to select options from the list, without entering words in the input). The default value of the readonly property depends on the following conditions:
    • the `readonly:true` is set as a default value, if `htmlEnable:true` is set for a column and there is no template specified for a column
    • in all other cases, `readonly:false` is set by default
  • placeholder - (optional) sets a placeholder in the input of ComboBox
  • virtual - (optional) enables dynamic loading of data on scrolling the list of options, true by default
  • template - (optional) a function which returns a template with content for the filter options. Takes an option item as a parameter:
    • item - (object) an option item
- a configuration object for "dateFilter" (PRO version) can contain a set of properties:
Main properties:
  • icon - (optional) the CSS class for the calendar icon
  • placeholder - (optional) the placeholder text in the input field when no date is selected
  • asDateObject - (optional) determines how the filter processes data for `customFilter` and the `beforeFilter` and `filterChange` events. If *true*, the comparison is performed using Date objects, *false* by default
  • range - (optional) enables the date range selection mode (from and to), *false* by default
  • dateFormat - (optional) the date display format (e.g., *"%d/%m/%Y"*). By default, applies the `dateFormat` used for the column
Calendar API configuration properties:
  • date - (optional) - the initial date opened in the calendar
  • mark - (optional) - a function for adding custom CSS classes to specific dates
  • disabledDates - (optional) - a function for disabling the selection of specific dates
  • weekStart - (optional) - the start day of the week (*"saturday"*, *"sunday"* (default), *"monday"*).
  • weekNumbers - (optional) - shows week numbers if *true*, *false* by default
  • mode - (optional) - the calendar display mode (*"calendar"* (default), *"year"*, *"month"*, *"timepicker"*)
  • timePicker - (optional) - adds the ability to select time, *false* by default
  • timeFormat - (optional) - the time format (*12* or *24* (default) hours)
  • thisMonthOnly - (optional) - if *true*, allows selecting dates only within the current month, *false* by default
  • width - (optional) - the width of the dropdown calendar, *"250px"* by default
customFilter (optional) a callback function that allows defining custom filtering logic. It takes two parameters:
  • value - (required) the cell value in the row
  • match - (required) the value selected in the filter
and returns *true*, if the row matches the filtering criteria, otherwise *false*
headerSort(optional) enables/disables sorting by clicking the header, true by default
sortAs(optional) a function that defines the type to sort data as (e.g. string, number, date, etc.)
htmlEnable(optional) false by default. If set to true, allows using and displaying HTML content in a header. If set to false, the content of the header cells will be displayed as a string value
- - -@descr: -### Example - -~~~jsx -const grid = new dhx.Grid("grid_container", { - columns: [ - { id: "title", header: [{ text: "Title" }] }, - // more columns configuration objects - ], - // more options -}); -~~~ - -**Related article**: [Configuration](grid/configuration.md) - -**Related sample**: [Grid. Grouped headers (spans)](https://snippet.dhtmlx.com/eol76o68) \ No newline at end of file diff --git a/docs/grid/api/gridcolumn_properties/gridcolumn_header_property/align.md b/docs/grid/api/gridcolumn_properties/gridcolumn_header_property/align.md new file mode 100644 index 00000000..6aaa0d65 --- /dev/null +++ b/docs/grid/api/gridcolumn_properties/gridcolumn_header_property/align.md @@ -0,0 +1,32 @@ +--- +sidebar_label: align +title: JavaScript Grid column header - align Config +description: You can explore the align config of Grid column header 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. +--- + +# align + +@short: Optional. Aligns data in the header + +### Usage + +~~~jsx +align?: "left" | "center" | "right"; +~~~ + +@default: "left" + +@descr: +### Example + +~~~jsx +const grid = new dhx.Grid("grid_container", { + columns: [ + { id: "name", header: [{ text: "Name", align: "center" }], align: "right" } + // more columns configuration objects + ], + // more options +}); +~~~ + +**Related article**: [Alignment](grid/configuration.md#alignment) \ No newline at end of file diff --git a/docs/grid/api/gridcolumn_properties/gridcolumn_header_property/colspan.md b/docs/grid/api/gridcolumn_properties/gridcolumn_header_property/colspan.md new file mode 100644 index 00000000..2014b0a1 --- /dev/null +++ b/docs/grid/api/gridcolumn_properties/gridcolumn_header_property/colspan.md @@ -0,0 +1,40 @@ +--- +sidebar_label: colspan +title: JavaScript Grid column header - colspan Config +description: You can explore the colspan config of Grid column header 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. +--- + +# colspan + +@short: Optional. The number of columns in a colspan + +### Usage + +~~~jsx +colspan?: number; +~~~ + +@descr: +### Example + +~~~jsx +const grid = new dhx.Grid("grid_container", { + columns: [ + { + width: 150, id: "start_date", + // the "Calendar" header cell spans this column and the next one + header: [{ text: "Calendar", colspan: 2 }, { text: "Start date" }] + // other column properties + }, + { + width: 150, id: "end_date", + // an empty object leaves the place taken by the colspan + header: [{}, { text: "End date" }] + } + // more columns configuration objects + ], + // more options +}); +~~~ + +**Related sample**: [Grid. Grouped headers (spans)](https://snippet.dhtmlx.com/eol76o68) diff --git a/docs/grid/api/gridcolumn_properties/gridcolumn_header_property/content.md b/docs/grid/api/gridcolumn_properties/gridcolumn_header_property/content.md new file mode 100644 index 00000000..f7c5a08b --- /dev/null +++ b/docs/grid/api/gridcolumn_properties/gridcolumn_header_property/content.md @@ -0,0 +1,84 @@ +--- +sidebar_label: content +title: JavaScript Grid column header - content Config +description: You can explore the content config of Grid column header 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. +--- + +# content + +@short: Optional. Defines the content of the column header, including the filter type + +### Usage + +~~~jsx +content?: "inputFilter" | "selectFilter" | "comboFilter" | "dateFilter"; +~~~ + +### Parameters + +The `content` property allows setting one of the predefined filters: + +- `"inputFilter"` - a text input field +- `"selectFilter"` - a dropdown list +- `"comboFilter"` - a combobox with search +- `"dateFilter"` (**PRO version**) - a filter with a calendar for selecting a date or a date range + +@descr: +### Example + +~~~jsx +const grid = new dhx.Grid("grid_container", { + columns: [ + { + id: "productName", + minWidth: 200, + header: [ + { text: "Product Name" }, + { + content: "inputFilter", + filterConfig: { placeholder: "Search by name" } + } + ] + }, + { + id: "category", + header: [ + { text: "Category" }, + { + content: "comboFilter", + filterConfig: { placeholder: "Select category" } + } + ] + }, + { + id: "receivedDate", + minWidth: 200, + type: "date", + dateFormat: "%d.%m.%Y", + header: [ + { text: "Received Date" }, + { + content: "dateFilter", + filterConfig: { + placeholder: "Select date", + range: true, + } + } + ], + }, + { + id: "stock", + type: "number", + header: [ + { text: "Stock" }, { content: "selectFilter" } + ] + }, + // more columns configuration objects + ], + // more options +}); +~~~ + +**Related article**: [Header/footer filters](grid/configuration.md#headerfooter-filters) + +**Related sample**: [Grid. Header filters (dateFilter, comboFilter, inputFilter, selectFilter)](https://snippet.dhtmlx.com/4qz8ng3c) \ No newline at end of file diff --git a/docs/grid/api/gridcolumn_properties/gridcolumn_header_property/css.md b/docs/grid/api/gridcolumn_properties/gridcolumn_header_property/css.md new file mode 100644 index 00000000..8f444049 --- /dev/null +++ b/docs/grid/api/gridcolumn_properties/gridcolumn_header_property/css.md @@ -0,0 +1,46 @@ +--- +sidebar_label: css +title: JavaScript Grid column header - css Config +description: You can explore the css config of Grid column header 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. +--- + +# css + +@short: Optional. Styling to be applied to a header + +### Usage + +~~~jsx +css?: string; +~~~ + +@descr: +### Example + +~~~html + + + +~~~ + +**Related article**: [Styling header cells](grid/customization.md#styling-header-cells) + +**Related sample**: [Grid. Styling header cells (custom CSS)](https://snippet.dhtmlx.com/7o4elf48) diff --git a/docs/grid/api/gridcolumn_properties/gridcolumn_header_property/customfilter.md b/docs/grid/api/gridcolumn_properties/gridcolumn_header_property/customfilter.md new file mode 100644 index 00000000..19b40ea6 --- /dev/null +++ b/docs/grid/api/gridcolumn_properties/gridcolumn_header_property/customfilter.md @@ -0,0 +1,49 @@ +--- +sidebar_label: customFilter +title: JavaScript Grid column header - customFilter Config +description: You can explore the customFilter config of Grid column header 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. +--- + +# customFilter + +@short: Optional. A callback function that allows defining custom filtering logic + +### Usage + +~~~jsx +customFilter?: ( + value: string | number | Date | Date[], + match: string | string[] | Date | Date[] +) => boolean; +~~~ + +### Parameters + +The callback function takes two parameters: +- `value` - (required) the cell value in the row +- `match` - (required) the value selected in the filter + +and returns *true*, if the row matches the filtering criteria, otherwise *false*. + +@descr: +### Example + +~~~jsx +const grid = new dhx.Grid("grid_container", { + columns: [ + { width: 150, id: "country", header: [ + { text: "Country" }, + { + content: "comboFilter", + // filters values by the same length + customFilter: (value, match) => value.length === match.length + } + ]}, + ], + // other configuration properties +}); +~~~ + +**Related article**: [Customizing header/footer filters](grid/configuration.md#customizing-headerfooter-filters) + +**Related sample**: [Grid. Custom filters in the header (dateFilter, comboFilter, inputFilter, selectFilter)](https://snippet.dhtmlx.com/gcidkxjg) \ No newline at end of file diff --git a/docs/grid/api/gridcolumn_properties/gridcolumn_header_property/filterconfig.md b/docs/grid/api/gridcolumn_properties/gridcolumn_header_property/filterconfig.md new file mode 100644 index 00000000..9318ca8e --- /dev/null +++ b/docs/grid/api/gridcolumn_properties/gridcolumn_header_property/filterconfig.md @@ -0,0 +1,145 @@ +--- +sidebar_label: filterConfig +title: JavaScript Grid column header - filterConfig Config +description: You can explore the filterConfig config of Grid column header 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. +--- + +# filterConfig + +@short: Optional. A configuration object for setting the behavior and appearance of the filter + +### Usage + +~~~jsx +filterConfig?: { + placeholder?: string, // sets an input placeholder for `inputFilter`, `comboFilter` and `dateFilter` + icon?: string, // sets CSS class for the filter icon in `inputFilter` and the calendar icon in `dateFilter` + /* properties of `comboFilter` configuration */ + filter?: (item, input: string) => boolean, + multiselection?: boolean, // false by default + readonly?: boolean, // false by default + virtual?: boolean, // true by default + template?: function, + /* properties of `dateFilter` configuration */ + asDateObject?: boolean, // false by default + date?: Date | string, + mark?: (date: Date) => string, + disabledDates?: (date: Date) => boolean, + weekStart?: "saturday" | "sunday" | "monday", // "sunday" by default + weekNumbers?: boolean, // false by default + mode?: "calendar" | "year" | "month" | "timepicker", // "calendar" by default + timePicker?: boolean, // false by default + dateFormat?: string, // by default, applies the dateFormat used for the column + timeFormat?: 24 | 12, // 24 by default + thisMonthOnly?: boolean, // false by default + width?: string | number, // "250px" by default + range?: boolean // false by default +}; +~~~ + +### Parameters + +The set of properties depends on the filter type specified in the [`content`](grid/api/gridcolumn_properties/gridcolumn_header_property/content.md) property: + +- a configuration object for **"inputFilter"** can contain the following properties: + - `placeholder` - (*string*) optional, the placeholder text in the input field + - `icon` - (*string*) optional, the CSS class for the filter icon + +- a configuration object for **"comboFilter"** can contain a set of properties: + - `filter` - (*function*) optional, sets a custom function for filtering Combo Box options + - `multiselection` - (*boolean*) optional, enables selection of multiple options, *false* by default + - `readonly` - (*boolean*) optional, makes ComboBox readonly (it is only possible to select options from the list, without entering words in the input). The default value of the `readonly` property depends on the following conditions: + - the `readonly:true` is set as a default value, if `htmlEnable:true` is set for a column and there is no template specified for a column + - in all other cases, `readonly:false` is set by default + - `placeholder` - (*string*) optional, sets a placeholder in the input of ComboBox + - `virtual` - (*boolean*) optional, enables dynamic loading of data on scrolling the list of options, *true* by default + - `template` - (*function*) optional, a function which returns a template with content for the filter options. Takes an option item as a parameter + +- a configuration object for **"dateFilter"** (**PRO version**) can contain a set of properties: + + Main properties: + + - `icon` - (*string*) optional, the CSS class for the calendar icon + - `placeholder` - (*string*) optional, the placeholder text in the input field when no date is selected + - `asDateObject` - (*boolean*) optional, determines how the filter processes data for `customFilter` and the `beforeFilter` and `filterChange` events. If `true`, the comparison is performed using Date objects, *false* by default + - `range` - (*boolean*) optional, enables the date range selection mode (from and to), *false* by default + - `dateFormat` - (*string*) optional, the date display format (e.g., `"%d/%m/%Y"`). By default, applies the `dateFormat` used for the column + + Calendar API configuration properties: + + - `date` - (*Date | string*) optional, the initial date opened in the calendar + - `mark` - (*function*) optional, a function for adding custom CSS classes to specific dates + - `disabledDates` - (*function*) optional, a function for disabling the selection of specific dates + - `weekStart` - (*string*) optional, the start day of the week (`"saturday"`, `"sunday"`, `"monday"`), *"sunday"* by default + - `weekNumbers` - (*boolean*) optional, shows week numbers if `true`, *false* by default + - `mode` - (*string*) optional, the calendar display mode (`"calendar"`, `"year"`, `"month"`, `"timepicker"`), *"calendar"* by default + - `timePicker` - (*boolean*) optional, adds the ability to select time, *false* by default + - `timeFormat` - (*number*) optional, the time format (`12` or `24` hours), *24* by default + - `thisMonthOnly` - (*boolean*) optional, if `true`, allows selecting dates only within the current month, *false* by default + - `width` - (*string | number*) optional, the width of the dropdown calendar, *"250px"* by default + +**dateFilter** supports two modes of operation: + +- **single mode** (default) - the filter allows selecting a single specific date by default. Only records corresponding to the selected day will remain in the table. + +- **range mode** - this mode is activated by setting the `range: true` property in the `filterConfig` object. In this mode, the user can select the start date and the end date. The table will filter records falling within the selected time interval (inclusive). + +@descr: +### Example + +~~~jsx +const grid = new dhx.Grid("grid_container", { + columns: [ + { + id: "productName", + minWidth: 200, + header: [ + { text: "Product Name" }, + { + content: "inputFilter", + filterConfig: { placeholder: "Search by name" } + } + ] + }, + { + id: "category", + header: [ + { text: "Category" }, + { + content: "comboFilter", + filterConfig: { placeholder: "Select category" } + } + ] + }, + { + id: "receivedDate", + minWidth: 200, + type: "date", + dateFormat: "%d.%m.%Y", + header: [ + { text: "Received Date" }, + { + content: "dateFilter", + filterConfig: { + placeholder: "Select date", + range: true, + } + } + ], + }, + { + id: "stock", + type: "number", + header: [ + { text: "Stock" }, { content: "selectFilter" } + ] + }, + // more columns configuration objects + ], + // more options +}); +~~~ + +**Related article**: [Header/footer filters](grid/configuration.md#headerfooter-filters) + +**Related sample**: [Grid. Header filters (dateFilter, comboFilter, inputFilter, selectFilter)](https://snippet.dhtmlx.com/4qz8ng3c) diff --git a/docs/grid/api/gridcolumn_properties/gridcolumn_header_property/headersort.md b/docs/grid/api/gridcolumn_properties/gridcolumn_header_property/headersort.md new file mode 100644 index 00000000..448d1783 --- /dev/null +++ b/docs/grid/api/gridcolumn_properties/gridcolumn_header_property/headersort.md @@ -0,0 +1,39 @@ +--- +sidebar_label: headerSort +title: JavaScript Grid column header - headerSort Config +description: You can explore the headerSort config of Grid column header 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. +--- + +# headerSort + +@short: Optional. Enables/disables sorting by clicking the header + +### Usage + +~~~jsx +headerSort?: boolean; +~~~ + +@default: true + +@descr: +### Example + +~~~jsx +const grid = new dhx.Grid("grid_container", { + columns: [ + { + width: 150, + id: "project", + header: [{ text: "Project", headerSort: false }] + // other column properties + }, + // more columns configuration objects + ], + // more options +}); +~~~ + +**Related article**: [Sortable columns](grid/configuration.md#sortable-columns) + +**Related sample**: [Grid. Sortable columns](https://snippet.dhtmlx.com/r3prvlmo) diff --git a/docs/grid/api/gridcolumn_properties/gridcolumn_header_property/htmlenable.md b/docs/grid/api/gridcolumn_properties/gridcolumn_header_property/htmlenable.md new file mode 100644 index 00000000..5b5fb593 --- /dev/null +++ b/docs/grid/api/gridcolumn_properties/gridcolumn_header_property/htmlenable.md @@ -0,0 +1,41 @@ +--- +sidebar_label: htmlEnable +title: JavaScript Grid column header - htmlEnable Config +description: You can explore the htmlEnable config of Grid column header 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. +--- + +# htmlEnable + +@short: Optional. Allows using and displaying HTML content in a header + +### Usage + +~~~jsx +htmlEnable?: boolean; +~~~ + +@default: false + +@descr: +### Example + +~~~jsx +const grid = new dhx.Grid("grid_container", { + columns: [ + { + width: 150, + id: "population", + header: [{ text: () => `Population`, htmlEnable: true }] + // other column properties + }, + // more columns configuration objects + ], + // more options +}); +~~~ + +If the `htmlEnable` property is set to *false* (default), the content of the header cells is displayed as a string value. + +**Related article**: [HTML content of Grid columns](grid/configuration.md#html-content-of-grid-columns) + +**Related sample**: [Grid. Styling header cells (custom CSS)](https://snippet.dhtmlx.com/7o4elf48?tag=grid) diff --git a/docs/grid/api/gridcolumn_properties/gridcolumn_header_property/rowspan.md b/docs/grid/api/gridcolumn_properties/gridcolumn_header_property/rowspan.md new file mode 100644 index 00000000..b2a4f251 --- /dev/null +++ b/docs/grid/api/gridcolumn_properties/gridcolumn_header_property/rowspan.md @@ -0,0 +1,39 @@ +--- +sidebar_label: rowspan +title: JavaScript Grid column header - rowspan Config +description: You can explore the rowspan config of Grid column header 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. +--- + +# rowspan + +@short: Optional. The number of rows in a rowspan + +### Usage + +~~~jsx +rowspan?: number; +~~~ + +@descr: +### Example + +~~~jsx +const grid = new dhx.Grid("grid_container", { + columns: [ + { + width: 150, id: "start_date", + // the "Start date" header cell takes both header rows + header: [{ text: "Start date", rowspan: 2 }] + // other column properties + }, + { + width: 150, id: "duration", + header: [{ text: "Duration" }, { content: "inputFilter" }] + } + // more columns configuration objects + ], + // more options +}); +~~~ + +**Related sample**: [Grid. Grouped headers (spans)](https://snippet.dhtmlx.com/eol76o68) diff --git a/docs/grid/api/gridcolumn_properties/gridcolumn_header_property/sortas.md b/docs/grid/api/gridcolumn_properties/gridcolumn_header_property/sortas.md new file mode 100644 index 00000000..9f515c99 --- /dev/null +++ b/docs/grid/api/gridcolumn_properties/gridcolumn_header_property/sortas.md @@ -0,0 +1,47 @@ +--- +sidebar_label: sortAs +title: JavaScript Grid column header - sortAs Config +description: You can explore the sortAs config of Grid column header 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. +--- + +# sortAs + +@short: Optional. A function that defines the type to sort data as (e.g. string, number, date, etc.) + +### Usage + +~~~jsx +sortAs?: (cellValue) => string | number; +~~~ + +### Parameters + +The callback function takes one parameter: +- `cellValue` - (required) the current cell value + +and returns a *string* or *number* used as the sort key. + +@descr: +### Example + +~~~jsx +const grid = new dhx.Grid("grid_container", { + columns: [ + { + width: 150, + id: "name", + header: [{ + text: "Name", + // returns a lowercase string for case-insensitive sorting + sortAs: (cellValue) => cellValue.toLowerCase() + // -> "Apple" → "apple", "BANANA" → "banana", "cherry" → "cherry" + }], + // other column properties + }, + // more columns configuration objects + ], + // more options +}); +~~~ + +**Related article**: [Sorting data](grid/usage.md#sorting-data) diff --git a/docs/grid/api/gridcolumn_properties/gridcolumn_header_property/text.md b/docs/grid/api/gridcolumn_properties/gridcolumn_header_property/text.md new file mode 100644 index 00000000..20b8e0b8 --- /dev/null +++ b/docs/grid/api/gridcolumn_properties/gridcolumn_header_property/text.md @@ -0,0 +1,52 @@ +--- +sidebar_label: text +title: JavaScript Grid column header - text Config +description: You can explore the text config of Grid column header 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. +--- + +# text + +@short: Optional. The text of a header + +### Usage + +~~~jsx +text?: + string | + ((content: { + [key: string]: string | number | null + }) => string); +~~~ + +### Parameters + +The text of a header can be set as a *string* or a *callback function* which is called with the following parameter: + +- `content` - an object with the content of the header/footer tooltip that contains the calculated values from the `summary` property as *key:value* pairs, where: + - the *key* is either the key defined in the list or the functor name + - the *value* can be a *string*, *number* or *null* + +The calculated values are taken from the [`summary`](grid/api/grid_summary_config.md) config option of the component and the [`summary`](grid/api/gridcolumn_properties/gridcolumn_summary_property.md) config option of a column. + +@descr: +### Example + +~~~jsx +const grid = new dhx.Grid("grid_container", { + columns: [ + { + width: 150, + id: "population", + header: [{ + text: ({ sum }) => `Population (Total: ${sum})` + }], + summary: "sum", + // other column properties + }, + // more columns configuration objects + ], + // more options +}); +~~~ + +**Related article**: [Header/footer text](grid/configuration.md#headerfooter-text) \ No newline at end of file diff --git a/docs/grid/api/gridcolumn_properties/gridcolumn_header_property/tooltip.md b/docs/grid/api/gridcolumn_properties/gridcolumn_header_property/tooltip.md new file mode 100644 index 00000000..c62b5053 --- /dev/null +++ b/docs/grid/api/gridcolumn_properties/gridcolumn_header_property/tooltip.md @@ -0,0 +1,53 @@ +--- +sidebar_label: tooltip +title: JavaScript Grid column header - tooltip Config +description: You can explore the tooltip config of Grid column header 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. +--- + +# tooltip + +@short: Optional. Enables/disables the header tooltip, or sets the configuration object with the tooltip settings + +### Usage + +~~~jsx +tooltip?: boolean | object; +~~~ + +@default: true + +### Parameters + +When set as an *object*, the tooltip config can have the following properties: + +- `force` - (optional) forces opening of a tooltip; if set to *true*, the `showDelay` and `hideDelay` settings are ignored, *false* by default +- `showDelay` - (optional) the time period that should pass before showing a tooltip, in ms +- `hideDelay` - (optional) the time period that should pass before hiding a tooltip, in ms +- `margin` - (optional) the margin between the node and tooltip; *8px* by default +- `position` - (optional) the position of a tooltip: *"right"*, *"bottom"*, *"center"*, *"left"*, *"top"*; *"bottom"* by default +- `css` - (optional) the style of a tooltip box + +@descr: +### Example + +~~~jsx +const grid = new dhx.Grid("grid_container", { + columns: [ + // enables a tooltip for the header + { id: "country", header: [{ text: "Country", tooltip: true }] }, + // configures tooltip appearance and timing + { id: "population", header: [{ text: "Population", tooltip: { + showDelay: 300, + hideDelay: 200, + position: "top", + css: "custom_tooltip" + }}] }, + // more columns configuration objects + ], + // more options +}); +~~~ + +**Related article**: [Column header/footer tooltip](grid/configuration.md#column-headerfooter-tooltip) + +**Related sample**: [Grid. Header/footer tooltips](https://snippet.dhtmlx.com/fgstf2mq) \ No newline at end of file diff --git a/docs/grid/api/gridcolumn_properties/gridcolumn_header_property/tooltiptemplate.md b/docs/grid/api/gridcolumn_properties/gridcolumn_header_property/tooltiptemplate.md new file mode 100644 index 00000000..0b1aea1e --- /dev/null +++ b/docs/grid/api/gridcolumn_properties/gridcolumn_header_property/tooltiptemplate.md @@ -0,0 +1,64 @@ +--- +sidebar_label: tooltipTemplate +title: JavaScript Grid column header - tooltipTemplate Config +description: You can explore the tooltipTemplate config of Grid column header 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. +--- + +# tooltipTemplate + +@short: Optional. Sets a template for the header tooltip, taking into account the `htmlEnable` property + +### Usage + +~~~jsx +tooltipTemplate?: ( + content: { + [key: string]: string | number | null; + value: string; + }, + header: IHeader, + column: ICol +) => string | boolean; +~~~ + +### Parameters + +The value of the `tooltipTemplate` property is a callback function which is called with the following parameters: + +- `content` - an object with the content of the header tooltip. Contains two properties which are available either from the component's or from the column's configuration: + - `value` - the value rendered in a cell, including the applied templates + - an object with the calculated values of the `summary` property, set as *key:value* pairs, where: + - the *key* is either the key defined in the list or the functor name + - the *value* can be a *string/number* or *null* +- `header` - the object of the column header +- `column` - the object of a column + +Return *false* to disable the tooltip. + +@descr: +### Example + +~~~jsx +const grid = new dhx.Grid("grid_container", { + columns: [ + { + width: 150, + id: "population", + header: [ + { + text: "Population", + tooltipTemplate: ({ totalPopulation, count }) => `Total: ${totalPopulation}, Count: ${ count }` + } + ], + summary: "count" + } + // more columns configuration objects + ], + summary: { totalPopulation: ["population", "sum"] }, + // more options +}); +~~~ + +**Related article**: [Column header/footer tooltip](grid/configuration.md#column-headerfooter-tooltip) + +**Related sample**: [Grid. Header/footer tooltips](https://snippet.dhtmlx.com/fgstf2mq) \ No newline at end of file diff --git a/docs/grid/configuration.md b/docs/grid/configuration.md index 59a04076..4b13d9b8 100644 --- a/docs/grid/configuration.md +++ b/docs/grid/configuration.md @@ -1214,7 +1214,7 @@ Use the [`dhx.methods`](helpers/data_calculation_functions.md) helper to define ### Column summary -To form a summary list that will be available at the column's level only, you should use the [`summary`](grid/api/api_gridcolumn_properties.md) configuration option of the column. The `summary` configuration option of a column 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: +To form a summary list that will be available at the column's level only, you should use the [`summary`](grid/api/gridcolumn_properties/gridcolumn_summary_property.md) configuration option of the column. The `summary` configuration option of a column 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: - a string with the name of the [applied functor](helpers/data_calculation_functions.md) @@ -1347,7 +1347,7 @@ You can specify the text of the header/footer column via the `text` property. It - the *key* is either the key defined in the list or the functor name - the *value* can be a *string*, *number* or *null* -The calculated values are taken from the [`summary`](grid/api/grid_summary_config.md) config option of the component and the [`summary`](grid/api/api_gridcolumn_properties.md) config option of a column. +The calculated values are taken from the [`summary`](grid/api/grid_summary_config.md) config option of the component and 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. @@ -1816,7 +1816,7 @@ Each span object 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 calculated values are taken from the [`summary`](grid/api/grid_summary_config.md) config option of the component and the [`summary`](grid/api/api_gridcolumn_properties.md) config option of a column. +The calculated values are taken from the [`summary`](grid/api/grid_summary_config.md) config option of the component and 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. @@ -2124,6 +2124,7 @@ const grid = new dhx.Grid("grid_container", { ], summary: { totalPopulation: ["population", "sum"] }, data: dataset +}); ~~~ **Related sample**: [Grid. Header/footer tooltip](https://snippet.dhtmlx.com/fgstf2mq) diff --git a/sidebars.js b/sidebars.js index 8c31662a..c55c68ab 100644 --- a/sidebars.js +++ b/sidebars.js @@ -2670,12 +2670,6 @@ module.exports = { { type: "category", label: "Grid column properties", - link: { - type: 'generated-index', - title: "Grid column properties", - keywords: ['grid column properties'], - image: '/img/docusaurus.png' - }, link: { type: 'doc', id: "grid/api/api_gridcolumn_properties", @@ -2693,7 +2687,29 @@ module.exports = { "grid/api/gridcolumn_properties/gridcolumn_footer_property", "grid/api/gridcolumn_properties/gridcolumn_gravity_property", "grid/api/gridcolumn_properties/gridcolumn_groupable_property", - "grid/api/gridcolumn_properties/gridcolumn_header_property", + { + type: "category", + label: "header", + link: { + type: 'doc', + id: "grid/api/gridcolumn_properties/api_gridcolumn_header_properties", + }, + items: [ + "grid/api/gridcolumn_properties/gridcolumn_header_property/align", + "grid/api/gridcolumn_properties/gridcolumn_header_property/colspan", + "grid/api/gridcolumn_properties/gridcolumn_header_property/content", + "grid/api/gridcolumn_properties/gridcolumn_header_property/css", + "grid/api/gridcolumn_properties/gridcolumn_header_property/customfilter", + "grid/api/gridcolumn_properties/gridcolumn_header_property/filterconfig", + "grid/api/gridcolumn_properties/gridcolumn_header_property/headersort", + "grid/api/gridcolumn_properties/gridcolumn_header_property/htmlenable", + "grid/api/gridcolumn_properties/gridcolumn_header_property/rowspan", + "grid/api/gridcolumn_properties/gridcolumn_header_property/sortas", + "grid/api/gridcolumn_properties/gridcolumn_header_property/text", + "grid/api/gridcolumn_properties/gridcolumn_header_property/tooltip", + "grid/api/gridcolumn_properties/gridcolumn_header_property/tooltiptemplate" + ] + }, "grid/api/gridcolumn_properties/gridcolumn_hidden_property", "grid/api/gridcolumn_properties/gridcolumn_htmlenable_property", "grid/api/gridcolumn_properties/gridcolumn_id_property",