Skip to main content

resize-column

Description​

Fires when resizing a column

Usage​

"resize-column": ({
    id: string | number,
    width?: number,
    auto?: boolean | "data" | "header",
    maxRows?: number,
    inProgress?: boolean,
    eventSource?: string,
    flexgrowFallback?: string | number,
}) => boolean | void;

Parameters​

The callback of the action takes an object with the following parameters:

  • id - (required) the ID of a column that is resized
  • width - (optional) the width of a column in pixels
  • auto - (optional) autoresizing with the following options:
    • true/false: enables/disables autoresizing when a column adjusts to its content
    • "data": adjusts column width to the data size
    • "header": adjusts column width to the header
  • maxRows - (optional) the number of rows that should be processed to adjust the column width (if not set) to the row cell with the longest text
  • inProgress - (optional) defines if the process of resizing is still in progress (true) or completed (false)
  • eventSource - (optional) the name of the Grid action that triggered resize-column
  • flexgrowFallback - (optional) the ID of a column that will become flexible after resizing

Returning false from the event handler will block resizing columns.

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();
    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>
        <h4>Email and Company columns adjusted to header.</h4>
        <Grid
            :data="data"
            :columns="columns"
            ref="api"
            :init="init"
            :onupdatecell="resizeColumns" />
    </div>
</template>

The example below shows how to keep a fallback flex column when resizing:

api.intercept("resize-column", (ev) => {
      ev.flexgrowFallback = otherColumnId;
});

Related articles: