Scoped slots table

by tlgreg

HTML

<script type="text/x-template" id="slot-table">
	<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>
</script>

<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: '#slot-table',
})

new Vue({
	el:'#app',
  data: () => ({
    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:'',
    },
  }),
})