Table elementi, fatura verilerinizi arama, filtreleme, sıralama ve Excel'e aktarma gibi gelişmiş özelliklerle satır ve sütun bazlı düzenli bir yapıda görüntülemenizi sağlar.
Uygulamalarda verileri düzenli ve anlaşılır bir tablo yapısında görüntülemeyi sağlar. Kullanıcılar bu element sayesinde satır ve sütunlar üzerinden verileri inceleyebilir, karşılaştırabilir ve yönetebilir.
Fatura Listesi senaryosu üzerinden bu elementin örnek kullanımını bu videoda inceleyeceğiz. Öncelikle ekrandaki tablo yapısını oluşturun. Ardından New SQL Action alanından InsertInvoices adındaki aksiyonu oluşturun ve tablo adının önüne dbo. yazarak doğru şema adının eklenmesini sağlayın. Test edip kaydedin. Aynı işlemi GetInvoices aksiyonu için de yapın.
UI Design modülüne geçin. Öncelikle Add Action alanından verileri getirecek Initial Action ile GetInvoices aksiyonunu bağlayın. Ardından, Table elementini sayfaya sürükleyip Styling içerisindeki Style alanını White Background olarak seçin. Table elementi seçiliyken en aşağıda yer alan Title alanını yukarı tuşuna basıp ilk sıraya alın. Sütun adını Title alanından boş bırakın. Tablo içerisindeki Table Column alanına tıklayın Styling, Layout, Align adımlarını izleyerek dikey ve yatay hizalamayı ortalayın. Table Column içerisine Image elementini sürükleyip bırakın. Styling alanından Width ve Height ayarını 32 px olarak ayarlayın. Style alanından ise Fully Rounded_Border olarak seçiminizi yapın. Diğer Title alanına basın ve No olarak alanı doldurun. TableDefaultColumn alanından beş yeni sütun daha ekleyin. Title alanı içerisine sırasıyla Date, Recipient, Status, Amount, Current yazın. Properties panelindeki DataSource alanına GetInvoices aksiyonunu tanımlayın. Tablonuzun yeteneklerini artırmak için Global Search ayarını açın. ShouldSearchOnChange özelliğini açın. Aynı şekilde Sorter, Filtering, Column Chooser ve Excel çıktısı almayı sağlayan Export özelliklerini aktif hale getirin. Image elementine tıklayın ve Properties panelindeki Field to Display alanına RecipientLogoUrl tanımlamasını yapın. Aynı şekilde Label alanlarına uygun Field to Display ve Edit Mode Component eşleştirmelerini yapın.
Benzer yapıyı daha hızlı uygulayabilmek için sol yan panelde yer alan Action Tree alanına tıklayarak GetInvoices aksiyonunu sayfaya sürükleyip bırakabilirsiniz.
Uygulama test edildiğinde, faturaların tablo yapısı içerisinde satır bazlı olarak listelendiği bir Fatura Listesi ekranı görüntülenir. Her satırın sol bölümünde ilgili firmayı temsil eden logo yer alırken; devamında sırasıyla fatura numarası, fatura tarihi, alıcı firma adı, fatura durumu, tutar ve para birimi bilgileri düzenli ve okunabilir bir şekilde sunulur.
