DataTable Columns can be resized using drag drop by setting the resizableColumns to true. There are two resize modes; "fit" and "expand". Fit is the default one and the overall table width does not change when a column is resized. In "expand" mode, table width also changes along with the column width. onColumnResize is a callback that passes the resized column header as a parameter.

Fit Mode

Expand Mode


export class DataTableColResizeDemo implements OnInit {

    cars: Car[];

    cols: Column[];

    constructor(private carService: CarService) { }

    ngOnInit() {
        this.carService.getCarsSmall().then(cars => this.cars = cars);

        this.cols = [
            {field: 'vin', header: 'Vin'},
            {field: 'brand', header: 'Brand'},
            {field: 'year', header: 'Year'},
            {field: 'color', header: 'Color'}
        ];
    }
}


<h3 class="first">Fit Mode</h3>
<p-dataTable [value]="cars" [columns]="cols" resizableColumns="true"></p-dataTable>

<h3>Expand Mode</h3>
<p-dataTable [value]="cars" [columns]="cols" resizableColumns="true" columnResizeMode="expand"></p-dataTable>