Scoped slots table

by Steve

HTML

<div id="app">
  <slot-table :data="gridData" :columns="columns">
<!--    <template slot="name" slot-scope="props">
      <span :class="{selected:props.item.selected}">{{props.item.name}}</span>
    </template>
    <template slot="selected" slot-scope="props">
      <input type="checkbox" v-model="props.item.selected">
    </template> -->
  </slot-table>
</div>

CSS

.selected{
  background:yellow
}
td, th{
  text-align:left;
  background:white;
  padding:5px 10px;
}

JavaScript

Vue.component('slot-table', {
	props:['data','columns'],
	template:`
  	<table>
    	<tr>
      	<th v-for="name, key in columns">{{name}}</th>
      </tr>
    	<tr v-for="item in data">
      	<template v-for="name, key in columns">
        	<td v-if="$scopedSlots[key]">
          	<slot :name="key" :item="item"></slot>
          </td>
          <td v-else>{{item[key]}}</td>
        </template>
      </tr>
  	</table>`
})
new Vue({
	el:'#app',
  data(){
  	return {
    	gridData: [
        { name: 'Chuck Norris', power: Infinity, selected:true },
        { name: 'Bruce Lee', power: 9000, selected:false },
        { name: 'Jackie Chan', power: 7000, selected:false },
        { name: 'Jet Li', power: 8000, selected:false }
  	  ],
      columns:{
      	name:'Name',
        power:'Power',
        selected:''
      }
    }
  }
})