JSFiddle - React, Tailwind, and code Playground

by Nightythehawk

HTML

<!DOCTYPE html>
<html lang="de">

  <head>
  <meta charset="utf-8"/>
    <title>Test2</title>
	    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.8/vue.min.js"></script>
  <script src="https://rawgit.com/matfish2/vue-tables-2/master/dist/vue-tables-2.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">



 
      
      
      
      
	<link rel="stylesheet" href="test.css">
	
	
  </head>

  <body>

  <h3 class="vue-title">Auswertung Dige</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.wflow.timeconv}}</a>
    </div>

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



  
  
  	<script type="text/javascript" src="scripts/filter.js"></script>
  
  
  
  
  </body>

</html>

CSS

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

.VuePagination {
  text-align: center;
}

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

.vue-pagination-ad {
  text-align: center;
}

.glyphicon.glyphicon-eye-open {
  width: 16px;
  display: block;
  margin: 0 auto;
}

th:nth-child(3) {
  text-align: center;
}

.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: "+";
}

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

JavaScript

Vue.use(VueTables.ClientTable);

new Vue({
  el: "#app",
  data: {
    columns: ['author', 'worktype', 'patname', 'dictl', 'sdarb', 'statuslast', 'created', 'finished', 'dauerges'],
    data: getData(),
    options: {
      filterByColumn: true,
      headings: {
        author: 'Author',
        worktype: 'Diktatart',
		sdarb: 'Bearbeiter',
        patname: 'Patient',
		statuslast: 'Status'
      },
      sortable: ['author', 'worktype', 'patname', 'dictl', 'sdarb', 'statuslast', 'created', 'finished', 'dauerges'],
      filterable: ['author', 'worktype', 'patname', 'dictl', 'sdarb', 'statuslast', 'created', 'finished', 'dauerges']
    }
  }
});



function getData() {   
   return [
   
   {
   id: 100,
   author: "jojoj",
worktype: "Ejojojtat",
wfow: [
{timeconv: "test", time: "test2"},
{timeconv: "test2", time: "test3"}
],
patname: "Gjojon",
dictl: "00:02:33",
sdarb: "sejojojjjj",
created: "2018.12.03-12:44:41",
finished: "2018.12.03-12:44:58",
dauerges: "17s",
statuslast: "Versandt"
},
{
id: 101,
author: "jojjjjoj",
worktype: "Ejojojtat",
patname: "Gjojon",
dictl: "00:02:33",
sdarb: "sejojojjjj",
created: "2018.12.03-12:44:41",
finished: "2018.12.03-12:44:58",
dauerges: "17s",
statuslast: "Versandt"
},
   
   {
     username: "i",
     name: "iii",
     id: 0
   }, {
     username: "9",
     name: "999",
     id: 3
   }, {
     username: "h",
     name: "hhh",
     id: 6
   }, {
     username: "l",
     name: "lllll",
     id: 8
   }
   
   
   ];
 }

/*
function getData() {
  return [
{
author: "jojoj",
worktype: "Ejojojtat",
patname: "Gjojon",
dictl: "00:02:33",
sdarb: "sejojojjjj",
created: "2018.12.03-12:44:41",
finished: "2018.12.03-12:44:58",
dauerges: "17s",
statuslast: "Versandt"
},
{
author: "jojjjjoj",
worktype: "Ejojojtat",
patname: "Gjojon",
dictl: "00:02:33",
sdarb: "sejojojjjj",
created: "2018.12.03-12:44:41",
finished: "2018.12.03-12:44:58",
dauerges: "17s",
statuslast: "Versandt"
}

  ];
}*/