JSFiddle - React, Tailwind, and code Playground

by Leo

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.css">
<script src="https://rawgit.com/ratiw/vuetable-2/develop/dist/vuetable-2.js"></script>
<div id="app">
  <div class="ui container">
    <vuetable ref="vuetable" api-url="https://vuetable.ratiw.net/api/users" :fields="fields" table-height="30%"> <!--  pagination-path="" @vuetable:pagination-data="onPaginationData" -->
      <template slot="actions" scope="props">
        <div class="table-button-container">
          <button class="ui button" @click="editRow(props.rowData)"><i class="fa fa-edit"></i> Edit</button>&nbsp;&nbsp;
          <button class="ui basic red button" @click="deleteRow(props.rowData)"><i class="fa fa-remove"></i> Delete</button>&nbsp;&nbsp;
        </div>
      </template>
    </vuetable>
    <!--
    <vuetable-pagination ref="pagination" @vuetable-pagination:change-page="onChangePage"></vuetable-pagination>
    -->
  </div>
</div>

CSS

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

JavaScript

Vue.use(Vuetable);
new Vue({
  el: '#app',
  components: {
    // 'vuetable-pagination': Vuetable.VuetablePagination
  },
  data: {
    fields: ['name', 'email', 'birthdate', 'nickname', 'gender', '__slot:actions'],
    "table-height": "100px"
  },
  computed: {},
  methods: {
   /*  onPaginationData(paginationData) {
      this.$refs.pagination.setPaginationData(paginationData)
    },
    onChangePage(page) {
      this.$refs.vuetable.changePage(page)
    },
    editRow(rowData) {
      alert("You clicked edit on" + JSON.stringify(rowData))
    },
    deleteRow(rowData) {
      alert("You clicked delete on" + JSON.stringify(rowData))
    } */
  },
})

/*

var body = document.body,
    html = document.documentElement;

var height = Math.max( body.scrollHeight, body.offsetHeight, 
                       html.clientHeight, html.scrollHeight, html.offsetHeight );
                       
const tableEl = document.getElementById("table");                       
tableEl.tableHeight = "300px";
Vue.set(tableEl, "tableHeight", "300px");
Vue.set(tableEl, "table-height", "300px");
*/