Skip to main content

set-columns

Description​

Fires when the set of grid columns changes

The set of columns may change while resizing or hiding.

Usage​

"set-columns": ({
   columns: Column[],
}) => boolean | void;
info

For handling the actions you can use the Event Bus methods

Parameters​

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

  • columns - (required) the updated array of column configuration objects; the structure is the same as the columns property

Example​

Use api.on() to react when the user resizes or hides a column:

<script setup>
  import { getData } from "./common/data";
  import { Gantt } from "@svar-ui/vue-gantt";

  const { tasks, scales } = getData();

  function init(api) {
    api.on("set-columns", ev => {
      console.log("Columns updated:", ev.columns);
    });
  }
</script>

<template>
  <Gantt :tasks="tasks" :scales="scales" :init="init" />
</template>

Related articles: