Skip to main content

Adding header and footer spans

To add headers and footers that span multiple columns, use the columns property. You need to specify the number of spanned columns as the value of the colspan parameter in the header or/and footer cell object.

import { Grid } from "@svar-ui/react-grid";
import { getData } from "./common/data";

export default function Example() {
    const { data } = getData();

    const columns = [
        { id: "id", width: 50, footer: { text: "All users", colspan: 4 } },
        {
            id: "firstName",
            header: [
                { text: "Main client info", colspan: 3 },
                { text: "User", colspan: 2 },
                { text: "First Name" },
            ],
            width: 150,
        },
        {
            id: "lastName",
            header: ["", "", "Last Name"],
            width: 150,
        },
        {
            id: "companyName",
            header: [
                "",
                { text: "Company" },
                { text: "Name" },
            ],
        },
    ];

    return (
        <div style={{ padding: 20 }}>
            <div>
                <Grid data={data} columns={columns} />
            </div>
        </div>
    );
}

To add headers and footers that span multiple rows, you should specify the number of spanned rows as the value of the rowspan parameter in the header or/and footer cell object.

import { Grid } from "@svar-ui/react-grid";
import { getData } from "./common/data";

export default function ExampleWithFooter() {
    const { data } = getData();

    const columns = [
        { id: "id", width: 50, footer: { text: "All users", colspan: 4 } },
        {
            id: "firstName",
            header: [
                { text: "Main client info", colspan: 3 },
                { text: "User", colspan: 2 },
                { text: "First Name" },
            ],
            width: 150,
        },
        {
            id: "lastName",
            header: ["", "", "Last Name"],
            width: 150,
        },
        {
            id: "companyName",
            header: [
                "",
                { text: "Company", rowspan: 2 }
            ],
        },
    ];

    return (
        <div style={{ padding: 20 }}>
            <div>
                <Grid data={data} columns={columns} footer={true} />
            </div>
        </div>
    );
}

Related sample: Header and footer spans