Angular PrimeNG表格滚动

Angular PrimeNG是一个开源框架，它有丰富的原生Angular UI组件，可以用来做很好的造型，这个框架用来做响应式网站，非常方便。本文将告诉我们如何在Angular PrimeNG中使用表格滚动。

Angular PrimeNG Table Scrolling是用来使Table组件可滚动的。滚动使表组件在不同屏幕尺寸的设备上更具互动性和响应性。添加虚拟滚动模式，有助于实现处理大型数据集，以便在滚动时按需显示数据。

Angular PrimeNG表的滚动属性：

value。它是要在表中显示的对象的数组。默认值为空。
scrollable:这个布尔属性指定是否启用表格的水平和/或垂直滚动。默认值是false。
scrollHeight: 它指定了滚动视口的高度。它可以是一个以像素为单位的固定值，也可以传递 “flex “作为动态尺寸。

语法:

<p-table 
    [value]="..." 
    [scrollable]="true" 
    scrollHeight="...px">
</p-table>

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

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

ng new appname

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

cd appname

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

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

项目结构：它将看起来像如下。

Angular PrimeNG表格滚动

Project Structure

例子1：下面是一个简单的例子，演示Angular PrimeNG表滚动的使用。

<h2 style="color: green">GeeksforGeeks</h2>
<h4>Angular PrimeNG Table Scrolling</h4>
  
<p-table 
    [value]="tableData" 
    [scrollable]="true" 
    scrollHeight="400px">
    <ng-template pTemplate="header">
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Age</th>
        </tr>
    </ng-template>
  
    <ng-template pTemplate="body" let-people>
        <tr>
            <td>
                {{ people.firstname }}
            </td>
            <td>
                {{ people.lastname }}
            </td>
            <td>
                {{ people.age }}
            </td>
        </tr>
    </ng-template>
</p-table>

import { Component } from "@angular/core";
  
interface People {
  firstname?: string;
  lastname?: string;
  age?: string;
}
  
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
})
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",
      },
    ];
  }
}

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 { MultiSelectModule } from "primeng/multiselect";
  
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    TableModule,
    MultiSelectModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

输出:

Angular PrimeNG表格滚动

例子2：下面是另一个例子，演示Angular PrimeNG表格滚动的使用，我们利用的是水平滚动。

<h2 style="color: green">GeeksforGeeks</h2>
<h4>Angular PrimeNG Table Scrolling</h4>
  
<p-table 
    [value]="tableData" 
    [scrollable]="true" 
    [style]="{ width: '600px' }">
    <ng-template pTemplate="header">
        <tr>
            <th [style]="{ width: '300px' }">
                First Name
            </th>
            <th [style]="{ width: '300px' }">
                Last Name
            </th>
            <th [style]="{ width: '300px' }">
                Age
            </th>
        </tr>
    </ng-template>
  
    <ng-template pTemplate="body" let-people>
        <tr>
            <td>
                {{ people.firstname }}
            </td>
            <td pEditableColumn>
                {{ people.lastname }}
            </td>
            <td pEditableColumn>
                {{ people.age }}
            </td>
        </tr>
    </ng-template>
</p-table>

import { Component } from '@angular/core';
  
interface People {
    firstname?: string;
    lastname?: string;
    age?: string;
}
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
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',
            },
        ];
    }
}

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 { MultiSelectModule } from "primeng/multiselect";
  
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    TableModule,
    MultiSelectModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}