Photo by Sarah Kilian on Unsplash

REACT UI MECHANICS

React ile Admin Tool Geliştirelim — Table Multi-Row Selection and Operation

Admin Tool ilgili aşağıdaki önceki yazılarda Login, CRUD ve Pagination mekanizmalarına bakmıştık.

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

Tabloya Checkbox Yapısı Ekleyelim

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.
Seçim Mekanizması

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.

MultipleRow Selection.

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

Delete Rows Button Ekleyelim

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.

--

--

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