Ops Table

Ops Table, tablo verilerini yönetmek ve görselleştirmek için kullanılan ana bileşendir. Bu bileşen, sütunların ve satırların yapılandırılmasını sağlar ve kullanıcı etkileşimlerini yönetir.

Ne İşe Yarar?

Ops Table:

• Dinamik sütunlar ve satırlarla tablo oluşturur.
• Kullanıcı etkileşimlerini (satır seçimi, sıralama, filtreleme) yönetir.
• Araç çubuğu, tablo gövdesi, başlık ve alt kısım gibi alt bileşenlerle entegre çalışır.
• Performanslı ve özelleştirilebilir tablo işlevselliği sunar.

İş Mantığı

1. Tablo Durumu Yönetimi:
   • useReactTable kullanılarak tablo durumu ve işlevleri yönetilir.
   • Seçili satır sayısı ve sayfalama gibi durumlar takip edilir.
2. Redux ile Entegrasyon:
   • tableLoading ve initialTableState gibi durumlar Redux Store üzerinden alınır.
   • Kullanıcı ayarları ve API'den gelen veriler senkronize edilir.
3. Bileşenler Arası İletişim:
   • OpsTableToolbar, TableHeader, TableBodyComponent ve TableFooterComponent alt bileşenleri kullanılarak tüm tablo parçaları birbirine bağlanır.
4. Sütun ve Satır İşlemleri:
   • Sütunlar, metadata üzerinden dinamik olarak oluşturulur.
   • Görünen sütunlar filtrelenebilir ve sıralanabilir.
5. Performans:
   • getCoreRowModel, getPaginationRowModel, getSortedRowModel, getFilteredRowModel gibi modellerle performanslı veri işleme sağlanır.

Aldığı Propslar

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

Prop	Tipi	Açıklama
opsService	IOpsTableService<any>	Tablonun verilerini yöneten servis sınıfı.
data	unknown[]	Tablo verilerini içerir.
columns	ColumnDef<unknown, any>[] veya AccessorKeyColumnDef	Tablonun sütun yapılandırmasını içerir.
actionIcons	Array<(row: Row<unknown>) => ReactNode>	Her satır için aksiyon ikonları eklemek için kullanılan bir dizi.
tableProps	ITableProps	Tablonun özelliklerini özelleştirmek için kullanılır.
customAppBar	ReactNode	Özelleştirilmiş araç çubuğu bileşeni.
onRowClick	(row: Row<unknown>) => void	Satıra tıklama olayını yönetmek için bir callback fonksiyonu.

Yönetilen Olaylar

1. Seçim Yönetimi:
   • useShowSelectionColumn hook'u kullanılarak seçim sütunu durumu yönetilir.
2. Yükleme Durumu:
   • tableLoading Redux Store'dan alınarak tablo yükleme durumu gösterilir.
3. Sıralama ve Filtreleme:
   • getSortedRowModel ve getFilteredRowModel kullanılarak veri sıralama ve filtreleme işlemleri gerçekleştirilir.
4. Sayfalama:
   • getPaginationRowModel ile sayfa değişiklikleri ve satır başına gösterim ayarları yönetilir.

İlgili Bileşenler

• TableHeader: Tablonun başlık kısmını yönetir ve sıralama işlemleri yapılır.
• TableBodyComponent: Tablonun veri satırlarını içerir ve kullanıcı tıklamalarını yönetir.
• TableFooterComponent: Sayfalama ve toplam satır sayısını yönetir.
• OpsTableToolbar: Araç çubuğu bileşeni.
• TableLoading: Tablonun yükleme durumunu gösterir.

Burada Yapılan Ana İşlemler

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

• Veri İşleme: Tabloya aktarılan data ve columns propsları, tablo yapısını ve içeriğini belirler.
• Satır Etkileşimleri: onRowClick prop'u, kullanıcıların tablo satırlarına tıkladığında tetiklenir.
• Aksiyon Butonları: actionIcons dizisi, her satıra özel aksiyon butonları eklemek için kullanılır.
• Yükleme Durumu: Tablo yüklendiğinde veya yükleme sırasında gösterilecek durumları kontrol etmek için tableLoading kullanılır.

Örnek Kullanım

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

export default function ExampleTable({ data, columns }) {
  return (
    <OpsTable
      data={data}
      columns={columns}
      actionIcons={[
        (row) => <button onClick={() => alert(`Edit ${row.id}`)}>Edit</button>,
      ]}
      tableProps={{ showEditIcon: true, showDeleteIcon: true }}
      onRowClick={(row) => console.log("Row clicked:", row)}
    />
  );
}