Resizing

Enabling column/header autoresizing

To make the table automatically adjust to its content or header, call the resize-column action by applying the api.exec() method and set the auto parameter to header, data or true (to adjust to both header and data).

In the example below:

• the Last Name column is adjusted to header
• the Email column is adjusted to data
• the Company column is adjusted to data and header

Example:

<script setup>
    import { Grid } from "@svar-ui/vue-grid";
    import { ref } from "vue";

    import { getData } from "./common/data";
    const { data } = getData();

    const columns = [
        { id: "id", width: 50 },
        { id: "firstName", header: "First Name" },
        { id: "lastName", header: "Last Name", editor: "text" },
        { id: "email", header: "Email", editor: "text" },
        {
            id: "companyName",
            header: "Company - long column name could be here",
            editor: "text",
        },
    ];

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

    const api = ref();
    const resizeColumns = () => {
        api.value.exec("resize-column", { id: "email", auto: "data" });
        api.value.exec("resize-column", { id: "lastName", auto: "header" });
        api.value.exec("resize-column", {
            id: "companyName",
            auto: true,
            maxRows: 20,
        });
    };
</script>

<template>
  <Grid 
   :data="data"
   :columns="columns"
   ref="api"
   :init="init"
   :onupdatecell="resizeColumns" />
</template>

Creating resizable columns

To make a column resizable by dragging the border in the header cell, set the resize parameter of the columns property to true.

Example:

<script setup>
  import { Grid } from "@svar-ui/vue-grid";
  import { getData } from "./common/data";
  const { data } = getData();

  const columns = [
    { id: "id", width: 50, resize: true },
    { id: "city", header: "City", width: 160, resize: true },
    { id: "email", header: "Email", width: 250, resize: true },
    { id: "firstName", header: "First Name", resize: true },
    { id: "lastName", header: "Last Name", resize: true },
  ];
</script>

<template>
  <Grid :data="data" :columns="columns" />
</template>

---

Related sample: Resize columns

Related articles: How to access Grid API