Как создать столбцы изменяемого размера в Angular Table: пошаговое руководство

Таблицы Angular Material предоставляют удобный способ отображения данных. Однако пользователям часто требуются дополнительные функции, такие как возможность изменять размеры столбцов таблицы для лучшего контроля над отображением данных. В этом руководстве мы рассмотрим процесс создания столбцов изменяемого размера в таблице Angular с использованием пользовательской директивы. Вы узнаете, как настроить директиву, задать стиль изменения размера и реализовать изменение размера столбца шаг за шагом.

Введение

Добавление столбцов с изменяемым размером в таблицу Angular Material включает в себя создание пользовательской директивы, которая слушает события мыши, позволяя пользователям щелкать и перетаскивать столбец, чтобы отрегулировать его ширину. Это дает пользователям гибкость, особенно при работе с большими наборами данных, улучшая взаимодействие с пользователем.

В этом уроке мы:

• Создайте директиву изменения размера специального столбца.
• Обработка событий мыши для изменения размера столбцов.
• Применяйте стили для удобства использования.
• Прикрепите директиву к таблице Angular Material.

Давайте углубимся в это.

Шаг 1. Настройка таблицы угловых материалов

Во-первых, убедитесь, что в вашем проекте Angular установлен Angular Material. Если нет, выполните следующую команду, чтобы добавить Angular Material в ваш проект:

ng add @angular/material

После установки Angular Material вы можете создать базовую таблицу, используя следующий код.

HTML для таблицы:

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

Здесь мы используем mat-table из Angular Material для отображения простой таблицы. Директива 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. Тестирование таблицы

Теперь, когда директива и стили установлены, попробуйте изменить размер столбцов. У вас должна быть возможность нажать на инструмент изменения размера, перетащить его влево или вправо и динамически регулировать ширину каждого столбца.

Часто задаваемые вопросы

В: Что произойдет, если таблица изменяемого размера окажется слишком широкой?

О: Таблица будет переполняться и корректироваться в зависимости от ширины контейнера. Убедитесь, что вы добавили правильное поведение прокрутки или настройки контейнера для обработки больших таблиц.

В: Могу ли я сделать определенные столбцы неизменяемыми?

О: Да, вы можете условно применить директиву appColumnResize только к определенным столбцам, используя встроенные структурные директивы Angular, такие как *ngIf.

Вопрос: Повышает ли этот подход производительность для больших таблиц?

О: Это решение хорошо работает для таблиц среднего размера. Однако для очень больших наборов данных вам может потребоваться дальнейшая оптимизация, используя стратегию обнаружения изменений Angular или механизм виртуальной прокрутки.

Заключение

Следуя этому руководству, вы теперь имеете полнофункциональную функцию изменения размера столбцов для таблиц Angular Material. Эта настройка повышает гибкость и удобство использования ваших таблиц, обеспечивая лучший пользовательский опыт. Приятного кодирования!