Making DataTable responsive

The responsive feature is very useful for both web and mobile apps. The component columns are displayed as stacked in a responsive mode if the screen size is smaller than a certain breakpoint value. This feature is enabled by setting the responsive property as true. This stacked behavior can also be achieved manually (irrespective of the screen size) by enabling the stacked property (that is, stacked="true").

The responsive mode feature of the Table component would be written as follows:

 

<button pButton type="button" (click)="toggle()" 
  [class]="responsive-toggle"
  label="Toggle" icon="fa-list">
</button>
<p-dataTable [value]="browsers" [rows]="5" [paginator]="true" 
  [pageLinks]="3" [responsive]="true" [stacked]="stacked">
  <p-header>Responsive</p-header>
  <p-column field="engine" header=&quot...