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 { Grid } from "@wx/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",
    },
];

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

    const init = (api) => {
        api.exec("resize-column", { id: "email", auto: "header" });
        api.exec("resize-column", {
            id: "companyName",
            auto: "header",
            maxRows: 20,
        });
    };

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

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

Related articles: