Giới thiệu trên HN: DataSheetGrid, component React theo phong cách Airtable

 (react-datasheet-grid.netlify.app)
2 điểm bởi GN⁺ 2023-11-13 | 1 bình luận | Chia sẻ qua WhatsApp

Giới thiệu React Datasheet Grid

  • React Datasheet Grid là một component React tương tự Airtable, cho phép tạo bảng tính đẹp mắt.
  • Hợp tác với Tggl.io, đơn vị giúp các đội ngũ kỹ thuật và sản phẩm phát hành sản phẩm chất lượng tốt hơn nhanh hơn và cải thiện tỷ lệ chuyển đổi.
  • Cung cấp component DataSheetGrid rất dễ dùng, chỉ cần kết nối state là có thể sử dụng.

Dễ sử dụng

  • React Datasheet Grid còn dễ dùng hơn cả <input />.
  • Có thể dùng useState để quản lý và thay đổi trạng thái các hàng của bảng tính.

Hiệu năng

  • Tốc độ được tối ưu nhờ kiến trúc ảo hóa, có thể dễ dàng xử lý hàng trăm nghìn hàng.
  • Tối ưu hiệu năng với mức render tối thiểu; có thể tận dụng tối đa hiệu năng của DSG bằng cách làm theo hướng dẫn hiệu năng.

Khả năng tùy biến

  • Có thể kiểm soát mọi hành vi của bảng tính, tự triển khai widget riêng và tùy biến phong cách DSG cho phù hợp với ứng dụng.

Giàu tính năng

  • Hỗ trợ sao chép và dán từ Excel, Google Sheets, Notion, v.v.
  • Hỗ trợ đầy đủ điều hướng bằng bàn phím và các phím tắt.
  • Hỗ trợ nhấp chuột phải và menu ngữ cảnh tùy chỉnh.
  • Hỗ trợ kéo góc để mở rộng vùng chọn.
  • Hoạt ảnh mượt mà.
  • Được xây dựng bằng Typescript.

Ý kiến của GN⁺

Điều quan trọng nhất ở React Datasheet Grid là tính dễ sử dụng, hiệu năng vượt trội, khả năng tùy biến và bộ tính năng phong phú. Component này có thể giúp các lập trình viên triển khai chức năng bảng tính nhanh chóng và hiệu quả, từ đó cải thiện trải nghiệm người dùng và rút ngắn thời gian phát triển sản phẩm. Vì vậy, đây có thể là một công cụ rất đáng chú ý đối với các nhà phát triển phần mềm.

Bài viết liên quan

1 bình luận

 
GN⁺ 2023-11-13
Ý kiến trên Hacker News

  • Việc mục tiêu của dự án tập trung vào khả năng mở rộng dễ dàng thay vì chạy đua tính năng là một quyết định rất sáng suốt.

    • Gợi nhớ trải nghiệm trong các dự án trước đây khi phải chọn một component data grid có các tính năng “giống Excel” mà khách hàng mong muốn. Có vô số tính năng nhỏ, và tập hợp tính năng mỗi khách hàng muốn lại khác nhau.
    • Nhiều component vốn đã phức tạp, nhưng kỳ vọng dành cho grid còn ở một cấp độ hoàn toàn khác.
    • Không ai có thể làm được mọi thứ, và việc nhận sự trợ giúp từ cộng đồng là điều khôn ngoan.

  • Tuần này đã bắt đầu dùng nó trong dự án sau khi thay giao diện “chỉnh sửa từng hàng bằng hộp thoại” bằng chế độ chỉnh sửa bảng nội tuyến. Nó hoạt động tốt ngay khi dùng mặc định, và tôi đã tự viết component cột của riêng mình để xử lý kiểm tra hợp lệ bằng popover cho từng ô.

    • Không có sẵn tính năng thay đổi kích thước cột (nhưng cũng không phải vấn đề lớn khi sử dụng).
    • Tôi muốn tắt tính năng chọn hàng hoặc cột khi nhấp vào header hay gutter. Có thể đây không phải nhu cầu đủ phổ biến để tích hợp vào thư viện.

  • Component DataSheetGrid được xem như chén thánh của UX/UI, nhưng thực sự quá phức tạp để bao gồm mọi chi tiết. Chúc dự án thành công và gọi vốn thuận lợi. Dù là web hay desktop, người ta vẫn luôn thấy cùng một câu chuyện lặp lại vượt ra ngoài giới hạn của nền tảng gốc.

  • Component này trông ổn, nhưng còn thiếu một số tính năng cốt lõi như Airtable hay MUI DataGrid (sắp xếp/lọc, cố định hàng/cột, hàng tổng hợp, pivot, v.v.).

    • Dù vậy, đây là một ý tưởng hay, và chúc may mắn trong việc xây dựng một đối thủ OSS xứng tầm.

  • Nhìn qua thì rất ấn tượng, nhưng phần hero text liên tục thay đổi ở đầu trang làm cả trang giật lên giật xuống, khiến phần còn lại rất khó đọc. (trên Firefox cho iOS)

  • Có ai còn nhớ chuyện gì đã xảy ra với DataTables không? Công cụ đó vừa tệ vừa được dùng rộng rãi, đến mức tác giả đã bắt đầu thu phí hỗ trợ.

  • Cách khung focus thực sự di chuyển từ chỗ này sang chỗ khác khi nhấp vào một ô khác khá gây khó chịu. Nếu nhấp vào một ô cách vài ô, có thể thấy khung focus màu xanh nhanh chóng lao đến mục tiêu mới. Google không làm như vậy.

  • Component này trông thật sự rất hay, và đúng là tôi đã cần nó từ một tháng trước. Tôi sẽ thử dùng.

  • Trên iOS không thể dán vào ô, nhưng vẫn gõ được. Đây là hành vi có chủ đích hay là lỗi? Trên bản desktop thì có dán được không?

  • Cảm ơn @nick-keller. Tôi đã phát hiện ra thứ này từ một tháng trước và nó trông rất hứa hẹn. Chọn phạm vi có sẵn theo mặc định (trong khi ở một số giải pháp thay thế thì đây là tính năng pro), và có thể tùy biến ô. Tuy nhiên lại không có demo cho thấy điều đó thực sự khả thi, nên ví dụ tốt nhất chỉ được thể hiện bằng ảnh chụp màn hình trên landing page ở mục “customizable”. Tôi đã gặp khó khăn khi tạo header tùy chỉnh và menu cho header, rồi chuyển sang AG-Grid và tự triển khai tính năng chọn phạm vi của riêng mình.