Columns can be resized using drag-and-drop behavior just by setting the resizableColumns property to true. There are two types of resize modes available. One is the fit mode and the other one is the expand mode. The default one is the fit mode. In this mode, when columns are resized, the total width of the table will not be changed; whereas in the expand mode, the total width of table will be changed.
The resizing feature with the expand mode would be written as follows:
<p-dataTable [value]="basicBrowsers" resizableColumns="true"
columnResizeMode="expand">
<p-column field="engine" header="Engine"></p-column>
<p-column field="browser" header="Browser"></p-column>
<p-column field="platform" header="Platform"></p-column>
<p-column field="grade" header="Grade"></p-column>
</p-dataTable>
The following screenshot...
