Giới thiệu

Một thời gian trước, một khách hàng đã đến với tôi với một yêu cầu: hiển thị dữ liệu của họ trong một lưới phản hồi.

Vấn đề là? số lượng cột là động, thay đổi tùy thuộc vào tập dữ liệu. Hơn nữa, một số cột chứa văn bản rất dài đã làm hỏng mọi bố cục mà tôi đã thử. Và đây là điều thú vị — chúng tôi thậm chí không biết chính xác các cột trước, chỉ biết kiểu của chúng (văn bản, số, email, ngày, ngày giờ).

Tôi đã thử một vài thư viện lưới và bảng hiện có, nhưng chúng quá nặng, quá cứng nhắc, hoặc yêu cầu phải khai báo tất cả các cột một cách rõ ràng. Không cái nào trong số đó xử lý sự kết hợp của các cột động cộng với văn bản dài một cách hợp lý.

Vì vậy, tôi quyết định xây dựng giải pháp của riêng mình. Đó là cách AutoFitGrid ra đời.

Vấn đề

Dữ liệu động là không thể đoán trước. Bạn không thể mã hóa cứng bố cục, và bạn không thể giả định văn bản ngắn ở mọi nơi — đôi khi bạn nhận được mô tả nhiều câu.

Nếu bạn đưa điều đó vào một bảng HTML đơn giản:

  • Các cột tràn ra ngoài, buộc phải cuộn ngang.
  • Các giá trị nhỏ như số sẽ lãng phí không gian.

Đó chính xác là hình thức sử dụng của khách hàng của tôi.

Giải pháp: AutoFitGrid

AutoFitGrid xây dựng một lưới bằng cách xem xét hai điều:

  1. Kiểu được khai báo của mỗi cột (văn bản, số, email, ngày, ngày giờ).
  2. Các giá trị thực tế bên trong các ô (nội dung ngắn so với dài).

Từ đó, nó tự động tính toán chiều rộng, áp dụng căn chỉnh và cho phép nội dung bọc lại để lưới luôn phản hồi. Bạn không cần phải thiết lập chiều rộng hoặc biết số lượng cột trước — thư viện sẽ xử lý điều đó.

Cách Tôi Xử Lý Văn Bản Dài (phần khó khăn)

Phần khó nhất của vấn đề này là tìm ra cách để vừa văn bản dài vào một lưới khi số lượng cột là động và không xác định.

Tôi đã giải quyết nó bằng cách coi mỗi cột như một hình chữ nhật. Thách thức là tìm ra tỷ lệ chiều rộng-chiều cao phù hợp để văn bản chảy một cách gọn gàng mà không làm hỏng bố cục.

Dưới đây là logic:

  1. Đếm số từ trong văn bản.
  2. Phân loại văn bản là ngắn, trung bình, hoặc dài.
  3. Chọn một tỷ lệ mục tiêu tùy thuộc vào loại (văn bản ngắn = hình chữ nhật hẹp hơn, văn bản dài = hình chữ nhật rộng hơn).
  4. Tính toán chiều rộng và chiều cao phù hợp để văn bản bọc lại một cách gọn gàng bên trong.

Bằng cách này, các giá trị ngắn như tên sẽ không lãng phí không gian, trong khi các mô tả dài vẫn dễ đọc và được chứa lại.

Khởi tạo với HTML/JavaScript

Dưới đây là cách bạn khai báo một lưới trong HTML. Lưu ý rằng không có chiều rộng — chỉ có kiểu.

HTML

<div class="grid-container">
  <div class="grid-header" data-type="text">Mô Tả Nhiệm Vụ</div>
  <div class="grid-header" data-type="text">Người Được Giao</div>
  <div class="grid-header" data-type="email">Email</div>
  <div class="grid-header" data-type="datetime">Ngày Bắt Đầu</div>
  <div class="grid-header" data-type="datetime">Ngày Đến Hạn</div>
  <div class="grid-header" data-type="number">Độ Ưu Tiên</div>
  <div class="grid-header" data-type="number">Giờ Dự Kiến</div>

  <div class="grid-item">
    Thực hiện một mô tả rất dài để kiểm tra cách bố cục lưới điều chỉnh
    và bọc văn bản một cách động trên nhiều dòng.
  </div>
  <div class="grid-item">Jane Doe</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

Khi mã của bạn đã sẵn sàng, bạn chỉ cần gọi một lần khởi tạo để cho lưới một chút thông minh.

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

Nếu bạn bật showDebug: true, bạn sẽ thấy các nhật ký hiển thị cách AutoFitGrid đo lường và điều chỉnh các cột.

Sử dụng trong 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">Tên</div>
      <div className="grid-header" data-type="email">Email</div>
      <div className="grid-header" data-type="number">Điểm</div>

      <div className="grid-item">Alice Wonderland</div>
      <div className="grid-item">alice@example.com</div>
      <div className="grid-item">88</div>

      <div className="grid-item">Bob Bobson</div>
      <div className="grid-item">bob@example.com</div>
      <div className="grid-item">95</div>
    </div>
  );
}

Cài đặt và Thử Nghiệm

Bạn có thể cài đặt AutoFitGrid từ npm:

npm install auto-fit-grid

Hoặc khám phá các ví dụ trực tiếp và tài liệu: