DataTable displays data in a tabular format. The table is an arrangement of data in rows and columns, or possibly in a more complex structure. It requires a value as an array of objects bound through the value property and columns defined with the p-column component. A basic example of the component with browser details to display in the list format would be written as follows:

<p-dataTable [value]="browsers">
  <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 browsers array consists of objects with engine, browser, platform, and grade properties. The field property will map the model object property, whereas the header property is used to display a column's heading. In real-time applications, we use services to fetch the data from remote data sources. In this case, service is created as an injectable service and it uses the HTTP module to fetch data. The browser service would be defined with observables as shown here:

@Injectable()
export class BrowserService {

constructor(private http: Http) { }

getBrowsers(): Observable<Browser[]> {
  return this.http.get('/assets/data/browsers.json')
    .map(response => response.json().data as Browser[]);
  }
}

The component class has to define an array of browser objects (or items) for the value property. The items are retrieved from the remote service call as shown here:

browsers: Browser[];

constructor(private browserService: BrowserService) { }

ngOnInit() {
  this.browserService.getBrowsers().subscribe((browsers: any) 
    => this.browsers =  browsers);
}

The following screenshot shows a snapshot result presented in a tabular format:

In the preceding snapshot, we can observe alternative colors for the rows. This is a theme-specific behavior.

PrimeNG 4.1 handles the change detection feature in a more flexible manner.