基于Angular实现动态行列的drill down table组件推荐及示例请求

Hey Kiran, great question! Building a dynamic drill-down table (with both columns and rows configurable on the fly) is a common requirement, and Angular has some excellent components to make this straightforward. Below are my top picks with fully runnable code snippets:

1. PrimeNG Table (Best for Out-of-the-Box Drill-Down) #

PrimeNG's Table component has built-in expandable row support and makes dynamic columns trivial to implement. It's perfect if you want minimal custom code.

Step 1: Install Dependencies #

First, add PrimeNG and PrimeIcons to your project:

npm install primeng primeicons

Step 2: Component Code #

import { Component } from '@angular/core';

@Component({
  selector: 'app-drilldown-table',
  templateUrl: './drilldown-table.component.html',
  styleUrls: ['./drilldown-table.component.css']
})
export class DrilldownTableComponent {
  // Dynamic columns (configurable from API or config file)
  dynamicColumns = [
    { field: 'productName', header: 'Product' },
    { field: 'category', header: 'Category' },
    { field: 'price', header: 'Price' }
  ];

  // Dynamic row data with nested drill-down content
  tableData = [
    {
      productName: 'Laptop',
      category: 'Electronics',
      price: '$999',
      details: {
        stock: 15,
        sku: 'LT-001',
        reviews: 4.8
      }
    },
    {
      productName: 'Wireless Headphones',
      category: 'Audio',
      price: '$199',
      details: {
        stock: 42,
        sku: 'HP-003',
        reviews: 4.5
      }
    }
  ];
}

Step 3: Template Code #

<p-table [columns]="dynamicColumns" [value]="tableData" responsiveLayout="scroll">
  <ng-template pTemplate="header" let-columns>
    <tr>
      <th *ngFor="let col of columns">{{col.header}}</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-rowData let-columns="columns">
    <tr>
      <td *ngFor="let col of columns">
        {{rowData[col.field]}}
      </td>
    </tr>
  </ng-template>
  <!-- Drill-down expansion content -->
  <ng-template pTemplate="rowexpansion" let-rowData>
    <tr>
      <td [attr.colspan]="dynamicColumns.length">
        <div class="p-p-3">
          <h5>Product Details</h5>
          <div class="p-grid p-mb-2">
            <div class="p-col-4"><strong>Stock:</strong> {{rowData.details.stock}}</div>
            <div class="p-col-4"><strong>SKU:</strong> {{rowData.details.sku}}</div>
            <div class="p-col-4"><strong>Rating:</strong> {{rowData.details.reviews}}</div>
          </div>
        </div>
      </td>
    </tr>
  </ng-template>
</p-table>

Step 4: Add Styles (Optional) #

:host ::ng-deep .p-table-row:hover {
  cursor: pointer;
}

2. Angular Material Table + Expansion Panel (Official, Highly Customizable) #

If you prefer using Angular's official component library, you can combine mat-table with mat-expansion-panel to build a fully custom drill-down table.

Step 1: Install Angular Material #

If you haven't already, set up Angular Material:

ng add @angular/material

Step 2: Component Code #

import { Component } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';

@Component({
  selector: 'app-material-drilldown',
  templateUrl: './material-drilldown.component.html',
  styleUrls: ['./material-drilldown.component.css']
})
export class MaterialDrilldownComponent {
  // Dynamic column definitions
  displayedColumns = this.dynamicColumns.map(col => col.field);
  dynamicColumns = [
    { field: 'productName', header: 'Product' },
    { field: 'category', header: 'Category' },
    { field: 'price', header: 'Price' }
  ];

  // Data source for Material Table
  dataSource = new MatTableDataSource([
    {
      productName: 'Laptop',
      category: 'Electronics',
      price: '$999',
      details: { stock: 15, sku: 'LT-001', reviews: 4.8 }
    },
    {
      productName: 'Wireless Headphones',
      category: 'Audio',
      price: '$199',
      details: { stock: 42, sku: 'HP-003', reviews: 4.5 }
    }
  ]);
}

Step 3: Template Code #

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <!-- Dynamic Column Headers -->
  <ng-container [matColumnDef]="col.field" *ngFor="let col of dynamicColumns">
    <th mat-header-cell *matHeaderCellDef>{{col.header}}</th>
    <td mat-cell *matCellDef="let element">{{element[col.field]}}</td>
  </ng-container>

  <!-- Row Content -->
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let element; columns: displayedColumns;" 
      class="expandable-row" (click)="element.expanded = !element.expanded">
  </tr>

  <!-- Drill-Down Expansion Row -->
  <tr mat-row *matRowDef="let element; columns: ['expandedDetail']" class="detail-row">
    <td [attr.colspan]="displayedColumns.length">
      <mat-expansion-panel [expanded]="element.expanded" (opened)="element.expanded = true" (closed)="element.expanded = false">
        <mat-expansion-panel-header>
          <mat-panel-title>Product Details</mat-panel-title>
        </mat-expansion-panel-header>
        <div class="details-container">
          <p><strong>Stock:</strong> {{element.details.stock}}</p>
          <p><strong>SKU:</strong> {{element.details.sku}}</p>
          <p><strong>Rating:</strong> {{element.details.reviews}}</p>
        </div>
      </mat-expansion-panel>
    </td>
  </tr>
</table>

Step 4: Add Styles #

.expandable-row {
  cursor: pointer;
}

.detail-row {
  height: 0;
}

.details-container {
  padding: 16px;
}

Which One to Choose? #

• PrimeNG: Go with this if you want a rapid solution with minimal code—its built-in row expansion handles most edge cases automatically.
• Angular Material: Choose this if you need full control over the UI/UX and want to stick with Angular's official tooling.

Both examples support dynamic columns (just update the dynamicColumns array) and dynamic row data (fetch from an API instead of hardcoding).

内容的提问来源于stack exchange，提问作者Kiran Raj