Creating collapsible columns

To create a column that will expand/collapse, set the collapsible parameter of the columns property to true. To make the initial column state expanded, set the open value to true.

Example:

let data = getData().data;

const columns = [
    { 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, open: true },
            { text: "First Name" },
        ],
        width: 150,
    },
];

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

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