Export Popover

Export Popover, Ops Table bileşeninde kullanıcıların tablo verilerini CSV veya PDF formatında dışa aktarmasına olanak tanır. Kullanıcılar, bu popover aracılığıyla tablo verilerini hızlı bir şekilde indirebilir.

Ne İşe Yarar?

Export Popover:

• Tablo verilerini CSV formatında dışa aktarır.
• Tablo verilerini PDF formatında dışa aktarır.
• Kullanıcıların mevcut tablo verilerini farklı formatlarda kaydetmesine olanak sağlar.

İş Mantığı

1. CSV Dışa Aktarma:
   • Kullanıcı "Export as CSV" seçeneğine tıkladığında handleExportCSV fonksiyonu çağrılır.
   • Tablo verileri işlenir ve XLSX kütüphanesi kullanılarak bir CSV dosyası oluşturulur.
2. PDF Dışa Aktarma:
   • Kullanıcı "Export as PDF" seçeneğine tıkladığında handleExportPDF fonksiyonu çağrılır.
   • Veriler, jsPDF ve autoTable kullanılarak bir PDF dosyasına dönüştürülür.
3. Dinamik Veri İşleme:
   • Görünen sütunlar ve satırlar table.getRowModel().rows ve table.getHeaderGroups() üzerinden alınır.
   • Sütun meta bilgileri kullanılarak hücre verileri uygun şekilde biçimlendirilir.

Alt Bileşenler ve Fonksiyonlar

1. handleExportCSV

• Tablo verilerini CSV dosyasına dönüştürür.
• XLSX.utils.aoa_to_sheet ve XLSX.writeFile fonksiyonlarıyla CSV dosyası oluşturulur ve indirilir.

2. handleExportPDF

• Tablo verilerini PDF dosyasına dönüştürür.
• jsPDF ile PDF dokümanı oluşturulur, autoTable ile tablo içeriği eklenir.

3. Veri Formatlama

• Sütun meta bilgileri (metaItem) kullanılarak veri uygun şekilde biçimlendirilir:
  • Tarih alanları moment.js ile formatlanır.
  • Karmaşık veri yapıları için genericFormatString ve formatObject yardımcı fonksiyonları kullanılır.

Aldığı Propslar

Export Popover herhangi bir props almaz, table içindeki veri modelini kullanarak çalışır.

Yönetilen Olaylar

1. CSV Dışa Aktarma:

   • Kullanıcı "Export as CSV" seçeneğine tıkladığında handleExportCSV fonksiyonu çalışır.
   • İşlem sırasında:
     • Tüm satır ve sütunlar table.getRowModel().rows ve table.getHeaderGroups() üzerinden alınır.
     • Her hücredeki veri sütun meta bilgilerine göre formatlanır:
       • Tarih alanları moment.js kullanılarak formatlanır.
       • Nesne tipindeki veriler formatObject fonksiyonu ile çözülür.
     • XLSX.utils.aoa_to_sheet kullanılarak veriler bir çalışma sayfasına dönüştürülür.
     • XLSX.writeFile ile CSV dosyası oluşturulur ve kullanıcının cihazına indirilir.

2. PDF Dışa Aktarma:

   • Kullanıcı "Export as PDF" seçeneğine tıkladığında handleExportPDF fonksiyonu çalışır.
   • İşlem sırasında:
     • jsPDF kütüphanesi ile bir PDF dokümanı oluşturulur.
     • Tablo başlıkları ve gövdesi table.getHeaderGroups() ve table.getRowModel().rows üzerinden alınır.
     • autoTable fonksiyonu ile tablo içeriği PDF'ye eklenir:
       • Hücre verileri genericFormatString ve formatObject fonksiyonlarıyla işlenir.
       • Tarihler moment.js ile kullanıcı dostu bir formata dönüştürülür.
     • Oluşturulan PDF dosyası, kullanıcının cihazına kaydedilir.

3. Veri Biçimlendirme:

   • Her iki dışa aktarım işleminde de veriler formatlanır:
     • Karmaşık nesne verileri, kullanıcının belirlediği format (displayFormat) ile biçimlendirilir.
     • Eksik veriler için varsayılan değerler (defaultValue) kullanılır.
     • Tablodaki sadece görünür sütunlar işlemeye dahil edilir.

4. CSV Dışa Aktarma:

   • Kullanıcı "Export as CSV" seçeneğine tıkladığında handleExportCSV çalışır.

5. PDF Dışa Aktarma:

   • Kullanıcı "Export as PDF" seçeneğine tıkladığında handleExportPDF çalışır.

6. Veri Biçimlendirme:

   • Sütun meta bilgileri ve veriler, dışa aktarım formatına uygun hale getirilir.

İlgili Bileşenler

• OpsTablePopovers: ExportPopover bileşenini tetikleyen ana popover.
• OpsTable: Verilerin yönetildiği ve gösterildiği ana tablo bileşeni.

Burada Yapılan Ana İşlemler

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

• CSV Dışa Aktarma: handleExportCSV ile veriler CSV formatına dönüştürülür ve indirilir.
• PDF Dışa Aktarma: handleExportPDF ile veriler PDF formatına dönüştürülür ve indirilir.
• Veri Biçimlendirme: Sütun meta bilgileri kullanılarak veriler dinamik şekilde biçimlendirilir.

Örnek Kullanım

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

export default function ExampleExportPopover() {
  return <ExportPopover />;
}