Photo by Marcus Dietachmair on Unsplash

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.

Table Pagination

Material UI Table Pagination bileşenini kullanacağız. Bu işlem için farklı pagination bileşenleri kullanabilir veya kendi bileşeninizi geliştirebilirsiniz.

Pagination Yapısı

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.

Pagination Yapısının Kodu

Ş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.

Page içerisinde Render Edilecek Satırların Bulunması

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store