Angular 테이블에서 크기 조정 가능한 열을 만드는 방법: 단계별 가이드

Angular Material 테이블은 데이터를 표시하는 세련된 방법을 제공합니다. 그러나 사용자는 데이터 표시를 더 잘 제어하기 위해 테이블 ​​열 크기를 조정하는 기능과 같은 추가 기능을 원하는 경우가 많습니다. 이 가이드에서는 사용자 지정 지시문을 사용하여 Angular 테이블에서 크기 조정 가능한 열을 만드는 과정을 안내합니다. 지시어 설정, 크기 조정기 스타일 지정, 열 크기 조정 구현 방법을 단계별로 배우게 됩니다.

소개

Angular Material 테이블에 크기 조정 가능한 열을 추가하려면 마우스 이벤트를 수신하는 사용자 정의 지시어를 생성해야 하며, 이를 통해 사용자는 열을 클릭하고 드래그하여 너비를 조정할 수 있습니다. 이는 특히 대규모 데이터 세트를 처리할 때 사용자에게 유연성을 제공하여 사용자 경험을 향상시킵니다.

이 튜토리얼에서는 다음을 수행합니다.

• 사용자 정의 열 크기 조정 지시문을 만듭니다.
• 마우스 이벤트를 처리하여 열 크기를 조정합니다.
• 원활한 사용자 경험을 위해 스타일을 적용하세요.
• Angular Material 테이블에 지시문을 첨부합니다.

자세히 살펴보겠습니다.

1단계: Angular 재료 테이블 설정

먼저 Angular 프로젝트에 Angular Material이 설치되어 있는지 확인하세요. 그렇지 않은 경우 다음 명령을 실행하여 프로젝트에 Angular Material을 추가하세요.

ng add @angular/material

Angular Material이 설치되면 다음 코드를 사용하여 기본 테이블을 생성할 수 있습니다.

테이블용 HTML:

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

여기에서는 Angular Material의 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 Material 테이블에 대한 모든 기능을 갖춘 크기 조정 가능한 열 기능을 갖게 됩니다. 이러한 사용자 정의는 테이블의 유연성과 유용성을 향상시켜 더 나은 사용자 경험을 제공합니다. 즐거운 코딩하세요!