import { Component, OnInit, ViewChild } from '@angular/core' ;
import { NodeService } from './nodeservice' ;
import { TreeNode } from 'primeng/api' ;
import { TreeTable } from 'primeng/treetable' ;
import { MessageService } from 'primeng/api' ;
@Component({
selector: 'app-root' ,
templateUrl: './app.component.html' ,
providers: [MessageService],
styles: [
`
:host ::ng-deep .priority-2,
:host ::ng-deep .priority-3,
:host ::ng-deep .visibility-sm {
display: none;
}
@media screen and (max-width: 39.938em) {
:host ::ng-deep .visibility-sm {
display: inline;
}
}
@media screen and (min-width: 40em) {
:host ::ng-deep .priority-2 {
display: table-cell;
}
}
@media screen and (min-width: 64em) {
:host ::ng-deep .priority-3 {
display: table-cell;
}
}
`,
],
})
export class AppComponent {
tableData: TreeNode[];
cols: any[];
constructor(private messageService: MessageService) { }
ngOnInit() {
this .cols = [
{ field: 'name' , header: 'First Name' },
{ field: 'age' , header: 'Age' },
];
this .tableData = [
{
data: {
name: 'A' ,
age: '40' ,
},
children: [
{
data: {
name: 'B' ,
age: '16' ,
},
},
{
data: {
name: 'C' ,
age: '14' ,
},
},
],
},
{
data: {
name: 'D' ,
age: '55' ,
},
children: [
{
data: {
name: 'E' ,
age: '20' ,
},
},
{
data: {
name: 'F' ,
age: '24' ,
},
},
],
},
{
data: {
name: 'G' ,
age: '32' ,
},
children: [
{
data: {
name: 'H' ,
age: '20' ,
},
},
{
data: {
name: 'I' ,
age: '24' ,
},
},
],
},
{
data: {
name: 'J' ,
age: '64' ,
},
children: [
{
data: {
name: 'K' ,
age: '20' ,
},
},
{
data: {
name: 'L' ,
age: '24' ,
},
},
],
},
{
data: {
name: 'M' ,
age: '12' ,
},
children: [
{
data: {
name: 'N' ,
age: '20' ,
},
},
{
data: {
name: 'O' ,
age: '24' ,
},
},
],
},
{
data: {
name: 'P' ,
age: '34' ,
},
children: [
{
data: {
name: 'Q' ,
age: '20' ,
},
},
{
data: {
name: 'R' ,
age: '24' ,
},
},
],
},
{
data: {
name: 'S' ,
age: '43' ,
},
children: [
{
data: {
name: 'T' ,
age: '20' ,
},
},
{
data: {
name: 'U' ,
age: '24' ,
},
},
],
},
];
}
}
|