บทนำ

เมื่อสักครู่ ลูกค้ามาหาฉันพร้อมกับคำขอ: แสดงข้อมูลของพวกเขาในกริดที่ตอบสนอง

ปัญหาคือ? จำนวนคอลัมน์มีการเปลี่ยนแปลง ขึ้นอยู่กับชุดข้อมูล นอกจากนี้ บางคอลัมน์ยังมี ข้อความยาวมาก ที่ทำให้เลย์เอาต์ทุกแบบที่ฉันลองล้มเหลว และนี่คือจุดที่น่าสนใจ — เราไม่รู้แม้แต่จำนวนคอลัมน์ที่แน่นอนล่วงหน้า รู้แค่ ประเภท ของมัน (ข้อความ, ตัวเลข, อีเมล, วันที่, วันที่และเวลา)

ฉันได้ทดสอบไลบรารีกริดและตารางที่มีอยู่บางตัว แต่พวกมันหนักเกินไป แข็งเกินไป หรือจำเป็นต้องประกาศคอลัมน์ทั้งหมดอย่างชัดเจน ไม่มีตัวไหนที่จัดการกับการผสมผสานของ คอลัมน์ไดนามิกและข้อความยาว ได้อย่างดี

ดังนั้นฉันจึงตัดสินใจสร้างโซลูชันของตัวเอง นั่นคือที่มาของ 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>
  );
}

การติดตั้งและทดลองใช้งาน

คุณสามารถติดตั้ง AutoFitGrid จาก npm:

npm install auto-fit-grid

หรือสำรวจตัวอย่างสดและเอกสาร: