REACT UI MECHANICS
React ile Admin Tool Geliştirelim — Table Pagination Ekleyelim.
React UI Mekanikleri konusunda önceki yazı serisini içerikleri kapsayacak bir senaryo geliştirmeye karar verdim. Bu konuda bir eTicaret sitesinin yönetiminde kullanılacak bir araç tasarlamaya çalışacağız.
Admin Tool ilgili aşağıdaki önceki yazılarda Login ve CRUD mekanizmalarına bakmıştık.
Bugünkü konumuz ProductTable içerisinde pagination yapısı. Özellikle belli bir eleman sayısından sonra tüm satırları aynı ekranda scroll yapısı ile göstermek kullanımı çok zorlayabilmektedir. Pagination yapısı sayesinde tablo kullanımı oldukça basit bir hale gelebilmektedir. Son sayfaya veya sayfalar arası hızlı ilerleyerek erişmek istediği row elemanına daha rahat bir şekilde erişebilir.
Material UI Table Pagination bileşenini kullanacağız. Bu işlem için farklı pagination bileşenleri kullanabilir veya kendi bileşeninizi geliştirebilirsiniz.
Burada yapmamız gereken Rows Per Page sayfada tabloda bulunacak row sayısını belirtiliyor. [2,5,10] seçenekleri bulunuyor. 1–2 of 8 ise toplam eleman sayısının 8 olduğu bu sayfada 1–2 arasında değerlerin gösterildiğini anlatıyor < > ise bir sonraki ve bir önceki sayfaya geçişi sağlar.
Table Pagination önemli konu PageNo değişikliği ve sayfada gösterilen Row sayısındaki değişikliği state olarak tumak.
Şimdi geldi ekranda render edilecek row kısımlarını belirlemeye.. Bunu da ilgili sayfa numarası ve sayfada render edilecek row üzerinden ufak bir matematik işlemi ile bulabiliriz.
GitHub Kod Örneği
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
