JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.css">
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css">
<div id="app"></div>

JavaScript

const MyTableComponent = {
  template: `
  	<b-table :fields="fields" :items="items">
    	<template v-for="slot in Object.keys($scopedSlots)" v-slot:[toCellName(slot)]="props">
        <slot v-bind="props" :name="slot" />
      </template>
    </b-table>
  `,
  
  props: ['fields', 'items'],
  
  methods: {
    toCellName (slot) {
      return `cell(${slot})`
    }
  }
}

const App = {
  template: `
  	<div>
      <my-table-component :fields="fields" :items="items">
      	<template v-slot:user="data">
        	<b class="text-info">{{ data.value.last.toUpperCase() }}</b>, <b>{{ data.value.first }}</b>
      	</template>
      </my-table-component>
    </div>
  `,
  
  components: {
    MyTableComponent
  },
  
  data () {
    return {
    	fields: [
    	  { key: 'user', label: 'Full Name' },
	      'age',
    	  'sex'
    	],
      items: [
        { user: { first: 'John', last: 'Doe' }, sex: 'Male', age: 42 },
        { user: { first: 'Jane', last: 'Doe' }, sex: 'Female', age: 36 },
        { user: { first: 'Rubin', last: 'Kincade' }, sex: 'Male', age: 73 },
        { user: { first: 'Shirley', last: 'Partridge' }, sex: 'Female', age: 62 }
      ]
    }
  }
}

new Vue({
  render: h => h(App)
}).$mount('#app')