Breaking News: Grepper is joining You.com. Read the official announcement!

angular primeng table example

Coders Expo answered on August 9, 2023 Popularity 8/10 Helpfulness 2/10

answer angular primeng table example

angular primeng table example

Comment

1. Install the necessary dependencies:
npm install primeicons primeng --save
2. Import the TableModule in your app.module.ts file:
import { TableModule } from 'primeng/table';
@NgModule({
  imports: [TableModule],
  // ...
})
3. Use the p-table component in your component's template:
<p-table [value]="cars">
  <ng-template pTemplate="header">
    <tr>
      <th>Car</th>
      <th>Year</th>
      <th>Brand</th>
      <th>Color</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-car>
    <tr>
      <td>{{ car.car }}</td>
      <td>{{ car.year }}</td>
      <td>{{ car.brand }}</td>
      <td>{{ car.color }}</td>
    </tr>
  </ng-template>
</p-table>
4. In your component's class, define the cars array:
export class AppComponent {
  cars = [
    { car: 'Corvette', year: 1963, brand: 'Chevrolet', color: 'Red' },
    { car: 'Mustang', year: 1965, brand: 'Ford', color: 'Blue' },
    { car: 'Challenger', year: 1970, brand: 'Dodge', color: 'Green' },
    { car: 'Camaro', year: 1969, brand: 'Chevrolet', color: 'Orange' }
  ];
}

This will create a basic table that displays the car, year, brand, and color 
properties for each object in the cars array. You can customize the table 
further by using additional PrimeNG features, such as sorting, filtering, 
and pagination.

Popularity 8/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: angular javascript primeng-table

Link to this answer
Share Copy Link

Contributed on Aug 09 2023

Coders Expo

0 Answers Avg Quality 2/10

angular primeng table example

Contents

More Related Answers

angular primeng table example

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.