Skip to main content
Version: 1.0.1

Ops Table Documentation

Ops Table, modern web uygulamaları için esnek ve güçlü bir tablo çözümüdür. Bu bileşen, veri yönetimi, filtreleme, sayfalama, sıralama ve daha fazlası gibi geniş kapsamlı özellikler sunar. Tasarımı ve işlevselliği, kullanıcıların kolayca özelleştirebilmesine olanak tanır.

Genel Özellikler​

Kullanılan Teknolojiler​

  • React: UI bileşenlerinin oluşturulması.
  • TypeScript: Tip güvenliği ve kod okunabilirliği.
  • Redux Toolkit: Durum yönetimi ve global state yönetimi.
  • @tanstack/react-table: Performanslı ve özelleştirilebilir tablo işlevselliği.
  • Material-UI (MUI): Modern ve özelleştirilebilir UI bileşenleri.
  • moment.js: Tarih ve saat işlemleri.
  • XLSX ve jsPDF: Verileri CSV ve PDF formatlarına dışa aktarma.
  • query-string: Query parametrelerini kolayca yönetme.

Veri Yönetimi​

  • Durum Yönetimi:
    • Redux Toolkit kullanılarak tablo durumu yönetilir.
    • opsTableSlice içerisinde filtreler, sıralama, yoğunluk ve diğer durumlar saklanır.
    • Veriler, Redux Store'da JSON formatında saklanır ve güncellenir.
  • Veri Yapısı:
    • ITableRequest ve ITableResponse arayüzleri, API'den gelen ve API'ye gönderilen veri formatını temsil eder.
    • Filtreler, query string üzerinden backend ile senkronize edilir.

Özellikler​

  1. Kolon Yönetimi:

    • Kullanıcı, kolonların görünürlüğünü ve sıralamasını kolayca ayarlayabilir.
    • Varsayılan kolon ayarları, metadata üzerinden belirlenir.

  2. Filtreleme:

    • Desteklenen filtre türleri:
      • Arasında (Between): İki değer arasındaki sonuçları döndürür.
      • Eşittir (EqualTo): Belirtilen değere tam eşit olan sonuçları döndürür.
      • Metin İçerir (Contains, StartsWith, EndsWith): Metin bazlı filtreleme sağlar.
      • Tarih Filtreleme: Tarih alanları üzerinde özelleştirilmiş filtreleme sunar.
      • Büyük/Küçük (GreaterThan, LessThan): Sayısal ve tarih alanlarını destekler.
    • Filtreler Redux Store'da saklanır ve queryString ile senkronize edilir.

  3. Sıralama:

    • Artan veya azalan sıralama yapılabilir.
    • Kolonlar üzerindeki sortable özelliği sayesinde kolay sıralama işlemleri yapılır.

  4. Yoğunluk Yönetimi:

    • Kullanıcılar, tablo yoğunluğunu Compact, Standard ve Comfortable modlarından birine ayarlayabilir.
    • Redux Store'da saklanan density durumu ile son ayarlar hatırlanır.

  5. Dışa Aktarma:

    • CSV: Tablodaki tüm veriler CSV formatında dışa aktarılabilir.
    • PDF: jsPDF kütüphanesi ile PDF formatında dışa aktarma desteği.

  6. Sayfalama:

    • Sayfa numarası ve boyutu kolayca değiştirilebilir.
    • Backend'e yapılan isteklerle senkronize edilir.

  7. API ile Entegrasyon:

    • Backend ile queryString üzerinden filtre, sıralama ve sayfalama senkronizasyonu yapılır.
    • Tüm veri işlemleri, TableService sınıfı üzerinden yönetilir.

Ops Table İç Mimarisi​

Kütüphaneler ve Araçlar​

  • @tanstack/react-table:
    • Performanslı tablo oluşturma.
    • Sütunlar ve satır seviyesinde özelleştirme.
  • Redux Toolkit:
    • opsTableSlice ile durum yönetimi.
    • Kullanıcı tercihlerini ve filtreleri saklama.
  • Material-UI:
    • Tablonun tasarımı ve kullanıcı deneyimi.
  • XLSX & jsPDF:
    • Verileri dışa aktarma.
  • query-string:
    • Filtreleri ve sayfalama verilerini query string formatında backend ile paylaşma.

Veri Akışı​

  1. Başlangıç Durumu:
    • Redux Store'da, initialTableState başlangıç durumu tanımlanır.
    • Kullanıcı tercihlerine göre tablo başlatılır.
  2. Filtreleme ve Sıralama:
    • Kullanıcı filtre eklediğinde, filtreler Redux Store'a eklenir.
    • Filtreler, query-string ile backend'e gönderilir ve sonuçlar alınır.
  3. Sayfalama:
    • Sayfa boyutu veya numarası değiştirildiğinde, onChangePage metodu backend'e yeni bir istek gönderir.
    • Kullanıcı, mevcut sayfalama durumunu UI üzerinden izleyebilir.
  4. Veri İşleme:
    • TableService sınıfı, tüm API çağrılarını ve veri işlemlerini yönetir.
    • prepareTableData metodu, backend'den gelen veriyi işleyerek UI'ye uygun hale getirir.

Backend'den Yönetilen Özellikler​

Backend'den yönetilen özellikler, tablo bileşenini daha dinamik ve özelleştirilebilir hale getirir. Bu özellikler ve ilgili props şunlardır:

  1. Filtreler:

    • Props: filterType, filterOptions
    • Açıklama: Filtre türleri (Between, EqualTo, Contains, vb.) backend tarafından sağlanır. Her filtre türü için özel ayarlar, örneğin tarih formatı veya liste seçenekleri, backend tarafından belirlenir.

  2. Kolon Özellikleri:

    • Props: visible, sortable, displayFormat
    • Açıklama: Sütunların görünürlüğü, sıralanabilirliği ve formatları backend üzerinden yönetilir. Örneğin, tarih formatları (DD/MM/YYYY), sayı formatları veya özel ikon ayarları backend'den gelir.

  3. Dil Ayarları:

    • Props: locale, translations
    • Açıklama: Backend'den gelen dil ayarları, tablo üzerindeki tüm metin ve placeholder değerlerini etkiler. Örneğin, "Sıralama" yerine "Sort" gösterilmesi backend konfigürasyonuyla belirlenir.

  4. Varsayılan Ayarlar:

    • Props: defaultPageSize, defaultSort, defaultFilters
    • Açıklama: Sayfalama, sıralama ve filtreleme gibi varsayılan ayarlar backend'den alınır. Örneğin, başlangıçta 20 öğe gösterilmesi veya belirli bir kolonun varsayılan olarak sıralanması gibi.

  5. Erişim Kontrolü:

    • Props: permissions
    • Açıklama: Kullanıcı rollerine bağlı olarak hangi özelliklerin aktif olacağı belirlenir. Örneğin, yalnızca yöneticilerin "Sil" butonuna erişebilmesi gibi durumlar backend'den gelen rol bilgisiyle kontrol edilir.

  6. Özel Görünüm ve Aksiyonlar:

    • Props: customActions, customCells
    • Açıklama: Backend'den gelen aksiyonlar ve özel hücre yapılandırmaları sayesinde, her satır için özelleştirilmiş butonlar veya içerikler gösterilebilir.

Bu döküman, Ops Table bileşenini kullanan geliştiricilere tüm özellikler ve iç işleyiş hakkında detaylı bilgi sunmaktadır. Backend'den yönetilen özellikler, tablo kullanımını daha dinamik ve özelleştirilebilir hale getirir. Her başlık için ilgili bağlantıya tıklayarak detaylı bilgilere erişebilirsiniz.

Desteklenen Özelleştirmeler​

Özelleştirilebilir Bileşenler​

  1. OpsTableProvider: Tabloyu başlatan ve konfigürasyonu sağlayan bileşen.
  2. OpsTable: Tablonun ana bileşeni.
  3. TableHeader: Tablonun başlık bölümü, sıralama ve filtreleme için etkileşim sağlar.
  4. TableBodyComponent: Tablonun gövdesi ve veri satırlarını içerir.
  5. TableFooterComponent: Sayfalama ve toplam veri sayısını gösterir.
  6. OpsTablePopovers: Filtreler, kolonlar, yoğunluk ve dışa aktarma için açılır menüler:
    • ColumnsPopover: Kolonları yönetmek için açılır menü.
    • FiltersPopover: Filtreleri düzenlemek için açılır menü.
    • DensityPopover: Yoğunluk seçeneklerini değiştirmek için açılır menü.
    • ExportPopover: Verileri dışa aktarmak için açılır menü.
    • AggregationPopover: Toplama işlemlerini yönetmek için açılır menü.
  7. OpsTableToolbar: Üst çubuk, filtreleme ve sıralama işlemlerine kolay erişim sağlar.
  8. ActionsCell: Satır seviyesinde özel aksiyon butonlarını içerir.
  9. AggregationsRow: Toplama fonksiyonlarını ve sonuçlarını gösterir.
  10. CustomTableCells: Tablodaki her bir hücre için özelleştirilmiş görünüm sunar.
  11. BodyDeleteElement: Silme işlemi için özel bir satır bileşeni.
  12. TableLoading: Yüklenme durumunu kullanıcıya gösterir.
  13. OpsTableContainerSkeleton: Tablonun yükleme sırasında gösterilen iskelet yapısı.

Dosya Listesi ve Bağlantılar​

Aşağıdaki liste, Ops Table ile ilişkili tüm dosyaları içerir. Her dosyanın detayı, ilgili bağlantıda açıklanmıştır.

Bileşenler (Components)​

Yardımcı Fonksiyonlar (Helpers)​

Hooklar (Hooks)​

Sabitler ve Enumlar​

Servisler​

Redux Yapılandırması​

Bu döküman, Ops Table bileşenini kullanan geliştiricilere tüm özellikler ve iç işleyiş hakkında detaylı bilgi sunmaktadır. Her başlık için ilgili bağlantıya tıklayarak detaylı bilgilere erişebilirsiniz.