Angular テーブルのサイズ変更可能な列をマスターする: 開発者のためのステップバイステップガイド-jsチュートリアル-php.cn

Mastering Resizable Columns in Angular Table: A Step-by-Step Guide for Developers

Angular テーブルでサイズ変更可能な列を作成する方法: ステップバイステップガイド

Angular マテリアルテーブルは、データを表示する洗練された方法を提供します。ただし、ユーザーは多くの場合、データ表示をより適切に制御するためにテーブル列のサイズを変更する機能などの追加機能を必要とします。このガイドでは、カスタムディレクティブを使用して Angular テーブルにサイズ変更可能な列を作成するプロセスについて説明します。ディレクティブを設定し、サイズ変更機能をスタイルし、列のサイズ変更を実装する方法を段階的に学習します。

導入

Angular マテリアルテーブルにサイズ変更可能な列を追加するには、マウスイベントをリッスンするカスタムディレクティブを作成する必要があり、ユーザーが列をクリックしてドラッグして幅を調整できるようになります。これにより、特に大規模なデータセットを扱う場合にユーザーに柔軟性が与えられ、ユーザーエクスペリエンスが向上します。

このチュートリアルでは次のことを行います:

カスタム列サイズ変更ディレクティブを作成します。
マウスイベントを処理して列のサイズを変更します。
スムーズなユーザーエクスペリエンスを実現するためにスタイルを適用します。
ディレクティブを Angular マテリアルテーブルにアタッチします。

詳しく見ていきましょう。

ステップ 1: Angular マテリアルテーブルのセットアップ

まず、Angular プロジェクトに Angular マテリアルがインストールされていることを確認します。そうでない場合は、次のコマンドを実行して、Angular マテリアルをプロジェクトに追加します:

ng add @angular/material

ログイン後にコピー

Angular マテリアルがインストールされたら、次のコードを使用して基本的なテーブルを作成できます。

テーブルの HTML:

<div class="resizable-table">
  <table mat-table [dataSource]="dataSource">
    <ng-container *ngFor="let column of displayedColumns" [matColumnDef]="column">
      <th mat-header-cell *matHeaderCellDef appColumnResize>{{ column }}</th>
      <td mat-cell *matCellDef="let element">{{ element[column] }}</td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
</div>

ログイン後にコピー

ここでは、Angular Materials の mat-table を使用して、単純なテーブルを表示します。 appColumnResize ディレクティブは th (ヘッダー) 要素に適用され、列のサイズを変更可能になります。

テーブルのデータ:

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;
}

ログイン後にコピー

コンポーネントには周期要素のデータが含まれており、これを表に表示します。

ステップ 2: 列サイズ変更ディレクティブの作成

次に、テーブル列のサイズ変更機能を有効にするカスタム Angular ディレクティブを実装します。

ディレクティブの実装:

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<void>();

  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();
  }
}

ログイン後にコピー

説明：

createResizer(): サイズ変更要素 (div) を列ヘッダーに追加します。
onMouseDown(): ユーザーがリサイザをクリックするとトリガーされ、初期位置が記録されます。
onMouseMove(): ユーザーがサイズ変更ツールをドラッグすると、列の幅が更新されます。
onMouseUp(): ユーザーがマウスボタンを放すとサイズ変更を終了します。

ステップ 3: リサイザーのスタイル設定

ドラッグ可能であることがユーザーにわかるように、サイズ変更ツールのスタイルを設定する必要があります。次の CSS をスタイルに追加します:

.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;
  }
}

ログイン後にコピー

この CSS は、サイズ変更機能を正しく配置し、ホバー効果を追加し、カーソルを変更してサイズ変更可能であることを示します。