Angular PrimeNG表的重新排序

Angular PrimeNG是一个开源框架，拥有丰富的原生Angular UI组件，可用于出色的造型，这个框架用于制作响应式网站，非常容易。本文将告诉我们如何在Angular PrimeNG中使用TreeTable Column Resize。

Angular PrimeNG Table Reorder可以对Table组件中的列进行重新排序。列可以根据用户的需要进行重新排序，这使得表格更具有互动性和用户友好性。

语法:

<p-table
   [value]="tableData"
   [columns]="cols"
   [reorderableColumns]="true">
<ng-template pTemplate="header" let-columns>
    <tr>
       <th *ngFor="let col of columns" 
        ttReorderableColumn>
         {{ col.header }}
       </th>
    </tr>
 </ng-template>
</p-table>

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

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

ng new appname

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

cd appname

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

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

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

Angular PrimeNG表的重新排序

例子1：下面是一个简单的例子，演示了Angular PrimeNG Table Reorder的使用，我们要让列变得可以重新排序。

<h2 style="color: green">GeeksforGeeks</h2>
<h4>Angular PrimeNG Table Reorder</h4>
  
<p-table #myTab [value]="tableData" 
                [scrollable]="true" 
                [columns]="cols" 
                [reorderableColumns]="true">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns" pReorderableColumn>
                {{ col.header }}
            </th>
        </tr>
    </ng-template>
  
    <ng-template pTemplate="body" 
                 let-rowData let-columns="columns" 
                 let-index="rowIndex">
        <tr>
            <td *ngFor="let col of columns">
                {{ rowData[col.field] }}
            </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",
      },
    ];
  }
}

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { HttpClientModule } from "@angular/common/http";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
import { RouterModule } from "@angular/router";
import { AppComponent } from "./app.component";
import { TreeTableModule } from "primeng/treetable";
import { ContextMenuModule } from "primeng/contextmenu";
import { TableModule } from "primeng/table";
  
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    TreeTableModule,
    TableModule,
    ContextMenuModule,
    HttpClientModule,
    FormsModule,
    RouterModule.forRoot
        ([{ path: "", component: AppComponent }]),
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

输出:

Angular PrimeNG表的重新排序

例子2：下面是另一个例子，演示Angular PrimeNG Table Reorder的使用，我们正在应用行重新排序。

<h2 style="color: green">GeeksforGeeks</h2>
<h4>Angular PrimeNG Table Reorder</h4>
  
<p-table #myTab [value]="tableData" 
                [scrollable]="true" 
                [columns]="cols">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th style="width:3rem">Sort</th>
            <th *ngFor="let col of columns">
                {{ col.header }}
            </th>
        </tr>
    </ng-template>
  
    <ng-template pTemplate="body" 
                 let-rowData let-columns="columns" 
                 let-index="rowIndex">
        <tr [pReorderableRow]="index">
            <td>
                <span class="pi pi-bars" pReorderableRowHandle></span>
            </td>
            <td *ngFor="let col of columns">
                {{ rowData[col.field] }}
            </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",
      },
    ];
  }
}

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { HttpClientModule } from "@angular/common/http";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
import { RouterModule } from "@angular/router";
import { AppComponent } from "./app.component";
import { TreeTableModule } from "primeng/treetable";
import { ContextMenuModule } from "primeng/contextmenu";
import { TableModule } from "primeng/table";
  
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    TreeTableModule,
    TableModule,
    ContextMenuModule,
    HttpClientModule,
    FormsModule,
    RouterModule.forRoot
        ([{ path: "", component: AppComponent }]),
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}