Advanced User Interface Controls and Components

Auto Size Columns to Fit Angular Grid Width

Created: 20 February 2018

When there are few columns in Angular Grid, there may be an empty space on the right side. By changing the column width (either from code or by resizing), you can fill the available grid space. However, if you want to have a Grid where columns are auto sized to fill the grid width so that there is no empty space, a better way is to set this initially. This is handled by a property that determines the way columns are resized.

Grid component is part of IntegralUI Web
a suite of UI Components for development of web apps

If you have any questions, don't hesitate to contact us at

As you can see in above sample, columns occupy the grid width in full. The horizontal scrollbar will remain hidden, and whenever a column resizes, it changes its width and the width of neighboring column.

How to Auto Size Columns to Fit Available Grid Width

In general, auto size of columns is disabled. This means, that whenever column width changes, if the total width of all columns exceeds the grid width, a horizontal scrollbar will appear. This is good when grid has many columns. However, in cases when you have few columns it is better to set for columns to fit the grid width automatically.

By setting the autoSizeColumns property to true, the grid layout will automatically update its layout based on column width settings, and if there is available space, it will adjust the width of each column, so that they all fit in place. In there are multiple columns and their total width is greater than the grid width, each column width will be reduced accordingly.

<iui-grid [autoSizeColumns]="true" [columns]="columns" [rows]="rows" [controlStyle]="gridStyle" [showFooter]="false" [rowHeight]="26" #grid>
    <ng-template let-column [iuiTemplate]="{ type: 'header' }">
        <span *ngIf="" class="grid-atsc-cell-checkbox" [ngClass]="{ 'grid-atsc-cell-checkbox-true': column.value }" (mousedown)="columnCheckClicked($event, column)"></span>
    <ng-template let-cell [iuiTemplate]="{ type: 'cell' }">
        <span [ngSwitch]="cell.cid">
            <span *ngSwitchCase="2"> <!-- TITLE -->
                <span class="grid-atsc-cell-label">{{cell.text}}</span>
            <div *ngSwitchCase="1">
                <span class="grid-atsc-cell-checkbox" [ngClass]="{ 'grid-atsc-cell-checkbox-true': cell.value }" (mousedown)="checkBoxClicked(cell)"></span>
            <span *ngSwitchCase="4"> <!-- GENRE -->
                <span class="grid-atsc-icons {{cell.icon}}"></span>
            <span *ngSwitchCase="5"> <!-- RATING -->
                <img class="grid-atsc-cell-rating" src="{{getCellRating(cell)}}" />
            <span *ngSwitchDefault>
                <span class="grid-atsc-cell-label">{{cell.text}}</span>

When this mode is active, column resizing also works in different way. Now when column resizes, it changes its width also the width of its neighboring column. This prevents appearance of the horizontal scrollbar.

Grid Columns with Fixed, Minimal and Maximum Width

Some columns are better to have a fixed width, or to resize only in specific range. For this purpose, you can use the following fields of column object:

  • allowResize - (true or false) determines whether column can resize during run-time
  • fixedWidth - (true or false) determines whether the column width is fixed or not
  • minWidth - (number) specifies the lowest width the column can have
  • maxWidth - (number) specifies the highest width the column can have

Using above fields, you can set the way column resizes during run-time, on individual level.

    this.columns = [
        { id: 2, headerText: "Title", width: 350, allowResize: false },
        { id: 3, headerText: "Year", headerAlignment: "center", contentAlignment: "center", width: 70 },
        { id: 1, groupText: "True/False", contentAlignment: 'center', width: 30, fixedWidth: true },
        { id: 4, headerText: "Genre", headerAlignment: "center", contentAlignment: "center", width: 50, visible: false },
        { id: 5, headerText: "Ratings", headerAlignment: "center", contentAlignment: "center", width: 120, minWidth: 90 },
        { id: 6, headerText: "Released", allowGrouping: false, headerAlignment: "center", contentAlignment: "center", width: 130 }

From above demo, you can see that column with check boxes has a fixed width. When mouse cursor is moved over this column header, the resize cursor will never appear. In addition, when next column is resizing, it will change the width of the previous or next column in line, skipping the checkbox column.

The 'Ratings' has minimum width set to 90, which means that it can't resize past that value.


In cases when you have a Grid with few columns, it is better to make them appear so that there is no empty space. IntegralUI Grid for Angular comes with built-in feature that auto size columns so that they all fit in available space of the grid. In addition, there are few options to choose from on how column will resize during run-time or whether column width is fixed or not.

The Grid component is part of IntegralUI Web.

Did you Like this Article?

Enter your e-mail address below and you will receive latest articles as well as news on upcoming events and special offers.