Pengenalan HN: Komponen React bergaya Airtable, DataSheetGrid

 (react-datasheet-grid.netlify.app)
2 poin oleh GN⁺ 2023-11-13 | 1 komentar | Bagikan ke WhatsApp

Pengenalan React Datasheet Grid

  • React Datasheet Grid adalah komponen React mirip Airtable yang memungkinkan pembuatan spreadsheet yang indah.
  • Kemitraan dengan Tggl.io membantu tim teknis dan produk merilis produk berkualitas lebih baik dengan lebih cepat serta meningkatkan conversion rate.
  • Menyediakan komponen DataSheetGrid yang mudah digunakan; cukup hubungkan state.

Kemudahan penggunaan

  • React Datasheet Grid lebih mudah digunakan daripada <input />.
  • Menggunakan useState untuk mengelola dan mengubah state baris spreadsheet.

Performa

  • Arsitektur virtualisasi memberikan kecepatan yang dioptimalkan untuk menangani ratusan ribu baris dengan mudah.
  • Performa dioptimalkan dengan rendering minimal; ikuti panduan performa untuk memaksimalkan kinerja DSG.

Kemungkinan kustomisasi

  • Mengontrol semua perilaku spreadsheet, mengimplementasikan widget sendiri, dan menyesuaikan gaya DSG agar cocok dengan aplikasi.

Kaya fitur

  • Mendukung copy-paste dari Excel, Google Sheets, Notion, dan lainnya.
  • Dukungan penuh untuk navigasi keyboard dan shortcut.
  • Mendukung klik kanan dan menu konteks kustom.
  • Mendukung drag sudut untuk memperluas seleksi.
  • Animasi yang mulus.
  • Dibangun dengan Typescript.

Pendapat GN⁺

Yang paling penting dari React Datasheet Grid adalah kemudahan penggunaan, performa unggul, kemungkinan kustomisasi, dan beragam fitur yang ditawarkannya. Komponen ini memungkinkan developer mengimplementasikan fungsi spreadsheet dengan cepat dan efisien, sehingga dapat membantu meningkatkan pengalaman pengguna dan mempersingkat waktu pengembangan produk. Karena alasan ini, alat ini bisa menjadi sangat menarik bagi para software developer.

Bacaan terkait

1 komentar

 
GN⁺ 2023-11-13
Komentar Hacker News

  • Sangat bijak bahwa tujuan proyek ini berfokus pada penyediaan kemudahan ekstensibilitas, bukan bersaing dalam kelengkapan fitur.

    • Mengingat pengalaman di proyek sebelumnya ketika harus memilih komponen data grid dengan fitur yang "mirip Excel" sesuai keinginan klien. Ada sangat banyak fitur kecil, dan setiap klien menginginkan subset fitur yang berbeda.
    • Banyak komponen itu rumit, tetapi ekspektasi terhadap grid berada pada level yang benar-benar berbeda.
    • Tidak ada seorang pun yang bisa melakukan semuanya, jadi meminta bantuan komunitas adalah langkah yang bijak.

  • Minggu ini, kami mulai menggunakan ini di proyek dengan mengganti antarmuka "edit tiap baris dalam dialog" menjadi mode pengeditan tabel inline. Langsung bekerja dengan baik tanpa banyak pengaturan, dan saya menulis komponen kolom saya sendiri untuk menangani validasi menggunakan popover pada setiap sel.

    • Fitur pengubahan ukuran kolom tidak tersedia bawaan (meski ini bukan masalah besar untuk penggunaan saya).
    • Saya ingin bisa menonaktifkan pemilihan baris atau kolom saat mengeklik header atau gutter. Mungkin kebutuhan ini tidak cukup umum untuk diintegrasikan ke library.

  • Komponen DataSheetGrid dianggap sebagai cawan suci UX/UI, tetapi benar-benar rumit untuk mencakup semua detailnya. Semoga sukses besar dan pendanaannya lancar. Baik di web maupun desktop, saya terus melihat cerita yang sama terulang melampaui platform dasarnya.

  • Komponen ini terlihat bagus, tetapi masih kurang beberapa fitur inti seperti di Airtable atau MUI DataGrid (sorting/filtering, pinning baris/kolom, aggregate row, pivot, dan sebagainya).

    • Namun ini konsep yang bagus, dan semoga berhasil membangun pesaing OSS yang layak.

  • Sekilas terlihat keren, tetapi teks hero yang terus berubah di bagian atas halaman membuat halaman bergoyang naik-turun sehingga bagian lainnya sulit dibaca. (Di Firefox pada iOS)

  • Ada yang ingat apa yang terjadi dengan DataTables? Alat itu jelek tetapi sangat banyak dipakai, sampai penulisnya mulai mengenakan biaya untuk dukungan.

  • Saya terganggu dengan cara kotak fokus benar-benar bergerak dari satu tempat ke tempat lain saat mengklik sel lain. Jika mengeklik beberapa sel jauhnya, kita bisa melihat kotak fokus biru bergerak cepat ke target baru. Google tidak melakukan ini.

  • Komponen ini terlihat sangat keren, dan saya membutuhkannya sebulan lalu. Saya akan mencobanya.

  • Di iOS, tidak bisa paste ke dalam sel, tetapi mengetik tetap bisa. Apakah ini memang perilaku yang diinginkan atau sebuah bug? Apakah paste berfungsi di versi desktop?

  • Terima kasih kepada @nick-keller. Saya menemukan ini sebulan lalu, dan ini terlihat sangat menjanjikan. Pemilihan rentang tersedia secara bawaan (sementara di beberapa solusi alternatif itu adalah fitur pro), dan selnya bisa dikustomisasi. Namun tidak ada demo yang menunjukkan bahwa itu benar-benar mungkin, jadi contoh terbaiknya hanya ditampilkan sebagai screenshot di landing page bagian "dapat dikustomisasi". Saya kesulitan membuat header kustom dan menu header, lalu pindah ke AG-Grid dan mengimplementasikan pemilihan rentang sendiri.