Grid Column Resizing

With deferred column resizing, the user will see a temporary resize indicator while the drag operation is in effect. The new column size is only put into its place once the drag operation has ended.

Grid Column Resizing Demo


Column resizing is also enabled per-column level, meaning that the igx-grid can have a mix of resizable and non-resizable columns. This is done via the resizable input of the igx-column.

<igx-column [field]="'ID'" width="100px" [resizable]="true"></igx-column>
<igx-column [field]="'CompanyName'" width="100px" [resizable]="true"></igx-column>

You can subscribe to the onColumnResized event of the igx-grid to implement some custom logic when a column is resized. Both, previous and new column widths, as well as the IgxColumnComponent object, are exposed through the event arguments.

<igx-grid [data]="data" (onColumnResized)="onResize($event)" [autoGenerate]="false">
    <igx-column [field]="'ID'" width="100px" [resizable]="true"></igx-column>
    <igx-column [field]="'CompanyName'" width="100px" [resizable]="true"></igx-column>
</igx-grid>
public onResize(event) {
    this.col = event.column;
    this.pWidth = event.prevWidth;
    this.nWidth = event.newWidth;
}

Restrict column resizing

You can also configure the minimum and maximum allowable column widths. This is done via the minWidth and maxWidth inputs of the igx-column. In this case the resize indicator drag operation is restricted to notify the user that the column cannot be resized outside the bounderies defined by minWidth and maxWidth.

<igx-column [field]="'ContactName'" width="100px" [resizable]="true"
            [minWidth]="'60px'" [maxWidth]="'230px'"></igx-column>
Note

Resizing a column below 88px is not possible, even when minWidth is set to a value less than that.

Auto-size columns on double click

Each column can be auto sized by double clicking the right side of the header - the column will be sized to the longest currently visible cell value, including the header itself. This behavior is enabled by default, no additional configuration is needed. However, the column will not be autosized in case maxWidth is set on that column and the new width exceeds that maxWidth value. In this case the column will be sized acccording to preset maxWidth value.

You can also autosize a column dynamically using the exposed autosize() method on IgxColumnComponent.

@ViewChild('grid') grid: IgxGridComponent;

let column = this.grid.columnList.filter(c => c.field === 'ID')[0];
column.autosize();

Pinned columns resizing

Pinned columns can also be resized. However, resizing is limited so that the overall width of the pinned columns container cannot become larger than 80% of the overall grid width. Again, if you try to autosize a pinned column and the new width will cause the pinned columns container to exceed those 80% of the overall grid with, autosizing will be discarded. We just want to make sure that the unpinned columns are always visible and availble to the user!

API References

Additional Resources

Our community is active and always welcoming to new ideas.

View page on GitHub