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:

<script setup>
    import { ref } from "vue";
    import { Grid } from "@svar-ui/vue-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 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 api = ref(null);
    const resizeColumns = () => {
        api.value.exec("resize-column", { id: "email", auto: "header" });
        api.value.exec("resize-column", {
            id: "companyName",
            auto: "header",
            maxRows: 20,
        });
    };

</script>

<template>
    <div style="padding: 20px;">
        <h4>Email and Company columns adjusted to header.</h4>
        <Grid
            :data="data"
            :columns="columns"
            ref="api"
            :init="init"
            :onupdatecell="resizeColumns" />
    </div>
</template>

Related articles: