कोणीय तालिका में आकार बदलने योग्य कॉलम कैसे बनाएं: एक चरण-दर-चरण मार्गदर्शिका

कोणीय सामग्री तालिकाएँ डेटा प्रदर्शित करने का एक आसान तरीका प्रदान करती हैं। हालाँकि, उपयोगकर्ता अक्सर डेटा प्रदर्शन पर बेहतर नियंत्रण के लिए तालिका कॉलम का आकार बदलने की क्षमता जैसी अतिरिक्त कार्यक्षमता चाहते हैं। इस गाइड में, हम एक कस्टम निर्देश का उपयोग करके एक कोणीय तालिका में आकार बदलने योग्य कॉलम बनाने की प्रक्रिया से गुजरेंगे। आप सीखेंगे कि निर्देश कैसे सेट करें, आकार बदलने वाले को कैसे स्टाइल करें और चरण-दर-चरण कॉलम का आकार बदलना लागू करें।

परिचय

कोणीय सामग्री तालिका में आकार बदलने योग्य कॉलम जोड़ने में एक कस्टम निर्देश बनाना शामिल है जो माउस घटनाओं को सुनता है, जिससे उपयोगकर्ताओं को इसकी चौड़ाई समायोजित करने के लिए कॉलम को क्लिक करने और खींचने की अनुमति मिलती है। यह उपयोगकर्ताओं को लचीलापन देता है, विशेष रूप से बड़े डेटासेट के साथ काम करते समय, उपयोगकर्ता अनुभव में सुधार करता है।

इस ट्यूटोरियल में, हम करेंगे:

• एक कस्टम कॉलम आकार बदलने का निर्देश बनाएं।
• कॉलम का आकार बदलने के लिए माउस इवेंट को संभालें।
• सुगम उपयोगकर्ता अनुभव के लिए शैलियाँ लागू करें।
• निर्देश को कोणीय सामग्री तालिका में संलग्न करें।

आइए इसमें गोता लगाएँ।

चरण 1: कोणीय सामग्री तालिका की स्थापना

सबसे पहले, सुनिश्चित करें कि आपके एंगुलर प्रोजेक्ट में एंगुलर मटेरियल स्थापित है। यदि नहीं, तो अपने प्रोजेक्ट में कोणीय सामग्री जोड़ने के लिए निम्नलिखित कमांड चलाएँ:

ng add @angular/material

एक बार कोणीय सामग्री स्थापित हो जाने पर, आप निम्नलिखित कोड का उपयोग करके एक मूल तालिका बना सकते हैं।

तालिका के लिए HTML:

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

यहां, हम एक साधारण तालिका प्रदर्शित करने के लिए कोणीय सामग्री से मैट-टेबल का उपयोग करते हैं। कॉलम को आकार बदलने योग्य बनाने के लिए ऐपकॉलम रीसाइज़ निर्देश को वें (हेडर) तत्वों पर लागू किया जाता है।

तालिका के लिए डेटा:

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: कॉलम का आकार बदलने का निर्देश बनाना

इसके बाद, हम एक कस्टम एंगुलर निर्देश लागू करेंगे जो तालिका कॉलम के लिए कार्यक्षमता का आकार बदलने में सक्षम बनाता है।

निर्देश कार्यान्वयन:

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: रिसाइज़र को स्टाइल करना

हमें रिसाइज़र को स्टाइल करने की आवश्यकता है ताकि उपयोगकर्ताओं को पता चले कि यह खींचने योग्य है। अपनी शैलियों में निम्नलिखित सीएसएस जोड़ें:

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

यह सीएसएस आकार बदलने वाले को सही ढंग से स्थित करता है, एक होवर प्रभाव जोड़ता है, और आकार बदलने की क्षमता को इंगित करने के लिए कर्सर को बदलता है।

चरण 4: तालिका का परीक्षण करना

अब जब निर्देश और शैलियाँ लागू हो गई हैं, तो कॉलम का आकार बदलने का प्रयास करें। आपको रिसाइज़र पर क्लिक करने, उसे बाएँ या दाएँ खींचने और प्रत्येक कॉलम की चौड़ाई को गतिशील रूप से समायोजित करने में सक्षम होना चाहिए।

पूछे जाने वाले प्रश्न

प्रश्न: यदि आकार बदलने योग्य तालिका बहुत चौड़ी है तो क्या होगा?

ए: कंटेनर की चौड़ाई के आधार पर तालिका ओवरफ्लो हो जाएगी और समायोजित हो जाएगी। सुनिश्चित करें कि आप बड़ी तालिकाओं को संभालने के लिए उचित स्क्रॉल व्यवहार या कंटेनर समायोजन जोड़ें।

प्रश्न: क्या मैं विशिष्ट कॉलमों को गैर-आकार बदलने योग्य बना सकता हूं?

उ: हाँ, आप एंगुलर के अंतर्निहित संरचनात्मक निर्देशों जैसे *ngIf का उपयोग करके सशर्त रूप से केवल विशिष्ट कॉलमों पर ऐपकॉलम रीसाइज़ निर्देश लागू कर सकते हैं।

प्रश्न: क्या यह दृष्टिकोण बड़ी तालिकाओं के लिए प्रदर्शन-अनुकूल है?

उ: यह समाधान मध्यम आकार की तालिकाओं के लिए अच्छा काम करता है। हालाँकि, अत्यधिक बड़े डेटासेट के लिए, आप एंगुलर की परिवर्तन पहचान रणनीति या वर्चुअल स्क्रॉलिंग तंत्र का उपयोग करके और अधिक अनुकूलन करना चाह सकते हैं।

निष्कर्ष

इस गाइड का पालन करके, अब आपके पास अपनी कोणीय सामग्री तालिकाओं के लिए एक पूरी तरह कार्यात्मक आकार बदलने योग्य कॉलम सुविधा है। यह अनुकूलन आपकी तालिकाओं के लचीलेपन और उपयोगिता को बढ़ाता है, जिससे बेहतर उपयोगकर्ता अनुभव मिलता है। हैप्पी कोडिंग!