header
Required. An array of objects with header rows configuration
Usage
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",
filterConfig?: {
filter?: (item, input: string) => boolean,
multiselection?: boolean,
readonly?: boolean,
placeholder?: string,
virtual?: boolean,
template?: function
},
customFilter?: (item, input: string) => 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:
|
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) 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:
|
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) additional content of a header, which can be one of the filters: "inputFilter" | "selectFilter" | "comboFilter" |
filterConfig | (optional) a configuration object for "comboFilter". It can contain a set of properties:
|
customFilter | (optional) a custom function for extended filtering. It takes two parameters:
|
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 |
Example
const grid = new dhx.Grid("grid_container", {
columns: [
{ id: "title", header: [{ text: "Title" }] },
// more columns configuration objects
],
// more options
});
Related article: Configuration
Related sample: Grid. Grouped headers (spans)