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

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

導入

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

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

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

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

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

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

ng add @angular/material

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

テーブルの HTML:

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

ここでは、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();

  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 は、サイズ変更機能を正しく配置し、ホバー効果を追加し、サイズ変更可能であることを示すようにカーソルを変更します。

ステップ 4: テーブルのテスト

ディレクティブとスタイルが設定されたので、列のサイズを変更してみます。サイズ変更ツールをクリックして左右にドラッグすると、各列の幅を動的に調整できるはずです。

よくある質問

Q: サイズ変更可能なテーブルの幅が広すぎる場合はどうなりますか?

A: テーブルはオーバーフローし、コンテナの幅に基づいて調整されます。大きなテーブルを処理するには、適切なスクロール動作またはコンテナ調整を追加してください。

Q: 特定の列をサイズ変更不可にできますか?

A: はい、*ngIf.

Q: このアプローチは大きなテーブルのパフォーマンスに優れていますか?

A: このソリューションは中程度のサイズのテーブルに適しています。ただし、非常に大規模なデータセットの場合は、Angular の変更検出戦略または仮想スクロール メカニズムを使用してさらに最適化することが必要になる場合があります。

結論

このガイドに従うことで、Angular マテリアル テーブルのサイズ変更可能な列機能が完全に機能するようになります。このカスタマイズにより、テーブルの柔軟性と使いやすさが向上し、より良いユーザー エクスペリエンスが提供されます。コーディングを楽しんでください!