Skip to main content

api.exec()

Description​

Allows triggering the Grid actions

Usage​

api.exec(
    action: string,
    config: object
): void;

Parameters​

  • action - (required) an action to be fired
  • config - (required) the config object with parameters (see the action to be fired)

Actions​

info

The full list of actions can be found here

Example​

The example below shows how to enable autoresizing of columns so that they automatically adjust to content:

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

const { data } = getData();

const columns = [
    { id: "id", width: 50 },
    { id: "firstName", header: "First Name" },
    { id: "lastName", header: "Last Name" },
    { id: "email", header: "Email", editor: "text" },
    {
        id: "companyName",
        header: "Company - long column name could be here",
        editor: "text",
    },
];

const App = () => {
    const apiRef = useRef(null);

    const init = (api) => {
        // initialize to get the table with the calculated sizes
        api.exec("resize-column", { id: "email", auto: "header" });
        api.exec("resize-column", {
            id: "companyName",
            auto: "header",
            maxRows: 20,
        });
    };

    const resizeColumns = () => {
        if (!apiRef.current) return;
        apiRef.current.exec("resize-column", { id: "email", auto: "header" });
        apiRef.current.exec("resize-column", {
            id: "companyName",
            auto: "header",
            maxRows: 20,
        });
    };

    return (
        <div style={{ padding: 20 }}>
            <h4>Email and Company columns adjusted to header.</h4>
            <Grid
                data={data}
                columns={columns}
                ref={apiRef}
                init={init}
                onUpdateCell={resizeColumns}
            />
        </div>
    );
};

export default App;

Related articles: