<
div
style
=
"text-align: center"
>
<
h2
style
=
"color: green"
>GeeksforGeeks</
h2
>
<
h4
>Angular PrimeNG Table Horizontal Scrolling</
h4
>
<
p-table
[value]="cars"
[scrollable]="true"
scrollDirection
=
"horizontal"
>
<
ng-template
pTemplate
=
"header"
>
<
tr
>
<
th
style
=
"width: 300px"
>Car</
th
>
<
th
style
=
"width: 300px"
>Company</
th
>
<
th
style
=
"width: 300px"
>Vehicle Number</
th
>
<
th
style
=
"width: 300px"
>Manufactured year</
th
>
<
th
style
=
"width: 300px"
>KM Driven</
th
>
<
th
style
=
"width: 300px"
>Price</
th
>
<
th
style
=
"width: 300px"
>Rating</
th
>
</
tr
>
</
ng-template
>
<
ng-template
pTemplate
=
"body"
let-car>
<
tr
[ngClass]="{ 'even-row' : car.id %2 == 0}">
<
td
style
=
"width: 300px"
>{{car.name}}</
td
>
<
td
style
=
"width: 300px"
>{{car.company}}</
td
>
<
td
style
=
"width: 300px"
>{{car.number}}</
td
>
<
td
style
=
"width: 300px"
>{{car.manufacturedYear}}</
td
>
<
td
style
=
"width: 300px"
>{{car.kmDriven}}</
td
>
<
td
style
=
"width: 300px"
>{{car.price}}</
td
>
<
td
style
=
"width: 300px"
>{{car.rating}}</
td
>
</
tr
>
</
ng-template
>
</
p-table
>
</
div
>