Vue Data GridColumn Sizing

Version 36.2.0

Columns can be resized by dragging the right edge of the column header or by using the keyboard.

Sizing Copy Link

Column resizing is enabled by default for all columns. To control resizing for individual columns, set the boolean resizable property in the column definitions.

The snippet below allows all columns except Address to be resized.

<ag-grid-vue
    :columnDefs="columnDefs"
    /* other grid options ... */>
</ag-grid-vue>

this.columnDefs = [
    { field: 'name' },
    { field: 'age' },
    { field: 'address', resizable: false },
];

The snippet below shows how to only allow the Address column to be resized by setting resizable=false on the default column definition and then resizable=true on the Address column.

<ag-grid-vue
    :defaultColDef="defaultColDef"
    :columnDefs="columnDefs"
    /* other grid options ... */>
</ag-grid-vue>

this.defaultColDef = {
    resizable: false,
};
this.columnDefs = [
    { field: 'name' },
    { field: 'age' },
    { field: 'address', resizable: true },
];

Column Flex Copy Link

It's often required that one or more columns fill the entire available space in the grid. For this scenario, it is possible to use the flex config. Some columns could be set with a regular width config, while other columns would have a flex config.

Flex sizing works by dividing the remaining space in the grid among all flex columns in proportion to their flex value. For example, suppose the grid has a total width of 450px and it has three columns: the first with width: 150; the second with flex: 1; and third with flex: 2. The first column will be 150px wide, leaving 300px remaining. The column with flex: 2 has twice the size with flex: 1. So final sizes will be: 150px, 100px, 200px.

If a column has no width or flex properties set, it will default to 200px.

The flex config does not work with a width config in the same column. If you need to provide a minimum width for a column, you should use flex and the minWidth config. Flex will also take maxWidth into account.

If you manually resize a column with flex either via the API or by dragging the resize handle, flex will automatically be disabled for that column.

The example below shows flex in action. Things to note are as follows:

Column A is fixed size. You can resize it with the drag handle and the other two columns will adjust to fill the available space
Column B has flex: 2, minWidth: 200 and maxWidth: 350, so it should be constrained to this max/min width.
Column C has flex: 1 so should be half the size of column B, unless column B is being constrained by its minWidth/maxWidth rules, in which case it should take up the remaining available space.

main.ts

import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  ColSpanParams,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([ClientSideRowModelModule]);

const colSpan = function (params: ColSpanParams) {
  return params.data === 2 ? 3 : 1;
};

function fillAllCellsWithWidthMeasurement() {
  Array.prototype.slice
    .call(document.querySelectorAll(".ag-cell"))
    .forEach((cell) => {
      const width = cell.offsetWidth;
      const isFullWidthRow = cell.parentElement.childNodes.length === 1;
      cell.textContent = (isFullWidthRow ? "Total width: " : "") + width + "px";
    });
}

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :rowData="rowData"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const columnDefs = ref<(ColDef | ColGroupDef)[]>([
      {
        headerName: "A",
        colId: "a",
        width: 300,
        colSpan: colSpan,
      },
      {
        headerName: "Flexed Columns",
        children: [
          {
            headerName: "B",
            colId: "b",
            minWidth: 200,
            maxWidth: 350,
            flex: 2,
          },
          {
            headerName: "C",
            colId: "c",
            flex: 1,
          },
        ],
      },
    ]);
    const rowData = ref<any[] | null>([1, 2]);

    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      setInterval(fillAllCellsWithWidthMeasurement, 50);
    };

    return {
      gridApi,
      columnDefs,
      rowData,
      onGridReady,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");

Auto-Sizing Columns Copy Link

Columns can be auto-sized in two main ways:

Auto-size columns to fit grid - The columns will scale to fit the available grid width (or a provided width if desired).
Auto-size columns to fit cell contents - The columns will resize to fit their visible cell contents.

Auto-Size Columns to Fit Grid Copy Link

Columns can be resized to fit the width of the grid. The columns will scale (growing or shrinking) to fit the available width unless they have suppressSizeToFit=true. In the example below, the Athlete column will not be affected when columns are sized to fit the grid because it's setting suppressSizeToFit=true.

main.ts

import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./styles.css";
import {
  AutoSizeStrategy,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  ColumnAutoSizeModule,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
import { IOlympicData } from "./interfaces";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ColumnAutoSizeModule,
  ClientSideRowModelModule,
]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="outer-div">
      <div class="button-bar">
        <button v-on:click="sizeToFit()">Resize Columns to Fit Grid Width</button>
      </div>
      <div class="grid-wrapper">
        <ag-grid-vue
          style="width: 100%; height: 100%;"
          @grid-ready="onGridReady"
          :columnDefs="columnDefs"
          :autoSizeStrategy="autoSizeStrategy"
          :rowData="rowData"></ag-grid-vue>
        </div>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "athlete", width: 150, suppressSizeToFit: true },
      { field: "age", width: 50, maxWidth: 50 },
      { colId: "country", field: "country", maxWidth: 300 },
      { field: "year", width: 90 },
      { field: "sport", width: 110 },
      { field: "gold", width: 100 },
    ]);
    const autoSizeStrategy = ref<AutoSizeStrategy>({
      type: "fitGridWidth",
      defaultMinWidth: 100,
      columnLimits: [
        {
          colId: "country",
          minWidth: 900,
        },
      ],
    });
    const rowData = ref<IOlympicData[]>(null);

    function sizeToFit() {
      gridApi.value!.sizeColumnsToFit({
        defaultMinWidth: 100,
        columnLimits: [{ key: "country", minWidth: 900 }],
      });
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      const updateData = (data) => (rowData.value = data);

      fetch("https://www.ag-grid.com/example-assets/small-olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

    return {
      gridApi,
      columnDefs,
      autoSizeStrategy,
      rowData,
      onGridReady,
      sizeToFit,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");

styles.css

.outer-div {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.button-bar {
    margin-bottom: 1rem;
}

.grid-wrapper {
    flex: 1 1 auto;
}

Provide the grid option autoSizeStrategy to size the columns to fit when the grid is loaded. This can either be set to size to the actual grid width (type = 'fitGridWidth'), or to a fixed width that is provided (type = 'fitProvidedWidth').

<ag-grid-vue
    :autoSizeStrategy="autoSizeStrategy"
    /* other grid options ... */>
</ag-grid-vue>

this.autoSizeStrategy = {
    type: 'fitGridWidth',
    defaultMinWidth: 100,
    columnLimits: [
        {
            colId: 'country',
            minWidth: 900
        }
    ]
};

AutoSizeStrategy

Initial

Auto-size the columns when the grid is loaded. Can size to fit the grid width, fit a provided width, or fit the cell contents.

ColumnAutoSizeModule

boolean

default: false

Set to true to animate changes to column width when auto-sizing the columns.

The columns can also be sized on demand via api.sizeColumnsToFit(params).

Function

Adjusts the size of columns to fit the available horizontal space. Note: it is not recommended to call this method rapidly e.g. in response to window resize events or as the container size is animated. This can cause the scrollbar to flicker. Use column flex for smoother results. If inferring cell data types with custom column types and row data is initially empty or yet to be set, the column sizing will happen asynchronously when row data is added. To always perform this synchronously, set cellDataType = false on the default column definition.

ColumnAutoSizeModule

If you don't want a particular column to be included in the auto-resize, then set the column definition suppressSizeToFit=true. This is helpful if, for example, you want the first column to remain fixed width, but all other columns to fill the width of the table.

The grid calculates new column widths while maintaining the ratio of the column default widths. So for example if Column A has a default size twice as wide as Column B, then after the sizing is performed, Column A will still be twice the size of Column B, assuming no column min-width or max-width constraints are violated.

Column default widths, rather than current widths, are used while calculating the new widths. This ensures the result is deterministic and does not depend on any column resizing the user may have manually done.

A parameters object can be provided with minimum and maximum widths, either for all columns or for specific columns, to further restrain the column's resulting width from that function call. These widths will not exceed the column's defined minimum and maximum widths.

For example assuming a grid with three columns, the algorithm will be as follows:

scale = availableWidth / (w1 + w2 + w3)

w1 = round(w1 * scale)

w2 = round(w2 * scale)

w3 = totalGridWidth - (w1 + w2)

Assuming the grid is 1,200 pixels wide and the columns have default widths of 50, 120 and 300, then the calculation is as follows:

availableWidth = 1,198 (available width is typically smaller as the grid typically has left and right borders)

scale = 1198 / (50 + 120 + 300) = 2.54

col1 = round(50 * 2.54) = 127

col2 = round(120 * 2.54) = 306

col3 = 1198 - (127 + 306) = 765 (the last column gets any space that's left, which ensures all space is used, so no rounding issues)

Auto-Size Columns to Fit Cell Contents Copy Link

Columns can be resized to fit the contents of the cells. By default the grid will resize the column to fit the header. If you do not want the headers to be included in the auto-size calculation, set the grid property skipHeaderOnAutoSize = true, or pass skipHeader = true to the autoSizeStrategy params or the API method. If you don't want a particular column to be included in the auto-resize, then set the column definition suppressAutoSize = true. The grid also provides the scaleUpToFitGridWidth option which proportionally scales up columns to fill any empty space in the grid after autosizing them.

The example below demonstrates the use of autoSizeStrategy to size the columns by default. The example button can reapply this sizing via the API at any time. There are also controls provided to toggle on the skipHeader and scaleUpToFitGridWidth parameters. The "Athlete" column has suppressAutoSize = true.

main.ts

import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./styles.css";
import {
  AutoSizeStrategy,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  ColumnApiModule,
  ColumnAutoSizeModule,
  ColumnResizedEvent,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
import { IOlympicData } from "./interfaces";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ColumnApiModule,
  ColumnAutoSizeModule,
  ClientSideRowModelModule,
]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="outer-div">
      <div class="interaction-bar">
        <button class="resize-button" v-on:click="autoSizeAll()">Resize to Fit Cell Contents</button>
        <label>
          <input id="toggle-ignore-headers" type="checkbox">
            <span>skipHeader</span>
          </label>
          <label>
            <input id="toggle-scale-up" type="checkbox">
              <span>scaleUpToFitGridWidth</span>
            </label>
          </div>
          <div class="grid-wrapper">
            <ag-grid-vue
              style="width: 100%; height: 100%;"
              @grid-ready="onGridReady"
              :columnDefs="columnDefs"
              :autoSizeStrategy="autoSizeStrategy"
              :rowData="rowData"
              @column-resized="onColumnResized"></ag-grid-vue>
            </div>
          </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "athlete", width: 150, suppressAutoSize: true },
      {
        field: "age",
        headerName: "Age of Athlete",
        width: 90,
        minWidth: 50,
        maxWidth: 150,
      },
      { field: "country", width: 120 },
      { field: "year", width: 90 },
      { field: "date", width: 110 },
    ]);
    const autoSizeStrategy = ref<AutoSizeStrategy>({
      type: "fitCellContents",
      defaultMaxWidth: 150,
      defaultMinWidth: 80,
    });
    const rowData = ref<IOlympicData[]>(null);

    function onColumnResized(params: ColumnResizedEvent) {
      console.log(params);
    }
    function autoSizeAll() {
      const skipHeader =
        document.querySelector<HTMLInputElement>("#toggle-ignore-headers")
          ?.checked ?? false;
      const scaleUpToFitGridWidth =
        document.querySelector<HTMLInputElement>("#toggle-scale-up")?.checked ??
        false;
      gridApi.value!.autoSizeColumns({ skipHeader, scaleUpToFitGridWidth });
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      const updateData = (data) => (rowData.value = data);

      fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

    return {
      gridApi,
      columnDefs,
      autoSizeStrategy,
      rowData,
      onGridReady,
      onColumnResized,
      autoSizeAll,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");

styles.css

.outer-div {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.interaction-bar {
    margin-bottom: 1rem;
    display: flex;
    gap: 1em;
    align-items: center;
}

.resize-button {
    margin: 0px !important;
}

.grid-wrapper {
    flex: 1 1 auto;
}

Provide the grid option autoSizeStrategy with type = 'fitCellContents' to size the columns to fit their content when the first data is rendered in the grid.

<ag-grid-vue
    :autoSizeStrategy="autoSizeStrategy"
    /* other grid options ... */>
</ag-grid-vue>

this.autoSizeStrategy = {
    type: 'fitCellContents',
};

AutoSizeStrategy

Initial

Auto-size the columns when the grid is loaded. Can size to fit the grid width, fit a provided width, or fit the cell contents.

ColumnAutoSizeModule

boolean

default: false

Set to true to animate changes to column width when auto-sizing the columns.

By default the Autosize This Column and Autosize All Columns actions in the Column Menu size to cell contents without the strategy's options. Set applyToUiActions to have them reuse the strategy instead, including scaleUpToFitGridWidth, skipHeader and any column limits.

<ag-grid-vue
    :autoSizeStrategy="autoSizeStrategy"
    /* other grid options ... */>
</ag-grid-vue>

this.autoSizeStrategy = {
    type: 'fitCellContents',
    scaleUpToFitGridWidth: true,
    applyToUiActions: true
};

In the example below, narrow the columns and then run Autosize All Columns from the column menu. The columns scale back up to fill the grid, as the strategy specifies.

main.ts

import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./styles.css";
import {
  AutoSizeStrategy,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  ColumnApiModule,
  ColumnAutoSizeModule,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
import { ColumnMenuModule } from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ColumnApiModule,
  ColumnAutoSizeModule,
  ClientSideRowModelModule,
  ColumnMenuModule,
]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="outer-div">
      <div class="interaction-bar">
        <button class="narrow-button" v-on:click="narrowColumns()">Narrow Columns</button>
        <span>Then use Autosize All Columns from the column menu</span>
      </div>
      <div class="grid-wrapper">
        <ag-grid-vue
          style="width: 100%; height: 100%;"
          @grid-ready="onGridReady"
          :columnDefs="columnDefs"
          :autoSizeStrategy="autoSizeStrategy"
          :rowData="rowData"></ag-grid-vue>
        </div>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "athlete" },
      { field: "country" },
      { field: "sport" },
      { field: "year" },
      { field: "total" },
    ]);
    const autoSizeStrategy = ref<AutoSizeStrategy>({
      type: "fitCellContents",
      scaleUpToFitGridWidth: true,
      applyToUiActions: true,
    });
    const rowData = ref<IOlympicData[]>(null);

    function narrowColumns() {
      gridApi.value!.applyColumnState({
        state: ["athlete", "country", "sport", "year", "total"].map(
          (colId) => ({ colId, width: 100 }),
        ),
      });
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      const updateData = (data) => (rowData.value = data);

      fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

    return {
      gridApi,
      columnDefs,
      autoSizeStrategy,
      rowData,
      onGridReady,
      narrowColumns,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");

styles.css

.outer-div {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.interaction-bar {
    margin-bottom: 1rem;
    display: flex;
    gap: 1em;
    align-items: center;
}

.narrow-button {
    margin: 0px !important;
}

.grid-wrapper {
    flex: 1 1 auto;
}

This can also be performed on demand via the following API methods:

Function

Auto-sizes columns based on their contents. If inferring cell data types with custom column types and row data is initially empty or yet to be set, the column sizing will happen asynchronously when row data is added. To always perform this synchronously, set cellDataType = false on the default column definition.

ColumnAutoSizeModule

Function

Auto-sizes columns based on their contents. If inferring cell data types with custom column types and row data is initially empty or yet to be set, the column sizing will happen asynchronously when row data is added. To always perform this synchronously, set cellDataType = false on the default column definition.

ColumnAutoSizeModule

Column Groups are never considered when calculating the column widths.

Just like Excel, each column can also be auto-resized by double clicking the right side of the header rather than dragging it. When you do this, the grid will work out the best width to fit the contents of the cells in the column.

The grid works out the best width by considering the virtually rendered rows only. For example, if your grid has 10,000 rows, but only 50 rendered due to virtualisation of rows, then only these 50 will be considered for working out the width to display. The rendered rows are all the rows you can see on the screen through the vertical scroll plus a small buffer (default buffer size is 20). With Continuous Auto-Sizing opted into scroll-driven re-sizes, the width is worked out again from the rows rendered at each new scroll position.
The same applies across columns. Column Virtualisation renders only the columns the horizontal scroll position makes visible, so a grid of 1,000 columns may have only 10 rendered, and the grid can measure only what it renders. A one-off auto-size therefore leaves off-screen columns untouched. To size them, either set suppressColumnVirtualisation=true so every column is rendered and measured in one go, or keep virtualisation and use Continuous Auto-Sizing with scroll-driven re-sizes, which fits each column as the scroll brings it into view.
Note that Pinned Columns, the Selection Column and the Row Numbers column will not be scaled up to fill any empty space when using scaleUpToFitGridWidth.

Continuous Auto-Sizing Copy Link

By default autoSizeStrategy is applied once, when the grid first renders. Set continuous to re-apply it whenever the grid changes in a way that affects column widths.

<ag-grid-vue
    :autoSizeStrategy="autoSizeStrategy"
    /* other grid options ... */>
</ag-grid-vue>

this.autoSizeStrategy = {
    type: 'fitCellContents',
    continuous: true,
};

fitCellContents re-sizes when the row data or the displayed columns change.
fitGridWidth and fitProvidedWidth re-size when the available grid width or the displayed columns change, including changes caused by pagination or scrollbars.
Re-sizes are debounced while the grid is being resized.

The example below spreads the grid width across five columns with fitGridWidth:

Add or remove a column and the rest give up or take back space.
Add rows until a vertical scrollbar appears and the columns re-fit to the width it leaves behind.
Narrow the grid itself and the columns follow, still filling it exactly.

The example sets animateColumnResizing so each re-size transitions instead of jumping to the new widths.

main.ts

import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./styles.css";
import {
  AutoSizeStrategy,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  ColumnAutoSizeModule,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
import { IRow } from "./interfaces";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ColumnAutoSizeModule,
  ClientSideRowModelModule,
]);

const INITIAL_COLUMNS = 5;

const MIN_COLUMNS = 1;

const MAX_COLUMNS = 12;

const INITIAL_ROWS = 4;

const MIN_ROWS = 0;

const MAX_ROWS = 40;

const ROW_STEP = 8;

let columnCount = INITIAL_COLUMNS;

let rowCount = INITIAL_ROWS;

function field(index: number): string {
  return `column${index + 1}`;
}

function buildColumnDefs(count: number): ColDef<IRow>[] {
  return Array.from({ length: count }, (_, index) => ({
    field: field(index),
    headerName: `Column ${index + 1}`,
  }));
}

function buildRows(count: number): IRow[] {
  return Array.from({ length: count }, (_, rowIndex) =>
    Object.fromEntries(
      Array.from({ length: MAX_COLUMNS }, (_, columnIndex) => [
        field(columnIndex),
        `R${rowIndex + 1} C${columnIndex + 1}`,
      ]),
    ),
  );
}

function clampColumns(count: number): number {
  return Math.min(MAX_COLUMNS, Math.max(MIN_COLUMNS, count));
}

function clampRows(count: number): number {
  return Math.min(MAX_ROWS, Math.max(MIN_ROWS, count));
}

const MIN_WIDTH_PERCENT = 55;

const MAX_WIDTH_PERCENT = 100;

const WIDTH_STEP = 15;

let widthPercent = MAX_WIDTH_PERCENT;

function setGridWidth(percent: number) {
  widthPercent = Math.min(
    MAX_WIDTH_PERCENT,
    Math.max(MIN_WIDTH_PERCENT, percent),
  );
  document.querySelector<HTMLElement>("#gridSizer")!.style.width =
    `${widthPercent}%`;
}

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="outer-div">
      <div class="interaction-bar">
        <button class="add-column-button" v-on:click="addColumn()">Add Column</button>
        <button class="remove-column-button" v-on:click="removeColumn()">Remove Column</button>
        <button class="add-rows-button" v-on:click="addRows()">Add Rows</button>
        <button class="remove-rows-button" v-on:click="removeRows()">Remove Rows</button>
        <button class="narrower-button" v-on:click="narrower()">Narrower</button>
        <button class="wider-button" v-on:click="wider()">Wider</button>
      </div>
      <div id="gridSizer" class="grid-sizer">
        <ag-grid-vue
          style="width: 100%; height: 100%;"
          class="grid"
          @grid-ready="onGridReady"
          :columnDefs="columnDefs"
          :rowData="rowData"
          :autoSizeStrategy="autoSizeStrategy"
          :animateColumnResizing="true"></ag-grid-vue>
        </div>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IRow> | null>(null);
    const columnDefs = ref<ColDef[]>(buildColumnDefs(columnCount));
    const rowData = ref<IRow[] | null>(buildRows(rowCount));
    const autoSizeStrategy = ref<AutoSizeStrategy>({
      type: "fitGridWidth",
      continuous: true,
    });

    function addColumn() {
      columnCount = clampColumns(columnCount + 1);
      gridApi.value!.setGridOption("columnDefs", buildColumnDefs(columnCount));
    }
    function removeColumn() {
      columnCount = clampColumns(columnCount - 1);
      gridApi.value!.setGridOption("columnDefs", buildColumnDefs(columnCount));
    }
    function addRows() {
      rowCount = clampRows(rowCount + ROW_STEP);
      gridApi.value!.setGridOption("rowData", buildRows(rowCount));
    }
    function removeRows() {
      rowCount = clampRows(rowCount - ROW_STEP);
      gridApi.value!.setGridOption("rowData", buildRows(rowCount));
    }
    function narrower() {
      setGridWidth(widthPercent - WIDTH_STEP);
    }
    function wider() {
      setGridWidth(widthPercent + WIDTH_STEP);
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;
    };

    return {
      gridApi,
      columnDefs,
      rowData,
      autoSizeStrategy,
      onGridReady,
      addColumn,
      removeColumn,
      addRows,
      removeRows,
      narrower,
      wider,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");

styles.css

.outer-div {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.interaction-bar {
    margin-bottom: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
}

.interaction-bar button {
    margin: 0px !important;
}

.grid-sizer {
    width: 100%;
    height: 100%;
}

.grid {
    height: 320px;
}

Controlling Each Re-Size Copy Link

shouldAutoSizeColumns is called before each re-size, with the eligible columns and a reason of 'dataChanged', 'columnsChanged', 'viewportChanged' or 'gridSizeChanged'. Return false to skip that re-size. It has no effect unless continuous is true.

<ag-grid-vue
    :autoSizeStrategy="autoSizeStrategy"
    /* other grid options ... */>
</ag-grid-vue>

this.autoSizeStrategy = {
    type: 'fitCellContents',
    continuous: true,
    // re-size on new data only, so the widths hold still as the grid is resized
    shouldAutoSizeColumns: ({ reason }) => reason === 'dataChanged',
};

The callback is passed the following params:

'dataChanged' | 'columnsChanged' | 'viewportChanged' | 'gridSizeChanged'

The grid change that triggered this re-size.

Column[]

All eligible columns — those the user has not resized, and not otherwise excluded. For fitCellContents, the grid may only be able to measure the subset that is currently rendered.

GridApi

The grid api.

TContext

Application context as set on gridOptions.context.

Scrolling Copy Link

Scrolling never re-sizes columns by default, in either direction. fitCellContents can opt in: vertical scrolling brings new rows into view and horizontal scrolling brings new columns into view, and both change what there is to measure. Provide shouldAutoSizeColumns and allow the 'viewportChanged' reason.

<ag-grid-vue
    :autoSizeStrategy="autoSizeStrategy"
    /* other grid options ... */>
</ag-grid-vue>

this.autoSizeStrategy = {
    type: 'fitCellContents',
    continuous: true,
    // re-size as rows and columns scroll into view, as well as on data and column changes
    shouldAutoSizeColumns: () => true,
};

Scroll-driven re-sizes are debounced, so the columns settle once the gesture stops. fitGridWidth and fitProvidedWidth are not affected by scrolling.

The example below sizes a grouped, paginated grid of 34 columns and over 8,000 rows with fitCellContents. Scrolling right fits the remaining columns as they arrive. The medal columns at the far end are narrow, and stay narrow. The text columns hold sentences of differing lengths, so moving between pages or changing the page size visibly re-fits them to the rows now on screen.

main.ts

import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  AutoSizeStrategy,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  ColumnAutoSizeModule,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  PaginationModule,
  enableDevValidations,
} from "ag-grid-community";
import { IOlympicData } from "./interfaces";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ColumnAutoSizeModule,
  PaginationModule,
  ClientSideRowModelModule,
]);

// The text columns below are built by pairing a phrase shape with a rotating pair of fields, so that
// every generated column holds a different sentence of a different length. That variety is the point:
// with continuous auto-sizing each column tracks the longest value on the page currently in view, so
// the columns move independently as you page through the data.
const PHRASE_SHAPES: ((
  first: string,
  second: string,
  data: IOlympicData,
) => string)[] = [
  (first) => first,
  (first, second) => `${first} / ${second}`,
  (first, second, data) => `${first} — ${second}, ${data.year}`,
  (first, second) => `${first} (${second})`,
  (first, second, data) => `${first} of ${second}, ${data.total} medal(s)`,
  (first, second, data) =>
    `${first} competing in ${second} at the ${data.year} games`,
];

const PHRASE_FIELDS: (keyof IOlympicData)[] = [
  "athlete",
  "country",
  "sport",
  "date",
];

const GENERATED_GROUPS = ["Profile", "Season", "Coverage", "Records"];

const COLUMNS_PER_GENERATED_GROUP = 6;

function generatedColumn(index: number): ColDef<IOlympicData> {
  // The shape cycles fastest and the field pair advances only once the shapes have been exhausted,
  // so the two never come back into step: all 6 x 4 combinations are used before any repeats.
  const shape = PHRASE_SHAPES[index % PHRASE_SHAPES.length];
  const fieldIndex =
    Math.floor(index / PHRASE_SHAPES.length) % PHRASE_FIELDS.length;
  const first = PHRASE_FIELDS[fieldIndex];
  const second = PHRASE_FIELDS[(fieldIndex + 1) % PHRASE_FIELDS.length];
  return {
    colId: `text${index + 1}`,
    headerName: `Text ${index + 1}`,
    valueGetter: ({ data }) =>
      data ? shape(String(data[first]), String(data[second]), data) : "",
  };
}

const generatedGroups: ColGroupDef<IOlympicData>[] = GENERATED_GROUPS.map(
  (headerName, groupIndex) => ({
    headerName,
    children: Array.from(
      { length: COLUMNS_PER_GENERATED_GROUP },
      (_, childIndex) =>
        generatedColumn(groupIndex * COLUMNS_PER_GENERATED_GROUP + childIndex),
    ),
  }),
);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :pagination="true"
      :paginationPageSize="paginationPageSize"
      :paginationPageSizeSelector="paginationPageSizeSelector"
      :autoSizeStrategy="autoSizeStrategy"
      :rowData="rowData"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<(ColDef | ColGroupDef)[]>([
      {
        headerName: "Competitor",
        children: [
          { field: "athlete" },
          { field: "age" },
          { field: "country" },
        ],
      },
      ...generatedGroups,
      {
        headerName: "Event",
        children: [{ field: "sport" }, { field: "year" }, { field: "date" }],
      },
      {
        headerName: "Medals",
        children: [
          { field: "gold" },
          { field: "silver" },
          { field: "bronze" },
          { field: "total" },
        ],
      },
    ]);
    const paginationPageSize = ref(20);
    const paginationPageSizeSelector = ref<number[] | boolean>([20, 50, 100]);
    const autoSizeStrategy = ref<AutoSizeStrategy>({
      type: "fitCellContents",
      continuous: true,
      shouldAutoSizeColumns: () => true,
    });
    const rowData = ref<IOlympicData[]>(null);

    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      const updateData = (data) => (rowData.value = data);

      fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

    return {
      gridApi,
      columnDefs,
      paginationPageSize,
      paginationPageSizeSelector,
      autoSizeStrategy,
      rowData,
      onGridReady,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");

Column Width Ownership Copy Link

Continuous sizing never changes the width of a column the user has sized themselves. A column becomes theirs through a header drag resize, a keyboard resize or a double-click auto-size, and through applyColumnState with an explicit width. Their width is then treated as fixed, so the width-distribution strategies hold the column out of the distribution and share the remaining space between the rest.

width and initialWidth in a column definition are both only starting widths: the grid may re-size either of them. To hold a column at a fixed width, set suppressAutoSize for fitCellContents or suppressSizeToFit for the width-distribution strategies.

Also excluded are flex columns and the special Selection and Row Numbers columns.

When scaleUpToFitGridWidth is also set, only the eligible columns are scaled, and the grid shows a horizontal scrollbar when the fixed widths alone cannot fit.

Ownership is released by api.resetColumnState(), which returns every column to its column definition and so makes the user-sized ones eligible again. Note that it also resets sort, order, visibility and pivot state.

In the example below

"Athlete" column sets suppressAutoSize, so it does not re-size
Press "Next Values" to load values of a different length.
Manually re-size the "Sport" column and note how it keeps the width you gave it while changing the values.
Click "Reset Column State" to have the "Sport" column auto size again.

main.ts

import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./styles.css";
import {
  AutoSizeStrategy,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  ColumnApiModule,
  ColumnAutoSizeModule,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ColumnApiModule,
  ColumnAutoSizeModule,
  ClientSideRowModelModule,
]);

interface IRow {
  athlete: string;
  country: string;
  sport: string;
}

const ROW_DATA_SETS: IRow[][] = [
  [
    { athlete: "Michael Phelps", country: "US", sport: "Swimming" },
    { athlete: "Natalie Coughlin", country: "US", sport: "Swimming" },
    { athlete: "Aleksey Nemov", country: "RU", sport: "Gymnastics" },
  ],
  [
    {
      athlete: "Michael Fred Phelps II, the most decorated Olympian",
      country: "United States of America",
      sport: "Swimming, Individual Medley and Butterfly",
    },
    {
      athlete: "Natalie Anne Coughlin Hall, twelve-time medallist",
      country: "United States of America",
      sport: "Swimming, Backstroke and Freestyle",
    },
    {
      athlete: "Aleksey Yuryevich Nemov, twelve-time medallist",
      country: "Russian Federation",
      sport: "Artistic Gymnastics, All-Around",
    },
  ],
  [
    { athlete: "Ian Thorpe", country: "Australia", sport: "Swimming" },
    {
      athlete: "Marit Bjoergen",
      country: "Norway",
      sport: "Cross Country Skiing",
    },
    { athlete: "Ole Einar Bjoerndalen", country: "Norway", sport: "Biathlon" },
  ],
  [
    { athlete: "Sun Yang", country: "China", sport: "Swimming" },
    {
      athlete: "Kohei Uchimura",
      country: "Japan",
      sport: "Artistic Gymnastics",
    },
    { athlete: "Yohan Blake", country: "Jamaica", sport: "Athletics" },
  ],
];

let dataSetIndex = 0;

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="outer-div">
      <div class="interaction-bar">
        <button class="next-values-button" v-on:click="nextValues()">Next Values</button>
        <button class="release-widths-button" v-on:click="releaseWidths()">Reset Column State</button>
      </div>
      <div class="grid-wrapper">
        <ag-grid-vue
          style="width: 100%; height: 100%;"
          @grid-ready="onGridReady"
          :columnDefs="columnDefs"
          :rowData="rowData"
          :autoSizeStrategy="autoSizeStrategy"></ag-grid-vue>
        </div>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IRow> | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "athlete", width: 150, suppressAutoSize: true },
      { field: "country", initialWidth: 120 },
      { field: "sport" },
    ]);
    const rowData = ref<IRow[] | null>(ROW_DATA_SETS[0]);
    const autoSizeStrategy = ref<AutoSizeStrategy>({
      type: "fitCellContents",
      continuous: true,
    });

    function nextValues() {
      dataSetIndex = (dataSetIndex + 1) % ROW_DATA_SETS.length;
      gridApi.value!.setGridOption("rowData", ROW_DATA_SETS[dataSetIndex]);
    }
    function releaseWidths() {
      gridApi.value!.resetColumnState();
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;
    };

    return {
      gridApi,
      columnDefs,
      rowData,
      autoSizeStrategy,
      onGridReady,
      nextValues,
      releaseWidths,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");

styles.css

.outer-div {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.interaction-bar {
    margin-bottom: 1rem;
    display: flex;
    gap: 0.5em;
}

.interaction-bar button {
    margin: 0px !important;
}

.grid-wrapper {
    flex: 1 1 auto;
}

Two limits apply to continuous fitCellContents:

It is subject to the same virtualisation limits as a one-off auto-size: only the rendered cells can be measured, so columns are sized progressively as scrolling renders more content.
It is not supported by the Viewport Row Model, where the grid logs a warning and ignores the option.

Resize via Keyboard Copy Link

Column headers can be resized using the keyboard. When a column header is focused, press ⌥ Alt + ← / → to resize the column in that direction.

See Column Header Navigation for a full list of header keyboard interactions.

Shift Resizing Copy Link

If you hold the ⇧ Shift key while dragging the resize handle, the column will take space away from the column adjacent to it. This means the total width for all columns will be constant.

You can also change the default behaviour for resizing. Set the grid property colResizeDefault='shift' to have shift resizing as the default and normal resizing to happen when the ⇧ Shift key is pressed.

In the example below, note the following:

Grid property colResizeDefault='shift' so default column resizing will behave as if ⇧ Shift key is pressed.
Holding down ⇧ Shift will then resize the normal default way.

main.ts

import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
import { IOlympicData } from "./interfaces";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([ClientSideRowModelModule]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :colResizeDefault="colResizeDefault"
      :rowData="rowData"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "athlete", width: 150 },
      { field: "age", width: 90 },
      { field: "country", width: 150 },
      { field: "year", width: 90 },
      { field: "date", width: 110 },
      { field: "sport", width: 150 },
      { field: "gold", width: 100 },
      { field: "silver", width: 100 },
      { field: "bronze", width: 100 },
      { field: "total", width: 100 },
    ]);
    const colResizeDefault = ref<"shift">("shift");
    const rowData = ref<IOlympicData[]>(null);

    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      const updateData = (data) => (rowData.value = data);

      fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

    return {
      gridApi,
      columnDefs,
      colResizeDefault,
      rowData,
      onGridReady,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");

Resizing Groups Copy Link

When you resize a group, it will distribute the extra room to all columns in the group equally. In the example below the groups can be resized as follows:

The group 'Everything Resizes' will resize all columns.
The group 'Only Year Resizes' will resize only year, because the other columns have resizable=false.
The group 'Nothing Resizes' cannot be resized at all because all the columns in the groups have resizable=false.

main.ts

import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./styles.css";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
import { IOlympicData } from "./interfaces";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([ClientSideRowModelModule]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="example-wrapper">
      <div class="legend-bar">
        <span class="legend-box resizable-header"></span> Resizable Column &nbsp;&nbsp;&nbsp;&nbsp;
        <span class="legend-box fixed-size-header"></span> Fixed Width Column
      </div>
      <ag-grid-vue
        style="width: 100%; height: 100%;"
        @grid-ready="onGridReady"
        :columnDefs="columnDefs"
        :defaultColDef="defaultColDef"
        :rowData="rowData"></ag-grid-vue>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<(ColDef | ColGroupDef)[]>([
      {
        headerName: "Everything Resizes",
        children: [
          {
            field: "athlete",
            headerClass: "resizable-header",
          },
          { field: "age", headerClass: "resizable-header" },
          {
            field: "country",
            headerClass: "resizable-header",
          },
        ],
      },
      {
        headerName: "Only Year Resizes",
        children: [
          { field: "year", headerClass: "resizable-header" },
          {
            field: "date",
            resizable: false,
            headerClass: "fixed-size-header",
          },
          {
            field: "sport",
            resizable: false,
            headerClass: "fixed-size-header",
          },
        ],
      },
      {
        headerName: "Nothing Resizes",
        children: [
          {
            field: "gold",
            resizable: false,
            headerClass: "fixed-size-header",
          },
          {
            field: "silver",
            resizable: false,
            headerClass: "fixed-size-header",
          },
          {
            field: "bronze",
            resizable: false,
            headerClass: "fixed-size-header",
          },
          {
            field: "total",
            resizable: false,
            headerClass: "fixed-size-header",
          },
        ],
      },
    ]);
    const defaultColDef = ref<ColDef>({
      width: 150,
    });
    const rowData = ref<IOlympicData[]>(null);

    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      const updateData = (data) => (rowData.value = data);

      fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      rowData,
      onGridReady,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");

styles.css

.example-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#myGrid {
    flex: 1 1 0px;
    width: 100%;
}

.fixed-size-header {
    background-color: #cc222244;
}

.resizable-header {
    background-color: #33cc3344;
}

.legend-box {
    display: inline-block;
    border: 1px solid #aaa;
    height: 15px;
    width: 15px;
    vertical-align: text-top;
}

.legend-bar {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 13px;
    margin-bottom: 1rem;
}

Getting Started

AI Features

Layout & Styling

Charting

Core Features

Advanced Features

Vue Data GridColumn Sizing

Sizing Copy Link

Column Flex Copy Link

Auto-Sizing Columns Copy Link

Auto-Size Columns to Fit Grid Copy Link

Auto-Size Columns to Fit Cell Contents Copy Link

Continuous Auto-Sizing Copy Link

Controlling Each Re-Size Copy Link

Scrolling Copy Link

Column Width Ownership Copy Link

Resize via Keyboard Copy Link

Shift Resizing Copy Link

Resizing Groups Copy Link