Skip to main content

footerPosition

pro version only

This functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) package.

Optional. Defines the positioning logic for the footer and bottom-pinned rows within the component container

footerPosition?: "bottom" | "relative";

Default value: "relative"

Example

const grid = new dhx.Grid("grid_container", {
    columns: [
        {
            id: "productId",
            header: [{ text: "Product Id" }],
            summary: "count",
            footer: [{ text: summary => `Total: ${summary.count}` }],
        },
        {
            id: "category",
            header: [{ text: "Category" }],
        },
        {
            id: "price",
            type: "number",
            numberMask: { prefix: "$" },
            header: [{ text: "Price" }],
            summary: "avg",
            footer: [{ text: summary => `Avg: ${summary.avg}` }],
        },
        {
            id: "stock",
            type: "number",
            header: [{ text: "Stock" }],
            summary: "sum",
            footer: [{ text: summary => `Total: ${summary.sum}` }],
        },
    ],
    data: dataset,
    footerPosition: "bottom", // "relative" by default
    bottomSplit: 2
});

The property has the following values:

  • relative - the footer follows the content immediately. If the number of rows is small and doesn't fill the container, the footer moves up to stay attached to the last row.
  • bottom - the footer and bottom-pinned rows are strictly locked to the bottom edge of the container. They remain at the base of the component even if the content occupies only a fraction of the available height.