Columns Popover

Columns Popover, Ops Table bileşeninde kullanıcıların görünür sütunları seçmesini sağlayan bir açılır menüdür. Dinamik olarak kolon görünürlüğü kontrol edilebilir ve kullanıcı ihtiyaçlarına göre uyarlanabilir.

Ne İşe Yarar?

Columns Popover:

• Tablo sütunlarının görünürlüğünü kontrol eder.
• Kullanıcıların ihtiyaçlarına göre kolonları gizlemesine veya göstermesine olanak tanır.
• Seçim sütununun görünürlüğünü yönetir.

İş Mantığı

1. Arama Fonksiyonu:
   • Kullanıcı arama kutusuna yazı girdiğinde, sütun başlıkları filtrelenir ve yalnızca eşleşen kolonlar gösterilir.
   • searchTerm state'i ile kontrol edilir.
2. Kolon Görünürlüğü Yönetimi:
   • Kullanıcı bir sütunun görünürlüğünü değiştirdiğinde, column.toggleVisibility çağrılır.
   • Sütun görünürlük durumu dinamik olarak güncellenir.
   • Görünen kolonlar visibledColumns üzerinden hesaplanır. Bu değişken, sadece görüntülenebilir olarak işaretlenmiş kolonları filtreler ve yönetir.
3. Seçim Sütunu Kontrolü:
   • showSelectionColumn state'i üzerinden seçim sütununun görünürlüğü kontrol edilir.
4. Varsayılan Görünürlük:
   • Kullanıcı tüm ayarları sıfırlamak istediğinde table.resetColumnVisibility çağrılır.
5. Arama Fonksiyonu:
   • Kullanıcı arama kutusuna yazı girdiğinde, sütun başlıkları filtrelenir ve yalnızca eşleşen kolonlar gösterilir.
   • searchTerm state'i ile kontrol edilir.
6. Kolon Görünürlüğü Yönetimi:
   • Kullanıcı bir sütunun görünürlüğünü değiştirdiğinde, column.toggleVisibility çağrılır.
   • Sütun görünürlük durumu dinamik olarak güncellenir.
7. Seçim Sütunu Kontrolü:
   • showSelectionColumn state'i üzerinden seçim sütununun görünürlüğü kontrol edilir.
8. Varsayılan Görünürlük:
   • Kullanıcı tüm ayarları sıfırlamak istediğinde table.resetColumnVisibility çağrılır.

Aldığı Propslar

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

Prop	Tipi	Açıklama
table	Table<unknown>	Tablonun genel durumunu ve modellerini içerir.
selectionColumnVisibility	boolean	Seçim sütununun görünürlüğünü kontrol eder.

Yönetilen Olaylar

1. Arama Kutusu:
   • Kullanıcı arama kutusuna bir kelime yazdığında, searchTerm state güncellenir ve yalnızca eşleşen kolonlar gösterilir.
2. Kolon Görünürlüğü:
   • Kullanıcı bir checkbox'a tıkladığında, ilgili kolonun görünürlük durumu column.toggleVisibility ile değiştirilir.
3. Seçim Sütunu:
   • showSelectionColumn durumu, seçim sütununun görünüp görünmeyeceğini kontrol eder.
4. Varsayılan Ayarlar:
   • Kullanıcı Reset butonuna tıkladığında, tüm kolonlar varsayılan görünürlük ayarlarına döner.

İlgili Bileşenler

• OpsTablePopovers: ColumnsPopover bileşenini tetikleyen ana popover.
• OpsTableToolbar: Araç çubuğu, bu bileşeni kullanıcı etkileşimiyle açar.

Burada Yapılan Ana İşlemler

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

• Arama ve Filtreleme: Kullanıcı sütunları hızlıca bulmak için arama kutusunu kullanır.
• Kolon Görünürlük Kontrolü: column.toggleVisibility ile kolon görünürlükleri yönetilir.
• Seçim Sütunu: showSelectionColumn ile seçim sütununun durumu kontrol edilir.
• Varsayılan Ayarların Sıfırlanması: table.resetColumnVisibility tüm görünürlük ayarlarını sıfırlar.

Örnek Kullanım

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

export default function ExampleColumnsPopover({
  table,
  selectionColumnVisibility,
}) {
  return (
    <ColumnsPopover
      table={table}
      selectionColumnVisibility={selectionColumnVisibility}
    />
  );
}