HN Tanıtımı: Airtable tarzı React bileşeni, DataSheetGrid

React Datasheet Grid’e giriş

• React Datasheet Grid, Airtable’a benzer bir React bileşenidir ve güzel e-tablolar oluşturmayı mümkün kılar.
• Teknoloji ve ürün ekiplerinin daha kaliteli ürünleri daha hızlı yayımlamasına ve dönüşüm oranlarını iyileştirmesine yardımcı olan Tggl.io ile ortaklık.
• Kullanımı basittir; yalnızca durumu bağlamanız gereken DataSheetGrid bileşenini sunar.

Kullanım kolaylığı

• React Datasheet Grid, <input /> kullanmaktan daha kolaydır.
• useState kullanarak e-tablonun satır durumunu yönetebilir ve değiştirebilirsiniz.

Performans

• Sanallaştırma mimarisi sayesinde yüz binlerce satırı kolayca işleyebilen optimize edilmiş hız.
• Minimum render ile performans optimizasyonu; DSG’nin azami performansından yararlanmak için performans kılavuzunu izleyin.

Özelleştirme imkanı

• E-tablonun tüm davranışlarını kontrol edin, kendi widget’larınızı uygulayın ve DSG stilini uygulamanıza uygun şekilde özelleştirin.

Zengin özellikler

• Excel, Google Sheets, Notion vb. ortamlardan kopyala-yapıştır desteği.
• Klavye ile gezinme ve kısayollar için tam destek.
• Sağ tık ve özelleştirilebilir bağlam menüsü desteği.
• Seçimi genişletmek için köşe sürükleme desteği.
• Akıcı animasyonlar.
• Typescript ile geliştirilmiştir.

GN⁺’un görüşü

React Datasheet Grid’in en önemli yönleri; kullanım kolaylığı, üstün performansı, özelleştirme imkanı ve zengin özellikler sunmasıdır. Bu bileşen, geliştiricilerin e-tablo işlevlerini hızlı ve verimli biçimde hayata geçirmesine olanak tanıyarak kullanıcı deneyimini iyileştirmeye ve ürün geliştirme süresini kısaltmaya katkı sağlayabilir. Bu nedenle yazılım geliştiriciler için oldukça ilgi çekici bir araç olabilir.

[GN⁺]

Hacker News yorumları

• Projenin hedefini özellik yarışı yerine kolay genişletilebilirlik sunmaya odaklaması çok akıllıca bir karar.

  • Geçmişte, müşterilerin istediği 'Excel benzeri' özelliklere sahip bir veri grid bileşeni seçmek zorunda kaldığım projeleri hatırlatıyor. Sayısız küçük özellik vardı ve her müşterinin istediği özellik alt kümesi farklıydı.
  • Birçok bileşen karmaşık, ancak gridlerden beklenti bambaşka bir seviyede.
  • Her şeyi tek başına yapabilecek kimse yok; topluluğun yardımını almak akıllıca.

• Bu hafta projede, 'her satırı bir diyalog penceresinde düzenleme' arayüzünü satır içi tablo düzenleme moduyla değiştirip kullanmaya başladık. Kutudan çıktığı gibi gayet iyi çalıştı ve her hücre için popover kullanan doğrulama işlemlerini yöneten kendi sütun bileşenimi yazdım.

  • Sütun yeniden boyutlandırma özelliği yerleşik değil (ama kullanım için büyük bir sorun da değil).
  • Başlığa ya da köşeye tıklayarak satır veya sütun seçme özelliğini devre dışı bırakmak istedim. Bu, kütüphaneye dahil edilecek kadar genel bir ihtiyaç olmayabilir.

• DataSheetGrid bileşeni UX/UI'ın kutsal kasesi gibi görülüyor, ama tüm ayrıntıları kapsayacak şekilde yapmak gerçekten çok karmaşık. Tüm başarılar ve finansman onun olsun. İster web ister masaüstü olsun, temel platformların ötesinde aynı hikâyenin tekrarlandığını görüyorum.

• Bu bileşen güzel görünüyor ama Airtable veya MUI DataGrid'deki bazı temel özellikler eksik (sıralama/filtreleme, satır/sütun sabitleme, toplama satırı, pivot vb.).

  • Yine de iyi bir fikir ve düzgün bir OSS rakibi inşa etmede bol şans.

• İlk bakışta harika görünüyor ama sayfanın üst kısmındaki sürekli değişen kahraman metni yüzünden sayfa aşağı yukarı zıplıyor, bu da geri kalanını okumayı zorlaştırıyor. (iOS'ta Firefox'ta)

• DataTables'a ne olduğunu hatırlayan var mı? O araç berbattı ama yine de çok yaygın kullanılıyordu; yazarı da destek için ücret alıyordu.

• Başka bir hücreye tıklayınca odak dikdörtgeninin gerçekten bir yerden diğerine hareket etmesi rahatsız edici. Birkaç hücre öteye tıklayınca mavi odak dikdörtgeninin yeni hedefe doğru hızla kaydığını görebiliyorsunuz. Google bunu böyle yapmıyor.

• Bu bileşen gerçekten harika görünüyor; buna bir ay önce ihtiyacım vardı. Deneyeceğim.

• iOS'ta hücreye yapıştırma çalışmıyor ama yazı yazılabiliyor. Bu kasıtlı bir davranış mı yoksa bir hata mı? Masaüstü sürümünde yapıştırma çalışıyor mu?

• @nick-keller'a teşekkürler. Bunu bir ay önce keşfettim ve oldukça umut verici görünüyordu. Aralık seçimi varsayılan olarak mümkün (bazı alternatif çözümlerde bu bir pro özellik) ve hücreler özelleştirilebiliyor. Ama bunun gerçekten mümkün olduğunu gösteren bir demo yok; bu yüzden en iyi örnekleri sadece 'özelleştirilebilir' bölümündeki açılış sayfası ekran görüntüsünde gösteriyor. Özel başlıklar ve başlık menüleri oluşturmakta zorlandığım için AG-Grid'e geçip kendi aralık seçimimi uyguladım.