Como criar colunas redimensionáveis ​​em uma tabela angular: um guia passo a passo

As tabelas de materiais angulares fornecem uma maneira elegante de exibir dados. No entanto, os usuários geralmente desejam funcionalidades adicionais, como a capacidade de redimensionar colunas da tabela para melhor controle sobre a exibição de dados. Neste guia, percorreremos o processo de criação de colunas redimensionáveis ​​em uma tabela Angular usando uma diretiva personalizada. Você aprenderá como configurar a diretiva, estilizar o redimensionador e implementar o redimensionamento de colunas passo a passo.

Introdução

Adicionar colunas redimensionáveis ​​a uma tabela Angular Material envolve a criação de uma diretiva personalizada que escuta eventos do mouse, permitindo aos usuários clicar e arrastar uma coluna para ajustar sua largura. Isso dá flexibilidade aos usuários, especialmente ao lidar com grandes conjuntos de dados, melhorando a experiência do usuário.

Neste tutorial, iremos:

• Crie uma diretiva de redimensionamento de coluna personalizada.
• Manipule eventos do mouse para redimensionar colunas.
• Aplique estilos para uma experiência de usuário tranquila.
• Anexe a diretiva a uma tabela Angular Material.

Vamos mergulhar nisso.

Passo 1: Configurando a Tabela de Materiais Angulares

Primeiro, certifique-se de que seu projeto Angular tenha Angular Material instalado. Caso contrário, execute o seguinte comando para adicionar Angular Material ao seu projeto:

ng add @angular/material

Depois que o Angular Material estiver instalado, você pode criar uma tabela básica usando o código a seguir.

HTML para a tabela:

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

Aqui, usamos mat-table do Angular Material para exibir uma tabela simples. A diretiva appColumnResize é aplicada aos elementos (cabeçalho) para tornar as colunas redimensionáveis.

Dados da tabela:

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

O componente inclui dados para os elementos periódicos, que exibiremos na tabela.

Etapa 2: Criando a Diretiva de Redimensionamento de Coluna

A seguir, implementaremos uma diretiva Angular personalizada que permite a funcionalidade de redimensionamento para as colunas da tabela.

Implementação da diretiva:

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

Explicação:

• createResizer(): Adiciona um elemento redimensionador (div) ao cabeçalho da coluna.
• onMouseDown(): Acionado quando o usuário clica no redimensionador, registrando a posição inicial.
• onMouseMove(): Atualiza a largura da coluna conforme o usuário arrasta o redimensionador.
• onMouseUp(): Encerra o redimensionamento quando o usuário solta o botão do mouse.

Etapa 3: estilizar o redimensionador

Precisamos estilizar o redimensionador para que os usuários saibam que ele pode ser arrastado. Adicione o seguinte CSS aos seus estilos:

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

Este CSS posiciona o redimensionador corretamente, adiciona um efeito de foco e altera o cursor para indicar redimensionamento.

Etapa 4: testando a tabela

Agora que a diretiva e os estilos estão em vigor, tente redimensionar as colunas. Você poderá clicar no redimensionador, arrastá-lo para a esquerda ou para a direita e ajustar dinamicamente a largura de cada coluna.

Perguntas frequentes

P: O que acontece se a tabela redimensionável for muito larga?

R: A tabela irá transbordar e se ajustar com base na largura do contêiner. Certifique-se de adicionar comportamento de rolagem adequado ou ajustes de contêiner para lidar com tabelas grandes.

P: Posso tornar colunas específicas não redimensionáveis?

R: Sim, você pode aplicar condicionalmente a diretiva appColumnResize apenas a colunas específicas usando as diretivas estruturais integradas do Angular, como *ngIf.

P: Essa abordagem é favorável ao desempenho para tabelas grandes?

R: Esta solução funciona bem para tabelas de tamanho moderado. No entanto, para conjuntos de dados extremamente grandes, você pode querer otimizar ainda mais usando a estratégia de detecção de alterações do Angular ou um mecanismo de rolagem virtual.

Conclusão

Ao seguir este guia, agora você tem um recurso de coluna redimensionável totalmente funcional para suas tabelas Angular Material. Essa customização aprimora a flexibilidade e usabilidade de suas tabelas, proporcionando uma melhor experiência ao usuário. Boa codificação!