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: