import { Component } from '@angular/core' ;
interface People {
firstname?: string;
lastname?: string;
age?: string;
}
@Component({
selector: 'app-root' ,
templateUrl: './app.component.html' ,
styles: [
`
:host ::ng-deep .p-datatable .p-datatable-thead > tr > th {
position: -webkit-sticky;
position: sticky;
top: 0px;
}
@media screen and (max-width: 64em) {
:host ::ng-deep .p-datatable .p-datatable-thead > tr > th {
top: 0px;
}
}
`,
],
})
export class AppComponent {
tableData: People[] = [];
cols: any[] = [];
constructor() { }
ngOnInit() {
this .cols = [
{ field: 'firstname' , header: 'First Name' },
{ field: 'lastname' , header: 'Last Name' },
{ field: 'age' , header: 'Age' },
];
this .tableData = [
{
firstname: 'David' ,
lastname: 'ace' ,
age: '40' ,
},
{
firstname: 'AJne' ,
lastname: 'west' ,
age: '40' ,
},
{
firstname: 'Mak' ,
lastname: 'Lame' ,
age: '40' ,
},
{
firstname: 'Peter' ,
lastname: 'raw' ,
age: '40' ,
},
{
firstname: 'Kane' ,
lastname: 'James' ,
age: '40' ,
},
{
firstname: 'Peter' ,
lastname: 'raw' ,
age: '40' ,
},
{
firstname: 'Kane' ,
lastname: 'James' ,
age: '40' ,
},
{
firstname: 'Peter' ,
lastname: 'raw' ,
age: '40' ,
},
{
firstname: 'Kane' ,
lastname: 'James' ,
age: '40' ,
},
{
firstname: 'Peter' ,
lastname: 'raw' ,
age: '40' ,
},
{
firstname: 'Kane' ,
lastname: 'James' ,
age: '40' ,
},
{
firstname: 'Peter' ,
lastname: 'raw' ,
age: '40' ,
},
{
firstname: 'Kane' ,
lastname: 'James' ,
age: '40' ,
},
{
firstname: 'Peter' ,
lastname: 'raw' ,
age: '40' ,
},
{
firstname: 'Kane' ,
lastname: 'James' ,
age: '40' ,
},
{
firstname: 'Peter' ,
lastname: 'raw' ,
age: '40' ,
},
{
firstname: 'Kane' ,
lastname: 'James' ,
age: '40' ,
},
];
}
}
|