Auto fit columns in Vue Grid component

16 Mar 20232 minutes to read

The autoFitColumns method resizes the column to fit the widest cell’s content without wrapping. You can autofit specific columns at initial rendering by invoking the autoFitColumns method in dataBound event.

To autofit a column, you need to inject Resize module in the provide section.

app.vue

<template>
    <div id="app">
        <ejs-grid ref='grid' :dataSource="data" :dataBound='dataBound' height='315px'>
          <e-columns>
            <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=150></e-column>
            <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
            <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=150></e-column>
            <e-column field='OrderDate' headerText='Order Date' textAlign='Right' format='yMd' type='date' width=120></e-column>
          </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Resize } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';

Vue.use(GridPlugin);

export default {
  data() {
    return {
      data: data
    };
  },
  methods: {
      dataBound: function() {
        this.$refs.grid.autoFitColumns(['OrderDate', 'CustomerID']);
    }
  },
  provide: {
      grid: [Resize]
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

You can autofit all columns, by invoking the autoFitColumns
method without column name.