REACT UI MECHANICS
React ile Admin Tool Geliştirelim — Table Multi-Row Selection and Operation
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.
- React ile Admin Tool Geliştirelim — Table Search ve Sorting
Tabloda diğer bir önemli konuda CRUD işlemleride örneğin silme işlemini tek tek değilde , bir grup satır seçerek toplu bir şekilde yapabilmekte kullanıcıya büyük kolaylık sağlayacaktır. Bu yazıda bu konu üzerinde duracağız.
İlk aşama Tablonun ilk satırına Checkbox satırı eklemek olacak..
Bundan sonraki aşama bileşenimize bir State tutacağız SelectedRows şeklinde kullanıcının yapması gereken bu State yönetmesi.
- Yeşil kısım SelectedRows satır ekleyip çıkarabilir.
- Mavi kısım ise o sayfadaki tüm satırları ekleyip çıkarabilir olsun.
Bu kısmı yapmak için aşağıdaki kod kısmını yazmamız gerekiyor. Mavi ve yeşil Checkboxları ayrı ayrı ele alıyoruz.
Şimdi geldi son adıma ekranın üzerine bir Delete düğmesi koyup bu düğmeye basınca seçili olan tüm row’ları (SelectedRows) sunucudan silme işine.. Bunun için Tablonun üzerine bir düğme ekleyip for döngüsünde seçili row silinmesini sağlayalım..
Bu kısmı biraz daha ileriye götürüp sunucu kısmına bir array içerisinde [..] silme komutu gönderip network işlemini optimize edebilirsiniz.
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.
