Skip to main content

collapse-column

Description​

Fires when collapsing/expanding a column

Usage​

"collapse-column": ({
    id: string | number,
    row?: number,
    mode?: boolean,
}) => boolean|void;

Parameters​

The callback of the action takes an object with the following parameters:

  • id - (required) the ID of a column that is collapsed
  • row - (optional) in case a header spans multiple rows, this parameter can be used to specify the ordinal number of a header row (starting from 0) to be collapsed
  • mode - (optional) if set to true, the column state is changed to collapsed; if false, expanded. If the mode value is not set, the column collapsing will work in the toggle mode (switch from collapsed to expanded).

Returning false from the event handler will prevent collapsing/expanding columns.

Example​

The following example shows how to collapse a specific column (the first row of the "firstName" column's header) with the right-click using the api.exec() method: 

import { useRef } from 'react';
import { getData } from "./common/data";
import { Grid } from "@wx/react-grid";

const { data } = getData();

const collapsibleColumns = [
    { id: "id", width: 50, footer: { text: "All users", colspan: 7 } },
    {
        id: "firstName",
        header: [
            {
                text: "Main client info",
                colspan: 5,
                collapsible: true,
                open: true,
            },
            { text: "User", colspan: 2, collapsible: true },
            { text: "First Name" },
        ],
        width: 150,
    },
    {
        id: "lastName",
        header: ["", "", "Last Name"],
        width: 150,
    },
    {
        id: "email",
        header: ["", { text: "Email", rowspan: 2, css: "center" }],
    },
    {
        id: "companyName",
        header: [
            "",
            {
                text: "Company",
                colspan: 2,
                collapsible: true,
            },
            { text: "Name" },
        ],
    },
    {
        id: "city",
        width: 100,
        header: ["", "", "City"],
    },
    { id: "stars", header: "Stars" },
];

export default function App() {
    const api = useRef(null);

    const collapse = () => {
        api.current.exec("collapse-column", { id: "firstName", row: 1 });
    };

    return (
        <>
            <button onClick={collapse} >Collapse</button>
            <Grid data={data} columns={collapsibleColumns} api={api} />
        </>
    );
}

Related articles: