So erstellen Sie in der Angular-Tabelle veränderbare Spalten: Eine Schritt-für-Schritt-Anleitung

Angular Material-Tabellen bieten eine elegante Möglichkeit, Daten anzuzeigen. Allerdings wünschen sich Benutzer häufig zusätzliche Funktionen wie die Möglichkeit, die Größe von Tabellenspalten zu ändern, um die Datenanzeige besser steuern zu können. In dieser Anleitung gehen wir durch den Prozess der Erstellung skalierbarer Spalten in einer Angular-Tabelle mithilfe einer benutzerdefinierten Direktive. Sie erfahren Schritt für Schritt, wie Sie die Direktive einrichten, die Größenänderung formatieren und die Größenänderung von Spalten implementieren.

Einführung

Das Hinzufügen veränderbarer Spalten zu einer Angular Material-Tabelle erfordert das Erstellen einer benutzerdefinierten Anweisung, die auf Mausereignisse lauscht und es Benutzern ermöglicht, auf eine Spalte zu klicken und sie zu ziehen, um deren Breite anzupassen. Dies gibt Benutzern Flexibilität, insbesondere beim Umgang mit großen Datensätzen, und verbessert das Benutzererlebnis.

In diesem Tutorial werden wir:

• Erstellen Sie eine benutzerdefinierte Anweisung zur Spaltengröße.
• Mausereignisse verarbeiten, um die Größe von Spalten zu ändern.
• Wenden Sie Stile für ein reibungsloses Benutzererlebnis an.
• Hängen Sie die Anweisung an eine Angular Material-Tabelle an.

Lassen Sie uns darauf eingehen.

Schritt 1: Einrichten der Winkelmaterialtabelle

Stellen Sie zunächst sicher, dass in Ihrem Angular-Projekt Angular Material installiert ist. Wenn nicht, führen Sie den folgenden Befehl aus, um Angular Material zu Ihrem Projekt hinzuzufügen:

ng add @angular/material

Sobald Angular Material installiert ist, können Sie mit dem folgenden Code eine Basistabelle erstellen.

HTML für die Tabelle:

  
{{ column }}
      
{{ element[column] }}
    

Hier verwenden wir mat-table von Angular Material, um eine einfache Tabelle anzuzeigen. Die appColumnResize-Direktive wird auf die th-Elemente (Header-Elemente) angewendet, um die Größe von Spalten zu ändern.

Daten für die Tabelle:

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

export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
}

const ELEMENT_DATA: PeriodicElement[] = [
  { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
  { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
  // ... add more data
];

@Component({
  selector: 'table-basic-example',
  styleUrls: ['table-basic-example.scss'],
  templateUrl: 'table-basic-example.html',
  encapsulation: ViewEncapsulation.None,
})
export class TableBasicExample {
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  dataSource = ELEMENT_DATA;
}

Die Komponente enthält Daten für die periodischen Elemente, die wir in der Tabelle anzeigen.

Schritt 2: Erstellen der Anweisung zur Spaltengrößenänderung

Als nächstes implementieren wir eine benutzerdefinierte Angular-Direktive, die die Größenänderungsfunktion für die Tabellenspalten ermöglicht.

Richtlinienimplementierung:

import {
  Directive,
  ElementRef,
  Renderer2,
  NgZone,
  Input,
  OnInit,
  OnDestroy,
} from '@angular/core';
import { fromEvent, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

@Directive({
  selector: '[appColumnResize]',
})
export class ColumnResizeDirective implements OnInit, OnDestroy {
  @Input() resizableTable: HTMLElement | null = null;

  private startX!: number;
  private startWidth!: number;
  private isResizing = false;
  private column: HTMLElement;
  private resizer!: HTMLElement;
  private destroy$ = new Subject();

  constructor(
    private el: ElementRef,
    private renderer: Renderer2,
    private zone: NgZone
  ) {
    this.column = this.el.nativeElement;
  }

  ngOnInit() {
    this.createResizer();
    this.initializeResizeListener();
  }

  private createResizer() {
    this.resizer = this.renderer.createElement('div');
    this.renderer.addClass(this.resizer, 'column-resizer');
    this.renderer.setStyle(this.resizer, 'position', 'absolute');
    this.renderer.setStyle(this.resizer, 'right', '0');
    this.renderer.setStyle(this.resizer, 'top', '0');
    this.renderer.setStyle(this.resizer, 'width', '5px');
    this.renderer.setStyle(this.resizer, 'cursor', 'col-resize');
    this.renderer.appendChild(this.column, this.resizer);
  }

  private initializeResizeListener() {
    this.zone.runOutsideAngular(() => {
      fromEvent(this.resizer, 'mousedown')
        .pipe(takeUntil(this.destroy$))
        .subscribe((event: MouseEvent) => this.onMouseDown(event));

      fromEvent(document, 'mousemove')
        .pipe(takeUntil(this.destroy$))
        .subscribe((event: MouseEvent) => this.onMouseMove(event));

      fromEvent(document, 'mouseup')
        .pipe(takeUntil(this.destroy$))
        .subscribe(() => this.onMouseUp());
    });
  }

  private onMouseDown(event: MouseEvent) {
    event.preventDefault();
    this.isResizing = true;
    this.startX = event.pageX;
    this.startWidth = this.column.offsetWidth;
  }

  private onMouseMove(event: MouseEvent) {
    if (!this.isResizing) return;
    const width = this.startWidth   (event.pageX - this.startX);
    this.renderer.setStyle(this.column, 'width', `${width}px`);
  }

  private onMouseUp() {
    if (!this.isResizing) return;
    this.isResizing = false;
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

Erläuterung:

• createResizer(): Fügt ein Resizer-Element (div) zum Spaltenkopf hinzu.
• onMouseDown(): Wird ausgelöst, wenn der Benutzer auf die Größenänderung klickt, und zeichnet die Anfangsposition auf.
• onMouseMove(): Aktualisiert die Spaltenbreite, während der Benutzer den Resizer zieht.
• onMouseUp(): Beendet die Größenänderung, wenn der Benutzer die Maustaste loslässt.

Schritt 3: Gestalten des Resizers

Wir müssen die Größenänderung so gestalten, dass Benutzer wissen, dass sie ziehbar ist. Fügen Sie Ihren Stilen das folgende CSS hinzu:

.resizable-table {
  th {
    position: relative;

    .column-resizer {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: 10px;
      cursor: col-resize;
      z-index: 1;

      &:hover {
        border-right: 2px solid red;
      }
    }

    &.resizing {
      user-select: none;
    }
  }

  &.resizing {
    cursor: col-resize;
    user-select: none;
  }
}

Dieses CSS positioniert die Größenänderung korrekt, fügt einen Hover-Effekt hinzu und ändert den Cursor, um die Größenänderung anzuzeigen.

Schritt 4: Testen der Tabelle

Da nun die Anweisung und die Stile vorhanden sind, versuchen Sie, die Größe der Spalten zu ändern. Sie sollten in der Lage sein, auf die Größenänderung zu klicken, sie nach links oder rechts zu ziehen und die Breite jeder Spalte dynamisch anzupassen.

FAQs

F: Was passiert, wenn die skalierbare Tabelle zu breit ist?

A: Die Tabelle läuft über und passt sich der Breite des Containers an. Stellen Sie sicher, dass Sie das richtige Scrollverhalten oder Containeranpassungen hinzufügen, um große Tabellen zu verarbeiten.

F: Kann ich festlegen, dass die Größe bestimmter Spalten nicht geändert werden kann?

A: Ja, Sie können die appColumnResize-Direktive bedingt nur auf bestimmte Spalten anwenden, indem Sie Angulars integrierte Strukturdirektiven wie *ngIf verwenden.

F: Ist dieser Ansatz leistungsfreundlich für große Tabellen?

A: Diese Lösung funktioniert gut für mittelgroße Tische. Bei extrem großen Datensätzen möchten Sie jedoch möglicherweise eine weitere Optimierung vornehmen, indem Sie die Änderungserkennungsstrategie von Angular oder einen virtuellen Scrollmechanismus verwenden.

Abschluss

Wenn Sie dieser Anleitung folgen, verfügen Sie jetzt über eine voll funktionsfähige Funktion zur Größenänderung von Spalten für Ihre Angular Material-Tabellen. Diese Anpassung erhöht die Flexibilität und Benutzerfreundlichkeit Ihrer Tabellen und sorgt für ein besseres Benutzererlebnis. Viel Spaß beim Codieren!