Resizing, reordering, and toggling columns in DataTable
By default, all the columns of the component are in static representation without interaction. The component provides resizing, reordering, and toggling features for columns.
Resizing
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"><...