Table elementi; faturaları No, Date, Recipient, Status, Amount sütunlarıyla düzenli biçimde listeler. Kullanıcı; sıralama, arama, filtreleme, sayfalama, dışa aktarma ve (isteğe bağlı) satır içi düzenleme ile faturaları yönetir.

Table elementi web ve mobil uygulamalarda desteklenir. Mobilde responsive tablo desteği vardır.

Fatura Yönetimi Senaryosu

Bir finans veya abonelik uygulamasında, kullanıcıların son faturalarını takip edebilmesi için Table elementi kullanılır. Tabloda; fatura numarası (No), fatura tarihi (Date), alıcı firma veya hizmet sağlayıcı (Recipient), fatura durumu (Status) ve tutar bilgisi (Amount) düzenli biçimde listelenir.

Veri Kaynağı Bağlama

• Datasources modülüne gidin. 
• Ardından Tables başlığı yanındaki + ikonuna tıklayın ve tabloya Invoices ismini verin. 
• Aşağıdaki tabloyu oluşturun.

• Ardından SQL Actions’a tıklayın ve aksiyona Invoices ismini verin. C# ile de oluşturabilirsiniz.
• Aşağıdaki SQL komutunu girin. 

SELECT 'AXZ-177' AS InvoiceNo, CAST('2022-06-07' AS DATE) AS InvoiceDate,       'Figma Inc.' AS RecipientName, 'https://cdn.example.com/logo/figma.png' AS RecipientLogoUrl,       'Paid' AS Status, 351.02 AS Amount, 'USD' AS CurrencyUNION ALLSELECT 'AXZ-922','2022-06-05','Dribbble','https://cdn.example.com/logo/dribbble.png','Overdue',710.68,'USD'UNION ALLSELECT 'AXZ-703','2022-06-04','Youtube','https://cdn.example.com/logo/youtube.png','Paid',778.35,'USD'UNION ALLSELECT 'AXZ-883','2022-06-02','Spotify','https://cdn.example.com/logo/spotify.png','Overdue',490.51,'USD'UNION ALLSELECT 'AXZ-798','2022-06-02','Discord','https://cdn.example.com/logo/discord.png','Paid',275.43,'USD'UNION ALLSELECT 'AXZ-154','2022-06-01','Github','https://cdn.example.com/logo/github.png','Paid',105.55,'USD';

UI Design Modülü işlemleri

• Uygulama ekranında sağ kenarda bulunan Add Action butonuna tıklayın. 
• Ardından Custom > Invoices’ı seçin. 

Özelliklerin Senaryo Bağlamında Kullanılması

 Genel

• Datasource: Veri kaynağı (Invoices).
• ShowHeader: Açık → Başlık satırları görünsün.
• Fixed Header: Açık → Kaydırınca başlık sabit kalsın.
• Editable: Kapalı → Sadece görüntüleme.
• Editable Always Active: Açık ise her hücre her zaman edit modunda olur.
• Table Width Mode: Content (dar tablolar için), Full (geniş ekran için).

Arama ve Filtreleme

(Yalnızca web’de)

• GlobalSearch: Tüm tabloda arama (örn. “Spotify” → ilgili satırı bulur).
• Searchable: Sağ üst köşede arama kutusu çıkar.
• Should Search OnChange: Yazdıkça filtreler.
• SearchDelay: 300–500 ms önerilir.
• Filtering: Kolon bazlı filtre.
  
  • String: contains, equals, begins with
  • Number: >, <, =
  • Date: between, after, before
  • Örn: Status = Paid → sadece ödenmiş faturalar görünür.
• Multi Filter: Birden fazla koşul eklenebilir.
  
  • Örn: Amount > 500 AND Status = Overdue.

Sıralama (Sorter)

• Sorter: Açık → kolon başlıklarına tıklayınca artan/azalan sıralama.
  
  • Örn: “Amount” artan → en düşükten yükseğe fatura tutarları.
• SpecialSortingFormat: Tarihler için tarih, sayılar için numerik sıralama.

Sayfalama (Pagination)

• Pagination: Aktif.
• PageSize: 10.
• Show Size Changer: Kullanıcı 10/20/50 satır seçebilir.
• Size Changer Options: [10, 20, 50].

Görünüm ve Etkileşim

• ColumnChooser: Kullanıcı hangi kolonları görmek istediğini seçebilir.
• Resizable Columns: Kolon genişliği değiştirilebilir.
• HideTableOnEmpty: Veri yoksa tabloyu gizler.
• ShowNoDataFound: Açık → “No invoices found” mesajı.
• NoDataFoundMessage / Image: Mesaj ve resim özelleştirilebilir.
• Striped: Satırlar çizgili arka planla görünür.
• StripedColor: Çizgi rengi.
• RowHoverBgColor: Hover’da satır rengi değişir.
• Selected Row Color: Seçili satır rengi.
• MultiSelect: Aynı anda birden fazla satır seçilebilir.
• MultiSelect Scope: Satır / hücre / kolon bazlı seçim.
• Selected Values: Seçilen satırların değerlerini döndürür.
  
  

Dışa Aktarma

• Export: Açık → Excel/CSV’ye dışa aktar.
• Exclude From Export: Örn. Logo kolonunu hariç tut.

Columns Özellikleri

• Title: Kullanıcıya görünen kolon adı (örn. “Amount”)
• Second Title: Alt başlık (örn. “USD”).
• Default Data Field: Kolonun bağlı olduğu veri.
• Group: Kolonları gruplama (örn. “Invoice Info”, “Payment Info”).
• Group Bg Color / Font Color: Grup başlığı renkleri.
• Title Bg Color: Başlık arka planı.
• Always Visible On Mobile: Mobilde kritik kolonlar hep görünür.
• Hide Filtering / Sorting / Search: İlgili kolonda kapatılabilir.
• Footer Options: Sum, Avg vb. hesaplar.
  
  • Örn: “Amount” altında toplam fatura tutarı.
• FooterFormatter / OptionLabel: Alt bilgi metni.
• Fixed: Kolonu sabitle (örn. No kolonu hep solda).
• Placeholder: Düzenlenebilir hücrede boşken yazı.

Title Özellikleri

• Hide on Mobile: Mobilde başlık gizlenebilir.
• TextDirection: LTR / RTL.

Inline Grid 

• EditableTableColumn ekleyin.
• İçindeki Label → Status alanına bağlayın.
• EditMode Component: Selectbox (Paid, Overdue).
• On Row Edit Finished:
  
  • Save Record → veritabanına güncelle.
  • Ardından listeleme Action’ını çağır → tablo yenilensin.

Hover Efekti

• RowHoverBgColor → hover’da satır rengi değişsin.

Tablo Konfigürasyonu Yönetimi

Sağ kenardaki Properties paneli +ADD ACTION butonundan aşağıdaki işlemleri yapabilirsiniz. 

• Export Table Configs: Kullanıcı tablo ayarlarını (filtre, kolon) dışa aktarır.
• Import Table Configs: Önceden kaydedilen tablo ayarlarını yükler.
• Clear Table Filtering Configs: Filtreleri sıfırlar.
• Reset Table Configs: Tüm tablo ayarlarını varsayılan yapar. JSON çıktıları TableConfig tablosuna kaydedilebilir (Id, Json kolonları).

Master–Detail 

• Master tablo: Invoice listesi.
• Detail tablo: Seçilen faturanın ödeme detayları.
• Datasource: Master’dan gelen nested liste.
• SQL veya Custom C# ile desteklenebilir.

Senaryo Adımı Tamamlandığında

• Kullanıcı faturaları tablo üzerinden görür.
• Search, filter, sort, pagination aktif.
• Status → Paid (yeşil), Overdue (kırmızı).
• Footer’da toplam fatura tutarı.
• Export ile Excel/CSV alınabilir.
• (Opsiyonel) Inline Grid ile Status düzenlenebilir.

Kısıtlamalar

• Arama/filtreleme/sıralama sadece web’de.
• Büyük veri → performans düşebilir.
• Mobilde çok kolon → okunabilirlik sorunu.

İpuçları ve Best Practices

• Kritik kolonları Always Visible On Mobile yapın.
• Logo gibi görselleri Exclude From Export yapın.
• Hover ve Striped satırlar okunabilirliği artırır.
• Filtreler üç harften sonra çalışır → performans için.
• Export/Import Config ile kullanıcıya kişisel tablo şablonu sunun.