JSFiddle - React, Tailwind, and code Playground

by Nightythehawk

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>Test2</title>
    <script src="https://rawgit.com/matfish2/vue-tables-2/master/dist/vue-tables-2.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.8/vue.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  </head>

  <body>

    <h3 class="vue-title">Guides</h3>
    <div id="app">
      <v-client-table :columns="columns" :data="data" :options="options">
        <a slot="uri" slot-scope="props" target="_blank" :href="props.row.uri" class="glyphicon glyphicon-eye-open"></a>

        <div slot="child_row" slot-scope="props">
       
          The link to {{props.row.name}} is <a :href="props.row.uri">{{props.row.uri}}</a></div>

      </v-client-table>
     
    </div>
  </body>

</html>

CSS

#app {
   width: 95%;
   margin: 0 auto;
 }

 .vue-title {
   text-align: center;
   margin-bottom: 10px;
 }

 .VueTables__child-row-toggler {
   width: 16px;
   height: 16px;
   line-height: 16px;
   display: block;
   margin: auto;
   text-align: center;
 }

 .VueTables__child-row-toggler--closed::before {
   content: "show";
 }

 .VueTables__child-row-toggler--open::before {
   content: "hide";
 }

Vue

Vue.use(VueTables.ClientTable);

 new Vue({
   el: "#app",
   data: {
     columns: ['name', 'username'],
     data: getData(),
     options: {
       headings: {
         name: 'Name',
         username: 'Username'
       },
       sortable: ['name', 'username'],
       filterable: ['name', 'username']
     }
   }
 });

 function getData() {
   return [{
     username: "i",
     name: "iii",
     id: 0
   }, {
     username: "9",
     name: "999",
     id: 3
   }, {
     username: "h",
     name: "hhh",
     id: 6
   }, {
     username: "l",
     name: "lllll",
     id: 8
   }];
 }
       mounted(); {
        $.getJSON('https://jsonplaceholder.typicode.com/users', json => {
          this.products = json.data
        })
      }