footerRowHeight

Optional. Sets the height of rows in the footer

Usage

footerRowHeight?: number | (number | "auto")[];

pro version only

The "auto" value is a PRO feature. Measuring the content is available in the PRO version of the DHTMLX Grid (or DHTMLX Suite) package only, exactly like the headerAutoHeight, footerAutoHeight and autoHeight properties.

Default config

footerRowHeight: 40

Example

const grid = new dhx.Grid("grid_container", {
    columns: [
        {
            id: "country", width: 200,
            header: [{ text: "Location", colspan: 2 }, { text: "Country" }, { text: "ISO code" }],
            footer: [{ text: "Total" }, { text: "The number of the listed countries" }],
        },
        {
            id: "region", width: 200,
            header: ["", { text: "Region" }, { text: "Subregion of the world" }],
            footer: [{ text: "Unique" }, { text: "The number of the distinct regions" }],
        },
    ],
    // level 0 -> 40px, level 1 -> adjusts to its content
    footerRowHeight: [40, "auto"],
    data: dataset
});

Grid renders the footer as a stack of levels (rows). The number of levels is defined by the longest footer array among the columns:

columns: [
    { id: "country", footer: [{ text: "Total" }, { text: "The number of the listed countries" }] }, // 2 levels
    { id: "region", footer: [{ text: "Unique" }, { text: "The number of the distinct regions" }] }
]

The footerRowHeight property defines the height of those levels. You can set it in two ways:

as a number - the same height, in pixels, is applied to every level of the footer:

footerRowHeight: 56 // the height of both levels is 56px

as an array - the levels are sized individually. The item at index i describes level i, counting from the topmost one. An item can be either a height in pixels or the "auto" keyword (PRO version only), which adjusts the level height to its content:

// level 0 -> 40px, level 1 -> adjusts to its content
footerRowHeight: [40, "auto"]

info

In the GPL version, the array form still works: individual pixel heights per level are fully supported. An "auto" item is accepted without an error, but it has no effect: the level gets the default height of 40px and its text is not wrapped. Use explicit pixel values instead.

Height resolution rules

`footerRowHeight`	Level	Height	Text wrapping
number	any	the number	no
array	a number item	the item	no
array	an "auto" item (PRO version only)	fits the content, at least 40px	yes
array	beyond the array length	40px	no

Extra array items are ignored: an array longer than the actual number of levels does not add levels. A non-positive or non-numeric item falls back to the default 40px.

The height of the footer is calculated as a sum of all row heights in it.

Relation to `footerAutoHeight`

The footerAutoHeight config, as well as autoHeight, which turns it on for the whole component, makes every level of the footer fit its content. The array form of footerRowHeight defines the height of each level explicitly, therefore it takes precedence over footerAutoHeight:

if footerRowHeight is set as an array, footerAutoHeight is ignored for the footer entirely, including the levels which the array does not cover. Use the "auto" items to opt individual levels in
if footerRowHeight is set as a number, footerAutoHeight applies to the footer: every level fits its content but is never shorter than footerRowHeight

Level heights in the export

The per-level heights are carried over to the export: the XLSX header and footer rows keep their individual heights, and the PDF/PNG snapshot uses the correct total height of the zone.

Change log:

the array value with individual level heights and the "auto" keyword were added in v9.4

Related API:

Related article: Header/footer height

Related samples:

Usage​

Default config​

Example​

Footer levels and their height​

Height resolution rules​

Relation to footerAutoHeight​

Level heights in the export​