Custom Table Cells

Custom Table Cells, Ops Table bileşenindeki her hücrenin içeriğini dinamik olarak render eden ve uygun formatlama işlemlerini gerçekleştiren bir bileşendir. Hücredeki içerik, sütun meta bilgilerine ve hücre verilerine göre biçimlendirilir.

Ne İşe Yarar?

Custom Table Cells:

• Hücre içeriğini sütun türüne göre dinamik olarak render eder.
• Veriyi kullanıcı dostu bir şekilde formatlar.
• Geniş içeriğe sahip hücrelerde otomatik tooltip gösterimi sağlar.

İş Mantığı

1. Hücre Verisi İşleme:

   • Veri Alma: Hücrede gösterilecek veri, cell.getValue() metodu ile alınır. Bu, tablo verilerinin satır ve sütun bazında hücre seviyesine kadar parçalanmasını sağlar.
   • Sütun Meta Verisi Kullanımı: Hücredeki içeriğin nasıl görüneceği sütun meta bilgisi (metaItem) ile kontrol edilir. Bu bilgi, hücrede kullanılacak formatları, varsayılan değerleri ve tooltip ayarlarını belirler.

2. Tooltip Yönetimi:

   • İçerik Uzunluğu Kontrolü: Hücre içeriği, hücrenin boyutunu aşarsa tooltip gösterimi aktif hale gelir.
   • Dinamik Gösterim: Kullanıcı fareyle hücrenin üzerine geldiğinde içerik tooltip içinde geniş bir şekilde gösterilir. Tooltip içeriği getToolTipText fonksiyonu ile oluşturulur.

3. Tür Bazlı Formatlama:

   • Tarih Türü: Tarih içeren hücreler için getLocalizedMoment(cellValue).format("LLL") kullanılarak kullanıcı dostu bir tarih formatı uygulanır.
   • Karmaşık Veri Yapıları: Eğer hücredeki veri bir nesne (object) türündeyse, genericFormatString veya formatObject fonksiyonları ile bu veri, anlamlı bir şekilde formatlanır.
   • Varsayılan Değerler: Eğer hücrede gösterilecek veri yoksa, sütun meta bilgisinde tanımlanmış defaultValue kullanılır.
   • Özel Formatlar: Eğer sütun meta bilgisi displayFormat içeriyorsa, bu format hücre içeriğine uygulanır.

4. Dinamik Render Süreci:

   • Hücrenin render edilmesi, sütun türüne ve meta verisine göre dinamik olarak gerçekleşir.
   • Hücre içeriği direkt olarak render edilebileceği gibi, tooltip veya formatlanmış bir değer şeklinde de kullanıcıya sunulabilir.

5. Ekran Yeniden Boyutlandırma:

   • useEffect içinde tanımlanan bir event listener, pencere boyutu değişimlerinde hücrelerin tooltip durumunu dinamik olarak günceller.
   • Hücre içeriğinin sığmaması durumunda tooltip aktif hale gelir.

6. Performans Optimizasyonu:

   • Hücrelerin render edilme süreci, sadece görünür hücreler üzerinden gerçekleştirilir. Bu, büyük veri setlerinde performansı artırır.

7. Hücre Verisi İşleme:

   • Hücrede gösterilecek veri, cell.getValue() ile alınır.
   • Sütun meta verisi (metaItem) kullanılarak verinin türüne göre biçimlendirilir.

8. Tooltip Yönetimi:

   • Hücre içeriği hücre boyutundan daha büyükse, Tooltip bileşeni aktif hale gelir.
   • Kullanıcı fareyle hücrenin üzerine geldiğinde geniş içeriği görebilir.

9. Tür Bazlı Formatlama:

   • Tarih türündeki veriler moment.js kullanılarak formatlanır.
   • Karmaşık veri yapıları için genericFormatString ve formatObject yardımcı fonksiyonları kullanılır.

Aldığı Propslar

CustomTableCells aşağıdaki propsları alır:

Prop	Tipi	Açıklama
cell	Cell<unknown>	Render edilecek hücrenin tüm verisini içerir.
tableCellSize	"small" | "medium"	Hücre boyutunu tanımlar.

Yönetilen Olaylar

1. Hücre Verisi Biçimlendirme:
   • Hücre verisi, sütun türüne göre biçimlendirilir:
     • Tarih türü için: getLocalizedMoment(cellValue).format("LLL")
     • Metin veya sayı türü için: Hücre doğrudan render edilir.
2. Tooltip Gösterimi:
   • Hücre içeriği hücre boyutunu aşıyorsa, showTooltip durumu aktif hale gelir ve içerik tooltip içinde gösterilir.
3. Sütun Meta Verisi Kullanımı:
   • Hücredeki içerik, sütun meta bilgisine göre şekillendirilir:
     • Varsayılan değerler (defaultValue) kullanılır.
     • Kullanıcı tarafından belirlenen özel formatlar (displayFormat) uygulanır.

İlgili Bileşenler

• OpsTable: Hücrelerin bulunduğu ana tablo bileşeni.
• TableBodyComponent: Hücrelerin render edildiği tablo gövdesi bileşeni.

Burada Yapılan Ana İşlemler

Custom Table Cells bileşeninde aşağıdaki işlemler anahtar rol oynar ve bu olaylara müdahale etmek için ilgili bölümlere odaklanabilirsiniz:

• Veri Biçimlendirme: Hücre içeriği sütun türüne göre dinamik olarak biçimlendirilir.
• Tooltip Yönetimi: Hücre içeriği genişse kullanıcıya tooltip ile tam veri sunulur.
• Sütun Meta Verileri: Sütunlara özgü ayarlar, hücrelerin render edilme şeklini belirler.

Örnek Kullanım

import React from "react";
import CustomTableCells from "./CustomTableCells";

export default function ExampleCustomTableCells({ cell, tableCellSize }) {
  return <CustomTableCells cell={cell} tableCellSize={tableCellSize} />;
}