Bunu Bir JavaScript Veri Izgarasıyla Yapabilir misiniz?

Bu makale, geliştiricilere toplumumuzu ve dünyayı şekillendiren teknolojik evrimi kullanmak ve ustalaşmak için ihtiyaç duydukları araçları sağlamaya kararlı olan Progress Kendo UI'daki sevgili arkadaşlarımız tarafından desteklenmiştir. Teşekkür ederim!

Veri tabloları olarak da bilinen veri ızgaraları, kullanıcılara büyük miktarda veri sunmada çok önemlidir. Kullanıcılar, verileri anlaşılması, analiz edilmesi ve işlenmesi kolay bir şekilde görüntüleyebilmelidir. Ancak performans, hız ve kullanıcı deneyimini göz önünde bulundurarak veri ızgarası görünümleri oluşturmak özellikle göz korkutucu bir görev olabilir. Bu, özellikle onları sıfırdan oluştururken veya sınırlı işlevselliğe ve ortalamanın altında performansa sahip kitaplıkları kullanırken geçerlidir.

Veri ızgaralarını bir araya getiren kitaplık sıkıntısı yoktur. Bununla birlikte, çoğu yalnızca sınırlı bir dizi ızgara özelliği sunar; bunlar arasında ortak olan sayfalandırma, filtreleme, sıralama ve tema oluşturmadır. Diğer veri ızgara kitaplıkları, birkaç bağımlılığa dayanan sarmalayıcılar olarak oluşturulmuştur. Bu tür kitaplıklar, yerel benzerlerine kıyasla ızgaranızın performansını olumsuz yönde etkiler. Her çerçeve veya dil için yeniden oluşturulmazlar. Bu nedenle, yerel olmayan bu kitaplıklar yavaş olabilir, bir çerçevenin/dilin üstün özelliklerinden yararlanamayabilir, önemli işlevlerden yoksun olabilir ve çalışmaya başlamak için ek kurulum gerektirebilir.

Bu kitaplıkların diğer bir özelliği de zayıf kullanıcı deneyimidir. Genellikle farklı ekran boyutları ve yönelimleri için duyarlı tasarım uygulamakta başarısız olurlar, bir ızgaranın parçalarını kilitleyemez veya yapışkan hale getiremezler ve erişilebilirliği sonradan akla getiremezler. Bunun yanı sıra, yalnızca ızgaradan ayrı formlarda düzenleme sağlarlar ve bu genellikle tamamlanması gereken birden çok eylemi içerir. Bu, özellikle çok sayıda veri öğesini düzenlerken yorucu ve tekrarlayıcı olabilir. Diğerleri düzenleme bile sunmuyor. Buna ek olarak, veri dışa aktarma işlevinden yoksun olma eğilimindedirler ve kullanıcıları dışa aktarma için web sayfası yazdırmaya güvenmeye bırakırlar.

Sınırlı işlevsellikleri ve özellikleri nedeniyle, yeterli bir ızgara oluşturmak için bunları ayrı kitaplıklarla tamamlamanız gerekir. Örneğin, verilerin grafiğini çıkarmak için, ızgara kitaplığı bunu sunmayacağından farklı bir grafik kitaplığı kullanmanız gerekir. Ayrıca, destek yerleşik olmadığı için bu alakasız bileşenleri ızgaraya gömemezsiniz.

Bu sorunları çözmek için, yalnızca yerel olacak şekilde oluşturulmuş değil, aynı zamanda bir dizi tamamlayıcı bileşen içeren ve harika kullanıcı deneyimi ve performansına odaklanan bir kitaplık kullanmanız gerekir. İdeal bir veri ızgarasının özelliklerini göstermek için örnek olarak Kendo UI Veri Izgaralarını kullanacağız. Bu veri ızgaraları, Progress Kendo UI adlı bir kitaplık paketinde bulunan 100'den fazla bileşenden biridir. Paket, birkaç ön uç çerçevesi için yerel olarak oluşturulmuş dört bileşen kitaplığından oluşur. Bunlar Angular için Kendo UI, KendoReact, Vue için Kendo UI ve jQuery için Kendo UI'dir. Bu parça boyunca verilen örnekler, bu kitaplıkların dördünden de ızgaraları içerecektir.

Sorumlu tasarım

Veri ızgaraları söz konusu olduğunda, kullanıcılarınızın birlikte çalıştıkları verileri tam olarak görebilmesi gerekir. Gizlenen veya erişilmesi zor olan verileri okumak can sıkıcıdır ve kullanıcıları tamamen şebekenizden uzaklaştırır. Birçok ızgara kitaplığı ızgaralarını duyarlı hale getirmez ve stil ve biraz mantık kullanarak bunu uygulamak size kalmıştır. Bu, özellikle çok sayıda sütun içeren verilerle karmaşık olabilir. Farklı temsil ihtiyaçları olan farklı veri türlerine sahip birden fazla ızgara oluşturuyorsanız, bu karmaşıklığı daha da artırır. Kaydırma, medya sorguları, yazı tipi boyutları, ölçekleme, verilerin bazı bölümlerinin atlanıp atlanmayacağını vb. çözmeniz gerekir.

Modern veri tabloları, yönlendirmedeki değişikliklere yanıt verebilmeli ve tüm verileri tüm ekran boyutlarında iyi gösterebilmelidir. Örneğin, Kendo UI Veri Izgaraları, görüntü alanı boyutuna ve barındırdığı satır sayısına bağlı olarak boyutlarını ayarlar. Örneğin, Angular Grid'de yüksekliğini ayarlayabilirsiniz ve içeriğin bir kısmı sığmazsa ızgara kaydırılabilir hale gelecektir. Yüksekliği ayarlamak yalnızca, ızgara yüksekliği CSS özelliği için bir değer belirtmeyi ve üst öğenin ayrıca bir yükseklik ayarına sahip olmasını sağlamayı içerir. Başka bir yapılandırma gerekmez. Bunun nasıl yapıldığını buradaki bu örnek stok tablosunda görebilirsiniz.

Bunun yanı sıra, gerekli tüm verileri görüntülemeye devam ederken ızgaradaki sütunların görünürlüğünü değiştirmeyi seçebilirsiniz. Bunu, farklı ekran boyutu aralıkları için farklı sütunlar oluşturarak ve bunların nerede gösterileceğine karar vermek için bir sütundaki media özelliğini kullanarak başarabilirsiniz. Örneğin, bu Angular veri tablosunda, daha büyük ekran boyutları için ( media="(min-width: 450px)" ), sütunlar tam ekrandadır ve şöyle görünür.

Ancak, orta ekranlarda ( media="(min-width: 680px)" ) fiyatı, stokta ve üretimi durdurulan sütunları gizlemeyi seçebilirsiniz. Bu şöyle görünmelidir:

Daha küçük ekranlarda ( media="(max-width: 450px)" ), buna benzer tüm verileri göstermek için tek bir özel sütun oluşturabilirsiniz:

Kendo UI Veri Izgaraları ayrıca xs, sm, md, lg ve xl gibi Bootstrap 4 cihaz tanımlayıcılarını da destekler. Bunun kullanımı daha kolay olsa da, ekleyebileceğiniz sorgu sayısını bir ile sınırladığı için çok yönlü değildir. Örneğin, kendi kesme noktalarınızla media="(min-width: 500px) and (max-width: 1200px)" gibi bir şeye sahip olabilirsiniz. Bootstrap 4 cihaz tanımlayıcıları ile birden fazla tanımlayıcıyı birleştirmek mümkün değildir.

Erişilebilirlik Uyumluluğu

Şebekenizin modern erişilebilirlik standartlarını karşıladığından emin olmak bir öncelik olmalıdır. Bunu yapmak, engelli kişilerin şebekenizle bağlantı kurmasını sağlar ve kullanıcılarınız arasında eşitlik olmasını garanti eder. Yine de bazı kütüphaneler, ızgaralarının erişilebilir olduğundan emin olmak için hiçbir şey yapmaz. Diğerleri, erişilebilirlik açısından değerlendirildiğinde yalnızca standart altı ızgaralarla sonuçlanan minimum düzeyde çalışır. Bu şebekeleri erişilebilir hale getirmek, makul miktarda çalışmayı gerektirir. Bu, daha karmaşık ızgara tasarımları ile daha da karmaşık hale gelir. Bu çalışma daha sonra sizin ve kullanıcılarınız için işe yarayacak olsa da, bu kitaplıklar erişilebilirliği ürünlerinin temel bir parçası haline getirmiş olmalıdır.

Kendo UI Veri Izgaraları, WAI-ARIA, Bölüm 508 ve WCAG 2.1 gibi ana erişilebilirlik standartlarını destekleyerek buna öncelik verir. Örneğin, KendoReact, bileşenlerinin çoğuna tamamen erişilebilir olmasını sağlayarak ve klavye gezinmesini destekleyerek Bölüm 508 standardını takip eder. Izgarayı ve tüm yerleşik bileşenlerini klavyeyle çalıştırılabilir hale getirerek WCAG'ın Klavyeyle Erişilebilir yönergesini izler. Sonuç olarak, React Grid, AAA'nın en yüksek WCAG uygunluk düzeyine ulaşır. Bir web bileşeni olan KendoReact Data Grid, engelli kullanıcıların web sayfalarında onunla yeterince etkileşime girebilmelerini sağlamak için WAI-RAI belirtimini karşılar. Bu React veri ızgarasında, örneğin, bir klavye kullanarak farklı bileşenlere ve satırlara gidebilirsiniz.

Sanal Kaydırma

Sanal kaydırma ile, ızgara içinde yalnızca bir veri bölümü işlenir. Bu genellikle getirilecek kayıt sayısı olarak ayarlanır. Bir kullanıcı bu segmenti geçtiğinde, aynı boyutta başka bir segment oluşturulur. Bu, büyük bir veri kümesinin işlenmesi çok fazla bellek kapladığından ve şebekenizin performansını ve hızını azalttığından performansa yardımcı olur. Sanal kaydırma, performans sonuçlarından herhangi biri olmadan tüm verileri oluşturma yanılsamasını verir.

Sanal kaydırma genellikle ızgara kitaplıkları tarafından desteklenmez. Bunun yerine, büyük miktarda veri görüntülerken kullanıcılar için en iyi deneyim olmayabilecek sayfalandırmayı teşvik ederler. Muazzam veri miktarlarını işlemeye çalışırken, şebekenin performansı daha da kötü bir kullanıcı deneyimine katkıda bulunur. Sanal kaydırmayı destekleyen kitaplıklar için, kayıtların belirli bölümleri için değil, yalnızca verilerdeki kayıtlar için geçerlidir. Bu, özellikle veriler birkaç sütuna sahip olduğunda sınırlayıcıdır.

Kendo UI, hem yerel hem de uzak veriler için sanal kaydırmayı destekler. Örneğin, jQuery Grid için Kendo UI'da, bir kılavuzun scrollable.virtual özelliğini true olarak ayarlayarak bunu etkinleştirirsiniz. Bunu ayarlayarak ızgara, yalnızca ızgara veri kaynağının pageSize özelliği tarafından belirtilen sayıda öğeyi yükler. Yerel verileri kullanan bu jQuery veri kılavuzunda bunun nasıl çalıştığını görebilirsiniz.

 <!DOCTYPE html> <html> <head>...</head> <body> ... <div></div> <script> var dataSource = new kendo.data.DataSource({ pageSize: 20, ... }); $("#grid").kendoGrid({ dataSource: dataSource, scrollable: { virtual: true }, ... }); </script> </body> </html>

Bu aynı ayar, bu jQuery veri tablosunda görüldüğü gibi uzak veriler için çalışacaktır. Ek olarak, kayıtların hepsini bir kerede işlemesi maliyetli olabilecek birkaç özellik içeriyorsa, bir kılavuzun sütunlarını sanallaştırmak için benzer bir ayar kullanabilirsiniz. scrollable.virtual özelliğinin true olarak ayarlanması gerekir. Ancak, sütunların sanallaştırılması pageSize özelliğine bağlı değildir. Bu örnek, bu özelliği göstermektedir.

PDF ve Excel Dışa Aktarma

Şebekeden veri aktarma yeteneğine sahip olmak çok önemlidir. Kullanıcıların, elektronik tablolar gibi uygulamaları kullanarak dağıtması veya daha fazla manipüle etmesi gerekebilir. Kullanıcılarınız, şebekeyle sınırlı kalmadan acısız bir şekilde veri paylaşma seçeneğine sahip olmalıdır. Şebeke verileri, elektronik tablolar ve sunum yazılımlarında olduğu gibi şebekeniz tarafından sunulmayan ekstra işleme gerektirebilir.

Bu çok önemli bir kullanım durumu olmasına rağmen, pek çok kütüphanede buna yer verilmemiştir. Kullanıcılar, PDF formatındaki verilere erişmek için tüm web sayfalarını yazdırmaya başvurmak zorundadır. Verileri harici uygulamalara aktarırken, defalarca kopyalayıp yapıştırmaları gerekir. Bu anlaşılır bir şekilde oldukça sinir bozucu.

Kendo UI Veri Izgaraları, kılavuzdan iki biçimde veri aktarımı sağlar: PDF ve Excel. Örneğin, Kendo UI for Vue Data Grid'de PDF dışa aktarmalarını işlemek için GridPDFExport bileşenini kullanırsınız. save yöntemiyle, PDF dışa aktarımına dahil etmek istediğiniz verileri iletirsiniz. Veriler sayfalandırılabilir veya tam set olabilir.

 <template> <button @click="exportPDF">Export PDF</button> <pdfexport ref="gridPdfExport"> <Grid :data-items="items"></Grid> </pdfexport> </template> <script> import { GridPdfExport } from '@progress/kendo-vue-pdf'; import { Grid } from '@progress/kendo-vue-grid'; export default { components: { 'Grid': Grid, 'pdfexport': GridPdfExport }, data: function () { return { products: [], ... }; }, methods: { exportPDF: function() { (this.$refs.gridPdfExport).save(this.products); }, ... }, ... }; </script>

GridPDFExport bileşeni, dışa aktarma için sayfa boyutlarını, sayfa kenar boşluklarını, sayfadaki ızgaranın nasıl ölçekleneceğini vb. belirtmenize olanak tanır. Bu, daha büyük ızgaraları PDF sayfalarına uyacak şekilde özelleştirmek için kullanışlıdır. Bunları bileşene özellikler olarak iletirsiniz. İşte bir örnek:

 <pdfexport ref="exportPDF" :margin="'2cm'" :paper-size="'a4'" :scale="0.5"> <Grid :data-items="products"></Grid> </pdfexport>

Bir şablon kullanarak dışa aktarmayı daha fazla özelleştirmeyi seçebilirsiniz. Şablon içinde, stil ekleyebilir, üstbilgi ve altbilgi belirleyebilir, sayfanın düzenini değiştirebilir ve ona yeni öğeler ekleyebilirsiniz. Stil için CSS kullanırsınız. Şablonu yapılandırmayı tamamladığınızda, bunu GridPDFExport bileşeninin page-template özelliğini kullanarak belirtirsiniz.

Excel dosyalarını bir Kendo UI Vue Grid'den dışa aktarmak için ExcelExport bileşenini kullanırsınız. saveExcel yöntemiyle, dosya adını, ızgara verilerini, görüntülenecek sütunları vb. ona iletir ve dosyayı oluşturmak için yöntemi çağırırsınız. Bu Vue veri ızgarası, Kendo UI Vue Grid ile Excel dışa aktarmalarını nasıl gerçekleştirebileceğinizin harika bir örneğidir.

Yapışkan Sütunlar

Bir kullanıcı bir ızgarada yatay olarak kaydırdığında, bazı sütunların dondurulması veya sürekli olarak görünüm içinde olması gerekebilir. Bu sütunlar genellikle kimlikler, adlar vb. gibi önemli bilgileri içerir. Donmuş/yapışkan sütunlar her zaman görünür kalır ancak kaydırma yönünüze bağlı olarak ızgaranın sol veya sağ kenarlarına hareket edebilir veya hiç hareket etmeyebilir. Örneğin, bu Vue veri kılavuzu demosunda kimlik dondurulur ve Durdurulan sütunu yapışkandır.

Izgara kitaplıklarındaki yapışkan sütunlar nadir görülen bir durum olabilir. Mevcut değilse, sıfırdan uygulamak zor bir çaba olabilir. Başarmak için önemli bir stil gerektirecek ve çok sayıda ızgaraya ihtiyacınız varsa iyi ölçeklenmeyebilir.

Kendo UI'da yapışkan sütunların ayarlanması minimum kurulum gerektirir. Örneğin, bir Kendo UI Vue Grid'de, yapışkan hale getirmek için bir sütunun locked özelliğini true olarak ayarlamanız gerekir. Bu Vue veri tablosunda, ID ve Discontinued sütunları, locked özelliği ayarlanarak yapışkan hale getirilir. Aşağıdaki örnekte, Kimlik ve Yaş kilitlidir.

 <template> <grid :data-items="people" :columns = "columns"> </grid> </template> <script> import { Grid } from '@progress/kendo-vue-grid'; import { people } from './people' export default { components: { 'grid': Grid }, data: function () { return { people: this.getPeople(), columns: [ { field: 'ID', title: 'ID', locked: true}, { field: 'FirstName', title: 'FirstName' }, { field: 'LastName', title: 'LastName' }, { field: 'Age', title: 'Age', locked: true}, ] }; }, methods: { getPeople() { return people; } } }; </script>

düzenleme

Bir ızgaranın ana kullanım durumu, büyük miktarda veriyi görüntülemektir. Bazı kütüphaneler sadece buna bağlı kalır ve düzenlemenin gerekli olma olasılığını düşünmez. Düzenleme oldukça kullanışlı bir özellik olduğu için bu da kullanıcıları mağdur etmektedir. Kullanıcılar talep ettiğinde geliştiriciler, bireysel girişleri düzenlemek için ayrı bir sayfa oluşturmaya zorlanır. Buna ek olarak, kullanıcılar yalnızca bir formda birbiri ardına bir girişi düzenleyebilir. Bu yorucudur ve özellikle büyük miktarda veri işlenirken kötü bir kullanıcı deneyimine neden olur.

Izgara düzenleme için önemli bir kullanım durumu, toplu düzenlemeyi kolaylaştırmaktır. Büyük miktarda veriyi aynı anda değiştirmek için kullanışlıdır. Bu, verilerin silinmesini, oluşturulmasını ve güncellenmesini içerebilir.

Kendo UI Data Grids, iki biçimde düzenlemeye olanak tanır: satır içi ve açılır pencereleri kullanma. Satır içi düzenleme ile tüm veriler ızgara içinde düzenlenir. Bir hücre tıklandığında düzenlenebilir hale gelir. Bir açılır pencerede, her girişi ayrı ayrı düzenlemek için bir açılır pencere formu kullanılır. Bu Kendo UI for jQuery tablosu örneğinde, bir ızgarayı düzenlenebilir yapmak üç adımı içerir: ızgaranın düzenlenebilir yapılandırmasını ayarlama, bir veri kaynağı oluşturma ve veri kaynağında CRUD işlemlerini yapılandırma. Bu birkaç adım, toplu düzenlemenin ayarlanmasıyla ilgili karmaşıklığı azaltır. Açılır pencere düzenlemeyi yapılandırmak aynı adımları takip eder, ancak başlangıçta farklı seçenekler vardır.

Destekleyici düzenlemelere ek olarak, jQuery Grid için Kendo UI, giriş doğrulamasını sağlar. Örneğin, gerekli girdileri yapabilir veya bir minimum uzunluğu zorunlu kılabilirsiniz. Bunun yanı sıra, özel giriş kontrolleri oluşturabilirsiniz. Giriş kontrolleri sadece metin alanlarıyla sınırlı değildir. Açılır menüler, onay kutuları, tarih seçiciler, aralık kaydırıcılar vb. kullanabilirsiniz. Bunlar hem satır içi hem de açılır pencerelerde olabilir. Bu jQuery veri tablosunda, Kategori alanı bir açılır menüdür. Doğrulama da aynı örnekte gösterilmiştir. Birim fiyat alanına doğrulama uygulandı ve en düşük değerinin 1 olması sağlandı.

Tamamlayıcı Bileşenler

Çoğu ızgara kitaplığının tek bir amacı vardır: bir ızgara sağlamak. Başka hiçbir şeyle gönderilmezler, yalnızca ızgara. Sağladığı özelliklerle sınırlısınız. Izgarayı tamamlamanız gerekiyorsa, diğer kitaplıklar onunla uyumlu olmayabilir çünkü bu zor olabilir. Yani bir ızgara oluştururken sadece kütüphanenin sınırları içinde kalmanız gerekiyor.

Kendo UI bunu çözüyor çünkü yaratıcısının yaklaşımı, tek bileşenler yerine birbirleriyle kolayca entegre olan kapsamlı bir bileşen kitaplığı sunmaktır. Kılavuz, veri yönetimi, gezinme, grafik oluşturma, düzenleme, medya sunumu, sohbet kolaylaştırma vb. gibi her şeyi yapmanıza izin veren çok sayıda bileşenden oluşan bir kitaplığın parçasıdır. Bu bileşenleri, bazı ayrıntılı kurulumlar yapmak ve muhtemelen kırmak zorunda kalmadan ızgaraya gömmeyi seçebilirsiniz. Bunları entegre etmek sorunsuzdur ve minimum yapılandırma gerektirir. Örneğin bu Angular veri tablosunu ele alalım, 1 Gün sütunu, her satır için sorunsuz bir şekilde tamamen etkileşimli bir grafik yerleştirir. Çalışacağına ve tüm özelliklerinin beklendiği gibi çalıştığına güvenerek bir ızgaraya istediğiniz sayıda bileşeni gömebilirsiniz.

Çözüm

Veri ızgaralarının anlaşılması kolay, ilgi çekici, duyarlı ve erişilebilir olması gerekir. İyi performans göstermeleri ve verileri hızlı yüklemeleri gerekir. Ancak, sıfırdan bu standartları karşılayan bir veri ağı oluşturmak uzun zaman alabilir ve çok büyük bir girişim olabilir. Veri ızgara kitaplıklarını kullanmayı tercih edebilirsiniz, ancak bunlar genellikle performans için optimize edilmez, erişilebilir değildir ve yalnızca tek bir ızgara bileşeniyle gönderilir.

Kullanımı zevkli, çekici bir veri ızgarası oluşturmak, performansa odaklanan bir kitaplık gerektirir. Bunu yerel olarak oluşturarak ve sanal kaydırmayı destekleyerek yapabilir. Sağladığı veri ızgarasının duyarlı olması ve yapışkan sütunlar kullanması gerekir. Bu, kullanıcıların ekran boyutu veya yönü ne olursa olsun verileri kolayca görebilmelerini sağlar. Erişilebilirlik, şebekelerin temel kaygısı olmalıdır. Bu, tüm kullanıcıların bunları kullanırken eşit bir deneyime sahip olmasını garanti eder.

Veri tabloları, bir kullanıcının verilerle neler yapabileceğini genişletmelidir. Bu, birden çok formatta dışa aktarmayı düzenleyerek ve kolaylaştırarak başarılabilir. Bunun yanı sıra, bu kitaplıklar, kılavuzu desteklemek için diğer bileşenlerle birlikte gönderilmelidir. Bir kitaplıkta uyumlu bileşenlere sahip olmak, tek bir uygulamada birkaç farklı çakışan kitaplık kullanma ihtiyacını ortadan kaldırır. Bu özellikleri sağlayan bir veri ızgarası kitaplığı, kullanıcılarınız için çok fazla karmaşıklık olmadan harika bir ürün oluşturmanıza yardımcı olacaktır.