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>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></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.company.bs}} is

  <template v-for="flow of wflow">
    <li>{{ flow.ident }}</li>
  </template>



</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);

 var vue = new Vue({
   el: "#app",
   data: {
     // json: Vue.http.get("https://jsonplaceholder.typicode.com/users").then(response => {
     //   this.data = response.body;
     //   console.log("TEST on data: ");
     //   console.log(this.data);
     // }),
     columns: ['name', 'username'],
     data: [],
     options: {
       headings: {
         name: 'Name',
         username: 'Username'
       },
       sortable: ['name', 'username'],
       filterable: ['name', 'username']
     },
     
     created: function() { // get data from background, when ready
       Vue.http.get("https://jsonplaceholder.typicode.com/users").then(response => {
         this.json = response.body;
         console.log("TEST on created: " + json);
       });
     }
   }
 });

// async function testFetch() { let r = await fetch('https://jsonplaceholder.typicode.com/users'); let j = await r.json(); vue.data = j; }
// testFetch();

Vue.http.get("https://jsonplaceholder.typicode.com/users").then(response => { vue.data = response.body; });

/*
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
   }];
 }
*/