VueJS Dinamik Tablo Componenti Oluşturma

Vue JS

Herkese merhabalar,bildiğim kadarıyla sizlere vuejs ile birlikte dinamik bir tablo componenti nasıl yapabiliriz onu anlatmaya çalışacağım.

Proje Oluşturma

vue create router-app

ardından terminal ekranında npm run serve diyerek projeyi ayağa kaldırıyoruz.

Tabloya harici stil yazmak yerine,Bootstrap kütüphanesini projeye dahil ediyoruz.

Bootstrap’ın projeye dahil edilmesi

Projemin içinde public/index.html aşağıdaki gibi bootstrapi dahil ediyoruz.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

ardından components klasörü içinde yeni bir src/components/table.vue

yeni bir component oluşturuyoruz.

Propsların Belirlenmesi

rows: Tabloüzerinde göstereceğimiz verilerin listesi.

columns:Tablo üzerindeki başlıklar için.

actionsButtonsVisible:Tablo üzerinde işlem yapmak için gerekli butonların gösterilip gösterilmeyeceği.

deleteButtonVisible:Tablo üzerinde sil butonunun gösterilip gösterilmeyeceği.

updateButtonVisible:Tablo üzerinde güncelle butonunun gösterilip gösterilmeyeceği.

props:{
  rows:{
      type:Array,
      required:true
  },
  columns:{
      type:Array,
      required:true
  },
  deleteButtonVisible:{
      type:Boolean,
      required:false
  },
  actionsButtonsVisible:{
      type:Boolean,
      required:false
  },
  updateButtonVisible:{
      type:Boolean,
      required:false
  },
}

Methodların Belirlenmesi

deleteButtonClick:Sil butonuna basıldığında çağırılmış olduğu bir üst componente tıklanan veriyi ve ilgili index numarasını verme işlemi.

updateButtonClick: Güncelle butonuna basıldığında çağırılmış olduğu bir üst componente tıklanan veriyi ve ilgili index numarasını verme işlemi.

methods:{
    deleteButtonClick(item,index){
        this.$emit('deleteButtonClick',{item,index})
    },
    updateButtonClick(item,index){
        this.$emit('updateButtonClick',{item,index})
    }
},

Tablonun oluşturulması

Aşağıda yapılan işlemler kısaca şu şekilde;

Tablo başlıklarını render etmek için props olarak gelen verinin üzerinde v-for ile döngü kuralarak label özelliğinin yazdırılması.Ve işlemler için (Sil,Güncelle vb..) bir sutun oluşturulması props olarak işlemler için true değer geçilirse gösterilmesi için v-if ile kontrol edilmiştir

Ardından props olarak gelen veri üzerinde v-for ile döngü kuralarak ilgili satırların oluşturulması sağlanıyor,props olarak gelen sutunların içersindeki value bilgisi ile veri üzerindeki özellkler çağırılarak ilgili elementin içinde gösteriliyor, sil ve güncelle butonları için bir sutun oluşturulup işlemler için geçilen props true değeri taşırsa,ardından sil ve güncelle butonları için gelecek props değerlerine bakılarak gösterilip gösterilmeyeceğine karar veriliyor. Tablonun en altında ise tablodaki toplam veri sayısı eğer gelen veri sıfırdan büyük ise gösteriliyor değil ise kayıt bulunamadı ifadesi yazdırılıyor.

<table class="table table-striped">
       <thead>
      <tr>
        <th v-for="(title,i) in columns" :key="i">{{title.label}}</th>
        <th v-if="actionsButtonsVisible">İşlemler</th>
      </tr>
      </thead>
  <tbody>
        <tr v-for="(row,i) in rows" :key="i">
     <td v-for="(column,i) in columns" :key="i">
          <p>{{row[column.value]}}</p>
        </td>
        <td>
        <div class="float-right">
                <button class="btn btn-sm btn-outline-danger"  v-if="deleteButtonVisible" @click="deleteButtonClick(row,i)">Sil</button>
                <button class="ml-2 btn btn-sm btn-outline-warning" @click="updateButtonClick(row,i)" v-if="updateButtonVisible">Güncelle</button>
        </div>

        </td>
        </tr>
  </tbody>
   <tfoot>
    <p class="mt-2">Toplam Kayıt Sayısı : {{rows.length>0 ? rows.length:'Kayıt Bulunamadı'}}</p>
  </tfoot>
</table>

Componentin Kullanımı

İlgili componentimizi src/App.vue dosyasına import ediyoruz.

ve ilgili props değerlerini aşağıdaki gibi geçiyoruz.

<template>
  <custom-table :rows="tableData"
                @updateButtonClick="updateHandler($event)"
                @deleteButtonClick="deleteHandler($event)"
                :update-button-visible="true"
                :delete-button-visible="true"
                :actionsButtonsVisible="true"
                :columns="tableColumns"> </custom-table>
</template>

<script>
import CustomTable from './components/table.vue'
export default {
  name: 'App',
  data(){
    return{
    tableData:[{id:1,ad:'yasin',soyad:'dalkılıç',tc:11111,telefon:2222},
{id:2, ad:'rümeysa',soyad:'dalkılıç',tc:11111,telefon:2222}],
    tableColumns:[{label:'Kullanıcı Adı',value:'ad'},               {label:'Kullanıcı Soyadı',value:'soyad'},{label:'Kullanıcı TC NO',value:'tc'}],
    }
  },
  methods:{
    deleteHandler(data){
      console.log('delete',data)
    },
    updateHandler(data){
      console.log('update',data)
    }
  },
  components: {
    CustomTable
  }
}
</script>

ve artık bize özel bir tablomuz var dilersek daha fazla özelleştirme yapabiliriz.

Herkese İyi Çalışmalar Dilerim :)