Angular PrimeNG表栈布局

Angular PrimeNG是一个开源框架，拥有丰富的原生Angular UI组件，可用于出色的造型，该框架可用于制作响应式网站，非常容易。在这篇文章中，我们将看到Angular PrimeNG Table Stack Layout.。

表组件以表格的形式向用户显示一些数据。在表格的堆叠布局中，当表格的宽度小于某个值（默认为960px）时，表格的列将被显示为堆叠的。这个功能可以通过设置表格的_responsiveLayout属性为 “stack”，并在所有主体单元格中添加一个类别为 “p-column-title “的元素来启用。

语法:

<p-table [value]="persons" **responsiveLayout="stack"** >
    <ng-template pTemplate="header">
        <tr>
            <th>Name</th>
            <th>Age</th>
            ...
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-person>
        <tr>
            <td><span class="p-column-title"> ... </span>
              {{ person.name }}
            </td>

            <td> <span class="p-column-title"> ... </span>
              {{ person.age }}
            </td>
        ...
        </tr>
    </ng-template>
</p-table>

创建Angular应用程序并安装模块：。

第1步：使用以下命令创建一个Angular应用程序。

ng new myapp

第2步：创建你的项目文件夹即myapp后，使用以下命令移动到它。

cd myapp

第3步在你给定的目录中安装PrimeNG。

npm install primeng --save
npm install primeicons --save

项目结构：完成上述步骤后，项目结构将如下所示。

Angular PrimeNG表栈布局

Project Structure

例子1：这个例子显示了当表格的宽度小于960px时，对表格组件的堆叠布局的基本使用。

<div style="text-align: center">
    <h2 style="color: green">GeeksforGeeks</h2>
    <h4>Angular PrimeNG Table Stacked Layout</h4>
  
    <p-table [value]="persons" responsiveLayout="stack">
        <ng-template pTemplate="header">
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Profession</th>
                <th>Mobile</th>
                <th>Gender</th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-person>
            <tr>
                <td>
                    <span class="p-column-title">
                        Name
                    </span>
                    {{person.name}}
                </td>
                <td>
                    <span class="p-column-title">
                        Age
                    </span>
                    {{person.age}}
                </td>
                <td>
                    <span class="p-column-title">
                        Profession
                    </span>
                    {{person.profession}}
                </td>
                <td>
                    <span class="p-column-title">
                        Mobile
                    </span>
                    {{person.mobile}}
                </td>
                <td>
                    <span class="p-column-title">
                        Gender
                    </span>
                    {{person.gender}}
                </td>
            </tr>
        </ng-template>
        <ng-template pTemplate="emptymessage">
            <tr>
                <td>No Persons Found.</td>
            </tr>
        </ng-template>
    </p-table>
</div>

import { Component } from '@angular/core';
  
interface Person {
    name: String,
    age: Number,
    profession: String,
    mobile: String,
    gender: String
}
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
  
export class AppComponent {
  
    persons: Person[] = [
        {
            name: "James",
            age: 21,
            profession: "Doctor",
            mobile: "8731******90",
            gender: "Male"
  
        },
        {
            name: "Sam",
            age: 18,
            profession: "Marketer",
            mobile: "8989******98",
            gender: "Male"
        },
        {
            name: "Thomas",
            age: 27,
            profession: "Businessman",
            mobile: "9645******11",
            gender: "Male"
        },
        {
            name: "Kate",
            age: 24,
            profession: "Teacher",
            mobile: "9345******46",
            gender: "Female"
        },
        {
            name: "Kumar",
            age: 17,
            profession: "Student",
            mobile: "7824******78",
            gender: "Male"
        },
        {
            name: "Ethan",
            age: 22,
            profession: "Delivery Boy",
            mobile: "9090******90",
            gender: "Male"
        },
    ];
}

import { NgModule } from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { TableModule } from 'primeng/table';
import { ButtonModule } from 'primeng/button';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        TableModule,
        ButtonModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
  
export class AppModule { }

输出:

Angular PrimeNG表栈布局

例子2：这个例子说明了使用带状表的表堆布局的用途。

<div style="text-align: center">
    <h2 style="color: green">GeeksforGeeks</h2>
    <h4>Angular PrimeNG Table Stacked Layout</h4>
  
    <p-table [value]="persons" responsiveLayout="stack">
        <ng-template pTemplate="header">
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Profession</th>
                <th>Mobile</th>
                <th>Gender</th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-person>
            <tr>
                <td>
                    <span class="p-column-title">
                        Name
                    </span>
                    {{person.name}}
                </td>
                <td class="even">
                    <span class="p-column-title">
                        Age
                    </span>
                    {{person.age}}
                </td>
                <td>
                    <span class="p-column-title">
                        Profession
                    </span>
                    {{person.profession}}
                </td>
                <td class="even">
                    <span class="p-column-title">
                        Mobile
                    </span>
                    {{person.mobile}}
                </td>
                <td>
                    <span class="p-column-title">
                        Gender
                    </span>
                    {{person.gender}}
                </td>
            </tr>
        </ng-template>
        <ng-template pTemplate="emptymessage">
            <tr>
                <td>No Persons Found.</td>
            </tr>
        </ng-template>
    </p-table>
</div>

import { Component } from '@angular/core';
  
interface Person {
    name: String,
    age: Number,
    profession: String,
    mobile: String,
    gender: String
}
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styles: [
        `.even{
            background-color: green;
            color: white;
        }
        `
    ]
})
  
export class AppComponent {
    persons: Person[] = [
        {
            name: "James",
            age: 21,
            profession: "Doctor",
            mobile: "8731******90",
            gender: "Male"
  
        },
        {
            name: "Sam",
            age: 18,
            profession: "Marketer",
            mobile: "8989******98",
            gender: "Male"
        },
        {
            name: "Thomas",
            age: 27,
            profession: "Businessman",
            mobile: "9645******11",
            gender: "Male"
        },
        {
            name: "Kate",
            age: 24,
            profession: "Teacher",
            mobile: "9345******46",
            gender: "Female"
        },
        {
            name: "Kumar",
            age: 17,
            profession: "Student",
            mobile: "7824******78",
            gender: "Male"
        },
        {
            name: "Ethan",
            age: 22,
            profession: "Delivery Boy",
            mobile: "9090******90",
            gender: "Male"
        },
    ];
}

import { NgModule } from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { TableModule } from 'primeng/table';
import { ButtonModule } from 'primeng/button';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        TableModule,
        ButtonModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
  
export class AppModule { }