Giới thiệu trên HN: DataSheetGrid, component React kiểu Airtable
(react-datasheet-grid.netlify.app)- React Datasheet Grid là một component để đưa giao diện dạng bảng tính vào ứng dụng React, cho phép cấu hình màn hình nhập dữ liệu bằng cách liên kết trạng thái và định nghĩa cột
- Cách dùng cơ bản là truyền
value,onChange,columnsvào<DataSheetGrid />, hướng tới luồng đơn giản hơn so với<input />thông thường - Nhờ kiến trúc ảo hóa và tối ưu render ở mức tối thiểu, nó có thể xử lý hàng trăm nghìn dòng, phù hợp với UI bảng dữ liệu lớn
- Có thể tùy biến để kiểm soát hành vi, widget và kiểu dáng theo yêu cầu sản phẩm
- Hỗ trợ sao chép/dán với Excel, Google Sheets, Notion, điều hướng bằng bàn phím, menu ngữ cảnh, kéo vùng chọn, hiệu ứng động và được xây dựng trên TypeScript
Tổng quan về React Datasheet Grid
- React Datasheet Grid là một component để tạo UI dạng bảng tính trong React
- Có các kênh cài đặt và phát hành qua NPM và GitHub
- Ví dụ sử dụng cơ bản là liên kết state của React với
valuevàonChange, rồi truyềncolumnsconst [rows, setRows] = useState([])<DataSheetGrid value={rows} onChange={setRows} columns={columns} />
Khả năng sử dụng và hiệu năng
-
Cách bắt đầu
- Chỉ cần liên kết trạng thái và cột là có thể dùng ngay
- Có tài liệu Getting started
-
Xử lý dữ liệu lớn
- DSG được tối ưu cho tốc độ và có thể xử lý hàng trăm nghìn dòng nhờ kiến trúc ảo hóa
- Việc render được tối ưu ở mức tối thiểu, và có performance guides để tiếp tục cải thiện hiệu năng
-
Tùy biến
- Có thể kiểm soát hành vi của bảng tính
- Có thể tự triển khai widget riêng
- Có thể thay đổi style của DSG để phù hợp với ứng dụng
Tính năng hỗ trợ và tài liệu
- Hỗ trợ sao chép/dán với Excel, Google Sheets và Notion
- Hỗ trợ điều hướng bằng bàn phím và phím tắt
- Hỗ trợ nhấp chuột phải và menu ngữ cảnh tùy chỉnh
- Có thể mở rộng vùng chọn bằng cách kéo ở góc
- Cung cấp hiệu ứng động mượt mà và được triển khai bằng TypeScript
- Tài liệu liên quan gồm Features, Examples, Reference
1 bình luận
Ý kiến trên Hacker News
Tôi nghĩ mục tiêu của dự án là không chạy đua tính năng mà làm sao để dễ mở rộng là một quyết định thật sự đúng đắn
Hơn 10 năm trước, tôi từng phải chọn một component data grid để dùng trong một dự án, và khách hàng muốn các tính năng “giống Excel”
Danh sách các tính năng khả dĩ mà nhà cung cấp component phải làm dài khủng khiếp; chỉ riêng các tính năng “nhỏ” lẻ tẻ thôi cũng dễ vượt quá 200, và mỗi khách hàng lại muốn một tập con khác nhau
Các component như bộ chọn ngày/giờ cũng phức tạp, nhưng kỳ vọng đặt lên grid thì ở một cấp độ hoàn toàn khác
Vì không ai có thể làm hết mọi thứ, nên quyết định để cộng đồng cùng hỗ trợ là rất sáng suốt
Tuần này tôi bắt đầu dùng nó trong một dự án, với mục đích chuyển giao diện “chỉnh sửa từng hàng bằng hộp thoại” sang chế độ chỉnh sửa bảng inline, và việc chỉnh sửa nhanh hơn rất nhiều
Những việc như dán hàng cũng làm được, và ở trạng thái mặc định nó hoạt động tốt
Tôi tự viết component cột để xử lý kiểm tra hợp lệ bằng popover cho từng ô
Có hai điểm tôi gặp phải: không có sẵn điều chỉnh kích thước cột, và tôi muốn tắt chức năng chọn hàng/cột khi nhấp vào header hoặc gutter
Tôi không chắc yêu cầu thứ hai có phổ biến đến mức nên đưa vào thư viện hay không
Việc điều chỉnh kích thước cột đã được tranh luận lâu rồi, nhưng tôi nghĩ nó đi ngược với định hướng tạo ra một công cụ đơn giản, dễ dùng
Tôi cảm thấy điều chỉnh kích thước cột theo kiểu responsive là một phương án dung hòa tốt hơn
Ý tưởng thứ hai thực ra có vẻ có thể triển khai dễ dàng
Các component kiểu DataSheetGrid giống như chén thánh của UX/UI, nhưng tôi nhớ là để có đủ mọi chi tiết thì thật sự rất phức tạp
Chúc dự án thành công và gọi được vốn
Tôi đã thấy chuyện tương tự lặp lại bất kể nền tảng nền là web hay desktop, và có ấn tượng tốt với những thứ như [1]
[1] https://www.infragistics.com/
Tất nhiên tôi không tuyên bố là mình đã phát minh ra điều gì
Cảm ơn những lời tốt đẹp, và gọi vốn cho mã nguồn mở thì không dễ
Thoạt nhìn thì có vẻ tốt, nhưng dòng hero ở phía trên cứ thay đổi liên tục, nhảy qua lại giữa 3 và 4 dòng khiến trang cứ rung lên xuống, làm cho việc đọc phần nội dung còn lại hơi khó
Xảy ra trên Firefox iOS
Xảy ra trên iOS Safari
Cũng được, nhưng thiếu một số tính năng cốt lõi của những thứ 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.
Ý tưởng tốt, hy vọng dự án sẽ xây dựng được một đối thủ mã nguồn mở đúng nghĩa cho các component độc quyền
Vì vậy những phần đó phải tự triển khai
Lý tưởng nhất là mỗi tính năng lớn sẽ có một gói npm riêng, nhưng để làm được vậy thì dự án cần nhận được nhiều sự chú ý hơn rất nhiều
DataTables giờ sao rồi? Có ai còn nhớ không? Công cụ đó vừa không hay lắm vừa được dùng khắp nơi, nên tác giả thường thu phí hỗ trợ
Tác giả đã duy trì nó hơn 10 năm với khả năng tương thích ngược hoàn hảo
Hiện giờ chúng tôi đã bọc nó bằng React, rồi sau đó viết lại bằng React, nhưng vẫn giữ nguyên API giao tiếp để khỏi phải đổi endpoint phía server
Chỉ mình tôi thấy khó chịu với cách khung focus thật sự di chuyển từ vị trí này sang vị trí khác khi nhấp vào một ô khác sao?
Khi nhấp vào một ô cách đó vài cột/hàng, rất dễ thấy khung focus màu xanh trượt sang mục tiêu mới
Google không làm như vậy
Làm tốt và nhìn đẹp, nhưng tôi ước không phải mọi thứ mới xuất hiện đều dựa trên React
Tôi có thể tìm các công cụ web mới hay ho để dùng trong dự án của mình ở đâu mà không cần đến sự phức tạp điên rồ của React?
Tôi không thích lắm kiểu cài thứ gì đó bằng npm
@nick-keller, cảm ơn vì đã tạo ra nó. Tôi biết đến nó một tháng trước và thấy khá hứa hẹn
Mặc định có chọn vùng, trong khi ở một số lựa chọn thay thế đây là tính năng trả phí, và ô cũng có thể tùy biến
Tuy nhiên ví dụ thể hiện rõ nhất có thể xây được gì với nó lại là ảnh chụp màn hình ở mục “customizable” trên landing page, chứ không có demo cho thấy điều đó thật sự làm được
Tôi gặp khó khi tạo header tùy chỉnh và menu header nên đã chuyển sang AG-Grid, còn chọn vùng thì tự triển khai
Trên iOS có vẻ không dán được vào ô, nhưng nhập thì được
Tôi tò mò không biết đây là hành vi được thiết kế như vậy hay là bug
Phiên bản desktop có dán được không?