परिचय

कुछ समय पहले, एक ग्राहक मेरे पास एक अनुरोध के साथ आया: उनके डेटा को एक उत्तरदायी ग्रिड में दिखाना।

समस्या? कॉलम की संख्या गतिशील थी, जो डेटा सेट के अनुसार बदलती थी। इसके अलावा, कुछ कॉलम में बहुत लंबे टेक्स्ट थे जो मैंने जो भी लेआउट आजमाया, उसे तोड़ देते थे। और यहाँ एक और बात है — हमें पहले से सही कॉलम भी नहीं पता थे, केवल उनके प्रकार (टेक्स्ट, संख्या, ईमेल, तिथि, दिनांक-समय)।

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

इसलिए मैंने अपना खुद का समाधान बनाने का निर्णय लिया। इसी तरह AutoFitGrid का जन्म हुआ।

समस्या

गतिशील डेटा अप्रत्याशित होता है। आप लेआउट को हार्ड-कोड नहीं कर सकते, और आप हर जगह छोटे टेक्स्ट की उम्मीद नहीं कर सकते — कभी-कभी आपको कई वाक्यों के विवरण मिलते हैं।

यदि आप इसे एक साधारण HTML तालिका में डालते हैं:

  • कॉलम ओवरफ्लो होते हैं, जिससे क्षैतिज स्क्रॉल करना पड़ता है।
  • संख्याओं जैसी छोटी मानों का स्थान बर्बाद होता है।

यही मेरी ग्राहक के उपयोग के मामले की स्थिति थी।

समाधान: AutoFitGrid

AutoFitGrid एक ग्रिड बनाता है दो चीजों को देखकर:

  1. प्रत्येक कॉलम का घोषित प्रकार (टेक्स्ट, संख्या, ईमेल, तिथि, दिनांक-समय)।
  2. सेल के अंदर वास्तविक मान (छोटा बनाम लंबा सामग्री)।

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

मैं लंबे टेक्स्ट को कैसे संभालता हूँ (कठिन हिस्सा)

इस समस्या का सबसे कठिन हिस्सा यह पता लगाना था कि लंबे टेक्स्ट को एक ग्रिड में कैसे फिट किया जाए जब कॉलम की संख्या गतिशील और अज्ञात हो।

मैंने इसे प्रत्येक कॉलम को एक आयत के रूप में मानकर हल किया। चुनौती सही चौड़ाई-से-ऊँचाई अनुपात खोजना है ताकि टेक्स्ट साफ-सुथरे तरीके से बह सके बिना लेआउट को तोड़े।

यहाँ तर्क है:

  1. शब्दों की गिनती करें टेक्स्ट में।
  2. टेक्स्ट को छोटा, मध्यम, या लंबा के रूप में वर्गीकृत करें।
  3. श्रेणी के आधार पर एक लक्ष्य अनुपात चुनें (छोटा टेक्स्ट = संकीर्ण आयत, लंबा टेक्स्ट = चौड़ी आयत)।
  4. एक उपयुक्त चौड़ाई और ऊँचाई की गणना करें ताकि टेक्स्ट साफ-सुथरे तरीके से लपेटा जा सके।

इस तरह, नामों जैसी छोटी मानों का स्थान बर्बाद नहीं होता, जबकि लंबे विवरण पढ़ने योग्य और सीमित रहते हैं।

HTML/JavaScript के साथ प्रारंभ करना

यहाँ बताया गया है कि आप HTML में एक ग्रिड कैसे घोषित करते हैं। ध्यान दें कि वहाँ कोई चौड़ाई नहीं है — केवल प्रकार हैं।

HTML

<div class="grid-container">
  <div class="grid-header" data-type="text">कार्य विवरण</div>
  <div class="grid-header" data-type="text">सौंपा गया</div>
  <div class="grid-header" data-type="email">ईमेल</div>
  <div class="grid-header" data-type="datetime">शुरुआत की तारीख</div>
  <div class="grid-header" data-type="datetime">नियत तारीख</div>
  <div class="grid-header" data-type="number">प्राथमिकता</div>
  <div class="grid-header" data-type="number">अनुमानित घंटे</div>

  <div class="grid-item">
    ग्रिड लेआउट को समायोजित करने और टेक्स्ट को गतिशील रूप से कई पंक्तियों में लपेटने के लिए एक बहुत लंबे विवरण को लागू करें।
  </div>
  <div class="grid-item">जेन डो</div>
  <div class="grid-item">jane.doe@example.com</div>
  <div class="grid-item">2024-01-15 08:30:00</div>
  <div class="grid-item">2024-07-15 17:00:00</div>
  <div class="grid-item">1</div>
  <div class="grid-item">100</div>
</div>

JavaScript

जब आपका मार्कअप तैयार हो जाए, तो आप एक प्रारंभिक कॉल के साथ ग्रिड को कुछ बुद्धिमत्ता देते हैं।

new AutoFitGrid({
  container: document.querySelector('.grid-container'),
  defaultMinWidth: 50,
  defaultMaxWidth: Infinity,
  adjustmentThreshold: 200,
  headerSelector: '.grid-header',
  columnSelector: '.grid-item',
  showDebug: false
});

यदि आप showDebug: true चालू करते हैं, तो आप लॉग देखेंगे जो दिखाते हैं कि AutoFitGrid कॉलम को कैसे मापता और फिट करता है।

React में इसका उपयोग करना

import React, { useEffect, useRef } from 'react';
import AutoFitGrid from 'auto-fit-grid';

function MyGrid() {
  const ref = useRef(null);

  useEffect(() => {
    if (ref.current) {
      new AutoFitGrid({
        container: ref.current,
        headerSelector: '.grid-header',
        columnSelector: '.grid-item'
      });
    }
  }, []);

  return (
    <div className="grid-container" ref={ref}>
      <div className="grid-header" data-type="text">नाम</div>
      <div className="grid-header" data-type="email">ईमेल</div>
      <div className="grid-header" data-type="number">स्कोर</div>

      <div className="grid-item">एलिस वंडरलैंड</div>
      <div className="grid-item">alice@example.com</div>
      <div className="grid-item">88</div>

      <div className="grid-item">बॉब बॉबसन</div>
      <div className="grid-item">bob@example.com</div>
      <div className="grid-item">95</div>
    </div>
  );
}

इंस्टॉल करना और इसका परीक्षण करना

आप npm से AutoFitGrid इंस्टॉल कर सकते हैं:

npm install auto-fit-grid

या लाइव उदाहरणों और दस्तावेज़ों का अन्वेषण करें: