JSFiddle - React, Tailwind, and code Playground

by Simon Herteby

HTML

<div id="app">
  <slot-table :data="gridData">
    <template slot="name" scope="props">
      <span :class="{selected:props.item.selected}">{{props.item.name}}</span>
    </template>
    <template slot="selected" scope="props">
      <input type="checkbox" v-model="props.item.selected">
      <span v-if="props.select2">😎</span>
    </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'],
  data(){
  	return {
    	selected:[]
    }
  },
	template:`
  	<table>
    	<tr>
      	<th v-for="val, key in data[0]">{{key}}</th>
      </tr>
    	<tr v-for="item in data">
      	<template v-for="val, key in item">
        	<td v-if="$scopedSlots[key]">
          	<slot :name="key" :item="item" :select2="selected == item"></slot>
          </td>
          <td v-else>{{val}}</td>
        </template>
        <td><button @click="selected = item">Select</button></td>
      </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 }
  	  ]
    }
  }
})