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.
- React ile Admin Tool Geliştirelim-Login Ekranı
- React ile Admin Tool Geliştirelim-CRUD İşlemleri
- React ile Admin Tool Geliştirelim — Table Pagination Ekleyelim.
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..
Bu kısımda bir TextField ekleyeceğiz ve Pagination öncesinde gelen Product Listesi filtreleyip daha sonrasında Pagination işlemine sokacağız.
Performans Notu: 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 onChange yapılan performans sorununu Debounced veya Async yöntemler ile çözmeniz gerektiğini aşağıdaki videoyu izleyebilirsiniz.
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 Sıralama (Sorting) 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.
Ş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 Asc ve Desc kodları ile değiştirmek
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
Sırası ile Fetch Products → Search → Sorting → Pagination işlemleri tamamlandıktan sonra ekranda render 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 bu linke tıklayabilirsiniz.
