JSFiddle - React, Tailwind, and code Playground

by Pooya Parsa

HTML

<link rel="stylesheet" href="//unpkg.com/bootstrap@next/dist/css/bootstrap.min.css">
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<link rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css">
<script src="//unpkg.com/tether@latest/dist/js/tether.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<div id='app'>
<b-table striped hover :items="logs" :fields="fields_logs">
</b-table>
</div>

JavaScript

window.onload = function() {new Vue({el:'#app',
data: {
  logs: [
    {type: 'CHECK_IN', device: '123', user: { username: 'Foo Bar'} }  
  ]
},
computed: {
  fields_logs: () => ({
    type: { label: 'Action Type' },
    device: { label: 'Device Id' },
    user: { label: 'Username', formatter: u => u.username },
  })
}})}