api.exec()
Description
Allows triggering the Grid actionsUsage
api.exec(
action: string,
config: object
): void;
Parameters
action
- (required) an action to be firedconfig
- (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: