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

• React Datasheet Grid, React uygulamalarına elektronik tablo benzeri bir UI eklemek için kullanılan bir bileşendir; durum ve sütun tanımlarını bağlayarak veri giriş ekranı oluşturmayı sağlar
• Temel kullanım, value, onChange ve columns değerlerini <DataSheetGrid /> bileşenine aktarmaktır; normal bir <input /> bileşenine göre daha basit bir akış hedefler
• Sanalleştirme mimarisi ve minimum render optimizasyonu sayesinde yüz binlerce satırı işleyebilir; bu da onu büyük ölçekli tablo UI'leri için uygun kılar
• Davranış, widget ve stil denetimi sunarak ürün gereksinimlerine uygun özelleştirme imkanı verir
• Excel, Google Sheets, Notion kopyala/yapıştır işlemleriyle birlikte klavye gezintisi, bağlam menüsü, seçim alanını sürükleme, animasyonlar ve TypeScript tabanlı uygulamayı destekler

---

React Datasheet Grid'e genel bakış

• React Datasheet Grid, React'te elektronik tablo UI'si oluşturmak için bir bileşendir
• Kurulum ve dağıtım kanalları olarak NPM ve GitHub sunulur
• Temel kullanım örneği, React durumunu value ve onChange ile bağlayıp columns değerini aktarma şeklindedir
  • const [rows, setRows] = useState([])
  • <DataSheetGrid value={rows} onChange={setRows} columns={columns} />

Kullanılabilirlik ve performans

• Başlangıç yöntemi

  • Durum ve sütunları bağladığınızda hemen kullanılabilen bir yapıya sahiptir
  • Belgeler içinde Getting started sunulur

• Büyük veri işleme

  • DSG hız için optimize edilmiştir ve sanalleştirme mimarisi sayesinde yüz binlerce satırı işleyebilir
  • Render işlemi minimuma indirilecek şekilde optimize edilmiştir ve performansı daha da artırmak için performance guides sunulur

• Özelleştirme

  • Elektronik tablonun davranışını kontrol edebilirsiniz
  • Kendi widget'larınızı geliştirebilirsiniz
  • DSG'nin stilini uygulamanıza uyacak şekilde değiştirebilirsiniz

Desteklenen özellikler ve belgeler

• Excel, Google Sheets ve Notion ile kopyala/yapıştır desteği sunar
• Klavye gezintisi ve kısayolları destekler
• Sağ tıklama ve özel bağlam menülerini destekler
• Köşe sürükleme ile seçim alanını genişletebilirsiniz
• Akıcı animasyonlar sunar ve TypeScript ile geliştirilmiştir
• İlgili belgeler olarak Features, Examples ve Reference sunulur

[GN⁺]

Hacker News yorumları

• Özellik yarışına girmeden kolayca genişletilebilir yapma proje hedefinin gerçekten doğru bir karar olduğunu düşünüyorum
  10 yıldan da önce bir projede kullanmak için bir veri ızgarası bileşeni seçmem gerekiyordu; müşteriler “Excel gibi” özellikler istiyordu
  Bileşen sağlayıcılarının geliştirmesi gereken olası özellikler listesi inanılmaz uzundu; “küçük” tekil özellikler bile rahatça 200’ü aşıyordu ve her müşterinin istediği alt küme farklıydı
  Tarih/saat seçici gibi bileşenler de karmaşıktır ama ızgaralara yüklenen beklenti bambaşka bir seviyede
  Kimse bunların hepsini tek başına yapamaz; bu yüzden topluluğun yardımcı olmasını sağlama kararı çok akıllıca

  • Hangi sektörde kullanılan bir proje olduğunu paylaşabilir misin, merak ettim

• Bu hafta projede kullanmaya başladım; “her satırı bir iletişim kutusunda düzenleme” arayüzünü satır içi tablo düzenleme moduna çevirmek için kullandık ve düzenleme çok daha hızlandı
  Satır yapıştırma gibi şeyler de mümkün oldu ve varsayılan hâliyle de iyi çalışıyor
  Hücre bazında popover ile doğrulama yapmak için sütun bileşenini kendim yazdım
  Karşılaştığım iki nokta vardı: yerleşik sütun boyutlandırma yok ve başlığa ya da gutter’a tıklayarak satır/sütun seçme özelliğini kapatmak istedim
  İkincisinin kütüphaneye eklenecek kadar yaygın bir istek olup olmadığından emin değilim

  • Geri bildirim için teşekkürler. DSG, temel işleri olabildiğince iyi yapan ve kullanıcıların istedikleri gibi genişletebilmesini sağlayan bir araç
    Sütun boyutlandırma uzun süredir tartışılan bir konu ama kullanımı kolay, basit bir araç yapma yönüyle çeliştiğini düşünüyorum
    Duyarlı sütun yeniden boyutlandırma daha iyi bir uzlaşma gibi geliyor
    İkinci fikir ise gerçekten kolayca uygulanabilir görünüyor
  • Sütun boyutlandırma oldukça yaygın bir özellik; muhtemelen yakında eklenir diye düşünüyorum

• DataSheetGrid tarzı bileşenler UX/UI’ın kutsal kâsesi gibi, ama tüm ayrıntılarıyla yapmak gerektiğinde gerçekten karmaşık olduğunu hatırlıyorum
  Başarı ve fon bulmanızı dilerim
  Web ya da masaüstü fark etmeksizin, temel platform ne olursa olsun aynı şeyin tekrarlandığını gördüm; [1] gibi şeylerle ilgili iyi anılarım var
  [1] https://www.infragistics.com/

  • Katılıyorum. Çok miktarda tekrarlı veri girmek için bunun en iyi UI olduğunu düşünüyorum
    Elbette bir şey icat ettiğimi iddia etmiyorum
    Güzel sözler için teşekkürler; açık kaynak fonlaması kolay değil

• İlk bakışta iyi görünüyor ama üstte durmadan değişen hero metni 3 satır ile 4 satır arasında gidip geldikçe sayfa sürekli yukarı aşağı sallanıyor; bu da geri kalan içeriği okumayı biraz zorlaştırıyor
  Firefox iOS’ta oluyor

  • Burada da aynı sorun var; sayfa rastgele yukarı aşağı zıplıyor ve bakması çok sinir bozucu
    iOS Safari’de oluyor
  • Bu sorunu bildiren herkese teşekkürler. Ben hiç karşılaşmamıştım, yakında düzelteceğim
  • Firefox iOS’ta aslında düzgün görünüyor

• Fena değil ama Airtable veya MUI DataGrid gibi şeylerin bazı temel özellikleri eksik: sıralama/filtreleme, satır/sütun sabitleme, toplama satırları, pivot vb.
  Konsept iyi; tescilli bileşenlere düzgün bir açık kaynak rakip geliştirmeye devam etmenizi umarım

  • Geri bildirim için teşekkürler. DSG özelliklerle rekabet etmek için değil, mümkün olan en iyi UX/UI ve genişletilebilirlik hedefiyle yapıldı
    Bu yüzden bu kısımları sizin uygulamanız gerekiyor
    İdeal olarak her büyük özellik için npm paketleri oluşsa güzel olurdu ama bunun için projenin çok daha fazla ilgi görmesi gerekiyor

• DataTables’a ne oldu? Hatırlayan var mı? O araç pek iyi olmadığı hâlde her yerde kullanıldığı için yazarı destek ücreti alırdı

  • Hâlâ kullanıyorum ve hâlâ gayet başarılı
    Yazarı 10 yılı aşkın süredir kusursuz geriye dönük uyumluluğu koruyarak bakımını yaptı
    Şimdi React ile sardık, sonra React ile yeniden yazdık; ama sunucu endpoint’ini değiştirmemek için iletişim API’sini aynı tuttuk
  • Neyse ki jQuery ile birlikte büyük ölçüde geride kalmış gibi görünüyor

• Başka bir hücreye tıklayınca odak dikdörtgeninin gerçekten bir konumdan diğerine hareket etme biçimi sadece bana mı rahatsız edici geliyor?
  Birkaç hücre uzaktaki bir hücreye tıklayınca mavi odak dikdörtgeninin yeni hedefe doğru kaydığı özellikle belirgin oluyor
  Google bunu böyle yapmıyor

• İyi yapılmış ve hoş görünüyor ama yeni çıkan her şeyin React tabanlı olmamasını isterdim
  React’in karmaşık çılgınlığını gerektirmeden projelerimde kullanabileceğim web için yeni ve güzel araçları nerede bulabilirim?
  npm ile bir şeyler kurma şeklini pek sevmiyorum

• @nick-keller, yaptığın için teşekkürler. Bir ay önce öğrendim ve oldukça umut vadeden göründü
  Varsayılan olarak aralık seçimi var; bazı alternatiflerde bu ücretli bir özellik, üstelik hücreleri de özelleştirebiliyorsunuz
  Ancak bununla neler yapılabileceğini en iyi gösteren örnek, landing page’deki “customizable” bölümünün ekran görüntüsü; bunun gerçekten mümkün olduğunu gösteren bir demo yok
  Özel başlık ve başlık menüsü yapmaya çalışırken zorlandım, bu yüzden AG-Grid’e geçtim ve aralık seçimini kendim uyguladım

  • Belki daha fazla örnek uygulamam gerekiyor. İnsanlara yardımcı olmanın en verimli yolu bu gibi görünüyor

• iOS’ta hücreye yapıştırma yapılamıyor, ama giriş yapılabiliyor gibi görünüyor
  Bunun kasıtlı davranış mı yoksa hata mı olduğunu merak ediyorum
  Masaüstü sürümünde yapıştırma yapılabiliyor mu?