Table Body Component

Table Body Component, Ops Table bileşeninin gövde kısmını yönetir. Tablo satırlarını ve her satırdaki hücreleri render eder, aynı zamanda satır seviyesindeki kullanıcı etkileşimlerini kontrol eder.

Ne İşe Yarar?

Table Body Component:

• Tablo satırlarını ve hücrelerini dinamik olarak render eder.
• Seçim, silme ve düzenleme gibi satır seviyesindeki işlemleri yönetir.
• Yüklenme durumunda iskelet yapısı gösterebilir.

İş Mantığı

1. Satır Yükseklik Yönetimi:
   • rowHeigh ve yoğunluk (density) durumuna göre satır yüksekliği ayarlanır.
   • DensityEnums kullanılarak Compact, Standard ve Comfortable modları desteklenir.
2. Satır Etkileşimleri:
   • Kullanıcı satıra tıkladığında onRowClick callback'i tetiklenir.
   • Silme işlemleri için handleDeleteIconClick ve handleCancelDelete metotları yönetilir.
3. Seçim Yönetimi:
   • useShowSelectionColumn hook'u kullanılarak seçim sütunu durumu yönetilir.
4. Filtrelenmiş veya Boş Veri Durumu:
   • Eğer tablo verisi boşsa, NotFoundComponent gösterilir.

Aldığı Propslar

ITableBodyProps arayüzünden alınan propslar şunlardır:

Prop	Tipi	Açıklama
table	Table<unknown>	Tablonun genel durumunu ve modellerini içerir.
opsService	IOpsTableService<any>	Tablonun veri işlemlerini yöneten servis sınıfı.
actionIcons	Array<(row) => ReactNode>	Her satır için özel aksiyon ikonları eklemek için kullanılır.
tableProps	ITableProps	Tablonun genel özelliklerini içerir.
onRowClick	(row: Row<unknown>) => void	Satıra tıklama olayını yönetmek için bir callback fonksiyonu.

Yönetilen Olaylar

1. Seçim ve Silme İşlemleri:
   • Satır Seçimi: Kullanıcı bir satırı seçtiğinde seçim sütunu aktif hale gelir ve ilgili checkbox işaretlenir.
   • Satır Silme: handleDeleteIconClick metodu, kullanıcı silme ikonuna tıkladığında tetiklenir ve seçilen satır silinmeye hazır duruma gelir.
   • Silme İşlemi İptali: handleCancelDelete metodu, kullanıcı silme işlemini iptal etmek istediğinde çalışır ve satır eski haline döner.
2. Satır Tıklama:
   • Kullanıcı herhangi bir satıra tıkladığında onRowClick callback'i çalışır. Bu, kullanıcı tarafından yapılan seçimlerin veya işlemlerin uygulama tarafında işlenmesini sağlar.
3. Veri Durumu Kontrolü:
   • Tablo verisi boş olduğunda table.getRowModel().rows kontrol edilir ve veri bulunmadığında NotFoundComponent gösterilir. Bu, kullanıcıya uygun bir mesaj sunar.

İlgili Bileşenler

• ActionsCell: Satır seviyesinde aksiyon butonlarını yönetir.
• BodyDeleteElement: Silme işlemleri için kullanılan özel bir satır bileşeni.
• CustomTableCells: Hücre içeriğini dinamik olarak render eder.
• NotFoundComponent: Tabloda veri bulunmadığında gösterilen bileşen.

Burada Yapılan Ana İşlemler

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

• Satır Seçimi ve Silme: Kullanıcıların satır seçimi ve silme işlemleri bu bileşende kontrol edilir.
• Satır Tıklama: onRowClick ile satırlara tıklama olayları yönetilir.
• Veri Durumu Kontrolü: Tablo boş olduğunda uygun bir kullanıcı mesajı (NotFoundComponent) görüntülenir.

Örnek Kullanım

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

export default function ExampleBody({ table, opsService, tableProps }) {
  return (
    <TableBodyComponent
      table={table}
      opsService={opsService}
      tableProps={tableProps}
      onRowClick={(row) => console.log("Row clicked:", row)}
    />
  );
}