REACT UI MECHANICS

React ile Admin Tool Geliştirelim — Table Sort ve Search

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, CRUD ve Pagination mekanizmalarına bakmıştık.

Bu yazımızda Pagination üzerinde etkili Table (Tablo) kullanımını kolaylaştıran Sorting (Sıralama) ve Search (Arama) kavramlarının pagination işlemine etkilerini analiz edip uygulamamızı bu konuda biraz daha geliştireceğiz.

ARAMA (SEARCH)

Önce Search kısmını yapalım..

SearchField

Bu kısımda bir TextField ekleyeceğiz ve Pagination öncesinde gelen Product Listesi filtreleyip daha sonrasında Pagination işlemine sokacağız.

Search Operation → Pagination Operation

Tablodaki Product listesi belli bir sınırdayken Client Side Search normal çalışır ama bu sayıların çok olduğu veya kayıtların çok fazla olduğu Server Side Search yaparken bu kısımda performans problemleri yaşabilirsiniz. Çünkü her bir klavye düğmesine basmanız Main UI Thread kilitleyeceği için ekranınızda bir takım takılmalar yaşarsınız.

Örneğin Dan Abramov bu performans ile ilgili klavye ile birlikte yapılan performans sorununu Debounced veya Async yöntemler ile çözmeniz gerektiğini aşağıdaki videoyu izleyebilirsiniz.

https://youtu.be/nLF0n9SACd4?t=552

Debounce konusunda daha detaylı bilgi için Input Alanları UI Neden Bloklar ? yazımı okuyabilirsiniz.

SIRALAMA (SORTING)

Hangi sayfada hangi satırların olacağının kararını etkileyen bir diğer konuda konusu. Çünkü bazı satırların büyükten, küçüğe göre vb.. sıralama sonrasında listelenen satırların indeks numaraları değişecektir.

Table Sorting Bileşenini kendiniz geliştirebilirsiniz veya aşağıdaki örnekte olduğu gibi hazır Material UI bize sağlamış TableSortLabel bileşenini kullanabilirsiniz.

Sorting Bileşenini Eklediğinizde Ekranda bu yazıyı göreceksiniz.

Şimdi geldi bu Calories bileşenimizdeki kullanıcı etkileşimini state olarak tutmaya ve bu bilgiyi UI bileşeni üzerinde göstermeye. Kullanıcı bu Tablo Header bastığında yaptığımız state kodları ile değiştirmek

Kullanıcı Etkileşimini Sort State olarak Saklama

Son olarak bu bileşenin etkisi olan Sorting değerine göre satırlarımızı sıralayıp ona göre ekranda çizdirelim. Filtreleme işleminden sonra kalan satırları sıralama işleminden geçiriyoruz sonra Pagination işlemi gerçekleşiyor ve en sonunda ekrana çizim gerçekleşiyor

Fetch Products → Search → Sorting → Pagination

Sırası ile Fetch Products → Search → Sorting → Pagination işlemleri tamamlandıktan sonra ekranda edilme işlemi gerçekleşiyor.

GitHub Kod Örneği

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için 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