Pengenalan HN: Komponen React bergaya Airtable, DataSheetGrid

• React Datasheet Grid adalah komponen untuk menambahkan UI bergaya spreadsheet ke aplikasi React, sehingga layar input data dapat dibangun dengan menghubungkan state dan definisi kolom
• Penggunaan dasarnya adalah meneruskan value, onChange, dan columns ke <DataSheetGrid />, dengan alur yang ditujukan lebih sederhana daripada <input /> biasa
• Dengan arsitektur virtualisasi dan optimasi rendering minimal, komponen ini dapat menangani ratusan ribu baris sehingga cocok untuk UI tabel skala besar
• Perilaku, widget, dan gaya dapat dikendalikan sehingga memungkinkan kustomisasi sesuai kebutuhan produk
• Mendukung salin/tempel dari Excel, Google Sheets, dan Notion, serta navigasi keyboard, menu konteks, drag area pilihan, animasi, dan implementasi berbasis TypeScript

---

Gambaran umum React Datasheet Grid

• React Datasheet Grid adalah komponen untuk membangun UI spreadsheet di React
• Tersedia kanal instalasi dan distribusi melalui NPM dan GitHub
• Contoh penggunaan dasarnya adalah menghubungkan state React ke value dan onChange, lalu meneruskan columns
  • const [rows, setRows] = useState([])
  • <DataSheetGrid value={rows} onChange={setRows} columns={columns} />

Kemudahan penggunaan dan performa

• Cara memulai

  • Strukturnya bisa langsung digunakan cukup dengan menghubungkan state dan kolom
  • Dokumentasi Getting started tersedia

• Penanganan data besar

  • DSG dioptimalkan untuk kecepatan, dan berkat arsitektur virtualisasi, dapat memproses ratusan ribu baris
  • Rendering dioptimalkan seminimal mungkin, dan tersedia performance guides untuk mendorong performa lebih jauh

• Kustomisasi

  • Perilaku spreadsheet dapat dikendalikan
  • Dapat mengimplementasikan widget sendiri
  • Gaya DSG dapat diubah agar sesuai dengan aplikasi

Fitur yang didukung dan dokumentasi

• Mendukung salin/tempel dengan Excel, Google Sheets, dan Notion
• Mendukung navigasi keyboard dan shortcut
• Mendukung klik kanan dan menu konteks kustom
• Area pilihan dapat diperluas dengan drag dari sudut
• Menyediakan animasi yang halus dan diimplementasikan dengan TypeScript
• Dokumentasi terkait yang tersedia meliputi Features, Examples, dan Reference

[GN⁺]

Komentar di Hacker News

• Menurut saya tujuan proyek untuk tidak bersaing soal fitur, melainkan membuatnya mudah diperluas, benar-benar keputusan yang tepat
  Lebih dari 10 tahun lalu, saya harus memilih komponen data grid untuk dipakai di sebuah proyek, dan pelanggan menginginkan fitur yang “seperti Excel”
  Daftar fitur yang mungkin harus dibuat vendor komponen sangat panjang, dan fitur-fitur individual yang “kecil” saja dengan mudah melampaui 200, sementara tiap pelanggan menginginkan subset yang berbeda
  Komponen seperti pemilih tanggal/waktu juga rumit, tetapi ekspektasi terhadap grid berada di level yang sama sekali berbeda
  Tidak ada yang bisa melakukan semuanya, jadi keputusan untuk membiarkan komunitas membantu itu sangat bijak

  • Saya penasaran, apakah bisa berbagi proyek itu digunakan di industri apa?

• Minggu ini saya mulai memakainya di sebuah proyek, untuk mengubah antarmuka “edit tiap baris lewat dialog” menjadi mode pengeditan tabel inline, dan proses edit jadi jauh lebih cepat
  Hal seperti menempelkan baris juga jadi memungkinkan, dan dalam kondisi default pun bekerja dengan baik
  Saya menulis sendiri komponen kolom untuk menangani validasi lewat popover per sel
  Ada dua hal yang saya temui: tidak ada pengubahan ukuran kolom bawaan, dan saya ingin mematikan fitur memilih baris/kolom saat mengklik header atau gutter
  Untuk yang kedua, saya tidak terlalu yakin apakah itu kebutuhan yang cukup umum untuk dimasukkan ke library

  • Terima kasih atas masukannya. DSG adalah alat yang dibuat agar melakukan hal-hal dasar sebaik mungkin, dan memungkinkan pengguna memperluasnya sesuai keinginan
    Pengubahan ukuran kolom sudah lama diperdebatkan, tetapi menurut saya itu bertentangan dengan arah membuat alat yang sederhana dan mudah dipakai
    Saya merasa pengaturan ukuran kolom yang responsif adalah kompromi yang lebih baik
    Ide kedua sepertinya memang bisa diimplementasikan dengan mudah
  • Pengubahan ukuran kolom adalah fitur yang cukup umum, jadi mungkin akan segera ditambahkan

• Komponen seperti DataSheetGrid terasa seperti cawan suci UX/UI, tetapi saya ingat itu benar-benar rumit jika ingin melengkapi semua detailnya
  Semoga sukses dan mendapatkan pendanaan
  Saya melihat hal yang sama berulang terlepas dari platform dasarnya, baik web maupun desktop, dan punya kenangan baik dengan sesuatu seperti [1]
  [1] https://www.infragistics.com/

  • Setuju. Untuk memasukkan banyak data berulang, menurut saya ini UI terbaik
    Tentu saja saya tidak mengklaim telah menciptakan sesuatu
    Terima kasih atas kata-kata baiknya, dan pendanaan open source memang tidak mudah

• Sekilas terlihat bagus, tetapi teks hero di bagian atas yang terus berubah tanpa henti bolak-balik antara 3 dan 4 baris, sehingga halaman terus bergoyang naik-turun dan agak sulit membaca konten lainnya
  Ini terjadi di Firefox iOS

  • Di sini juga ada masalah yang sama, halamannya melompat-lompat naik-turun secara acak sehingga sangat menyebalkan untuk dilihat
    Terjadi di iOS Safari
  • Terima kasih kepada semua yang memberi tahu soal masalah ini. Saya belum pernah mengalaminya sendiri, dan akan segera memperbaikinya
  • Di Firefox iOS sebenarnya terlihat baik-baik saja

• Lumayan, tetapi beberapa fitur inti dari hal-hal seperti Airtable atau MUI DataGrid tidak ada: pengurutan/filtering, pin baris/kolom, baris agregasi, pivot, dll.
  Konsepnya bagus, dan semoga bisa terus membangun pesaing open source yang layak untuk komponen proprietary

  • Terima kasih atas masukannya. DSG tidak dibuat untuk bersaing lewat fitur, melainkan menargetkan UX/UI dan ekstensibilitas terbaik yang mungkin
    Jadi bagian-bagian seperti itu harus diimplementasikan sendiri
    Idealnya akan bagus jika ada paket npm untuk tiap fitur besar, tetapi agar itu terjadi proyek ini perlu mendapat jauh lebih banyak perhatian

• Apa kabar DataTables? Ada yang masih ingat? Karena alat itu kurang bagus tapi dipakai di mana-mana, pembuatnya dulu bisa menerima bayaran untuk dukungan

  • Masih memakainya, dan masih cukup hebat
    Pembuatnya telah memeliharanya selama lebih dari 10 tahun dengan kompatibilitas mundur yang sempurna
    Sekarang kami membungkusnya dengan React, lalu menulis ulang dengan React, tetapi API komunikasinya tetap dipertahankan agar tidak perlu mengubah endpoint server
  • Untungnya tampaknya sebagian besar sudah tersingkir bersama jQuery

• Apakah hanya saya yang terganggu oleh cara kotak fokus benar-benar bergerak dari satu posisi ke posisi lain saat mengklik sel lain?
  Jika mengklik sel yang berjarak beberapa kotak, kotak fokus biru terlihat jelas meluncur ke target baru
  Google tidak melakukannya seperti ini

• Dibuat dengan baik dan tampak bagus, tetapi saya berharap tidak semua hal baru itu berbasis React
  Di mana saya bisa menemukan alat web baru yang keren untuk dipakai di proyek saya tanpa harus membutuhkan kegilaan kompleks React?
  Saya kurang suka cara memasang sesuatu lewat npm

• @nick-keller, terima kasih sudah membuatnya. Saya mengetahuinya sebulan lalu dan terlihat cukup menjanjikan
  Secara default sudah ada pemilihan rentang, yang pada beberapa alternatif merupakan fitur berbayar, dan selnya juga bisa dikustomisasi
  Namun contoh yang paling baik menunjukkan apa yang bisa dibuat dengan ini adalah tangkapan layar bagian “customizable” di landing page, sementara tidak ada demo bahwa itu benar-benar mungkin
  Saya kesulitan membuat header kustom dan menu header, jadi pindah ke AG-Grid, dan mengimplementasikan sendiri pemilihan rentang

  • Mungkin saya perlu mengimplementasikan lebih banyak contoh. Sepertinya itu cara paling efisien untuk membantu orang

• Di iOS sepertinya tidak bisa menempelkan ke sel, tetapi input bisa dilakukan
  Saya penasaran apakah ini perilaku yang disengaja atau bug
  Apakah menempelkan bisa dilakukan di versi desktop?