Table Header

Table Header, Ops Table bileşeninin başlık kısmını yönetir. Kullanıcıların tabloyu sıralayabilmesi ve başlık üzerinde ek bilgi alabilmesi için tasarlanmıştır.

Ne İşe Yarar?

Table Header:

• Tablonun tüm sütun başlıklarını render eder.
• Sıralama işlemleri için kullanıcı etkileşimlerini yönetir.
• Görünür sütunları dinamik olarak ayarlar.
• Tablonun üst kısmında seçim sütunu veya aksiyon sütunlarını dinamik olarak ekler.

İş Mantığı

1. Sıralama Yönetimi:
   • handleSort fonksiyonu ile kullanıcı tıklamaları sıralama olaylarına dönüştürülür.
   • Sıralama durumu sortingValue ile kontrol edilir ve opsService.handleSort aracılığıyla backend'e iletilir.
2. Kolon Görünürlüğü:
   • Sadece görünür olan sütunlar (columnVisibility) render edilir.
   • Sütun meta bilgileri kullanılarak başlık ve tooltip içerikleri oluşturulur.
3. Seçim Sütunu Yönetimi:
   • useShowSelectionColumn hook'u ile seçim sütunu eklenir ve yönetilir.
   • showSelectionColumn durumu ile başlık kısmında seçim sütunu dinamik olarak gösterilir.
4. Arka Plan Rengi:
   • headerBackgroundColor prop'u üzerinden başlıkların arka plan rengi özelleştirilebilir.
5. Aksiyon Sütunları:
   • Eğer actionIcons tanımlandıysa, başlık kısmında aksiyon sütunları da dinamik olarak eklenir.

Aldığı Propslar

ITableHeaderProps 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ı.
tableProps	ITableProps	Tablonun genel özelliklerini içerir.
actionIcons	Array<(row) => ReactNode>	Her satır için özel aksiyon ikonları eklemek için kullanılır.

Yönetilen Olaylar

1. Sıralama:
   • Kullanıcı bir sütun başlığına tıkladığında handleSort çalışır ve sıralama türü (Asc veya Desc) değiştirilir.
2. Görünürlük Yönetimi:
   • Sütunlar columnVisibility durumuna göre dinamik olarak render edilir.
3. Tooltip Bilgisi:
   • Sütun başlıkları üzerinde ek bilgi göstermek için meta.info kullanılır.
4. Seçim ve Aksiyon Sütunları:
   • showSelectionColumn durumu aktifse seçim sütunu başlık kısmında gösterilir.
   • Eğer actionIcons tanımlıysa, başlık kısmında aksiyon sütunu oluşturulur.
5. Arka Plan Rengi:
   • headerBackgroundColor ile başlıkların arka plan rengi özelleştirilir.

İlgili Bileşenler

• OpsTable: Tablonun ana bileşeni.
• OpsTablePopovers: Kolon görünürlüğü ve filtreler gibi ayarları yönetir.

Burada Yapılan Ana İşlemler

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

• Sıralama Yönetimi: Kullanıcı etkileşimleri handleSort fonksiyonu ile sıralama işlemlerine dönüştürülür.
• Kolon Meta Verileri: Tooltip ve görünürlük gibi özellikler sütun meta bilgilerinden alınır.
• Seçim Sütunu: Seçim sütunu durumu useShowSelectionColumn ile yönetilir.
• Arka Plan Rengi: headerBackgroundColor ile başlıkların görsel tasarımı özelleştirilir.
• Aksiyon Sütunları: actionIcons prop'u tanımlıysa başlık kısmına aksiyon sütunları eklenir.

Örnek Kullanım

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

export default function ExampleHeader({ table, opsService, tableProps }) {
  return (
    <TableHeader
      table={table}
      opsService={opsService}
      tableProps={tableProps}
    />
  );
}