1-vgt-custom

by Akshay Anand

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vue-good-table.css">
<script src="https://unpkg.com/vue-good-table/dist/vue-good-table.js"></script>
<div id="app">
  <vue-good-table
    :columns="columns"
    :rows="rows"
    :search-options="{ enabled: true}">
    <template slot="table-row" slot-scope="props">
      <span v-if="props.column.field == 'before'">
        before
      </span>
      <span v-else-if="props.column.field == 'after'">
        after
      </span>
      <span v-else>
        {{props.formattedRow[props.column.field]}}
      </span>
    </template>
  </vue-good-table>                  
</div>

CSS

#app{
 padding: 20px;
}

JavaScript

new Vue({
  el: '#app',
  data() {
    return {
      columns: [
        {
          label: 'Before',
          field: 'before',
        },
        {
          label: 'Name',
          field: 'name',
        },
        {
          label: 'Age',
          field: 'age',
          type: 'number',
        },
        {
          label: 'Created On',
          field: 'createdAt',
          type: 'date',
          dateInputFormat: 'YYYY-MM-DD',
          dateOutputFormat: 'MMM Do YY',
        },
        {
          label: 'Percent',
          field: 'score',
          type: 'percentage',
        },
        {
          label: 'After',
          field: 'after',
        }
      ],
      rows: [
        { id:1, name:"John", age: 20, createdAt: '201-10-31:9: 35 am',score: 0.03343 },
        { id:2, name:"Jane", age: 24, createdAt: '2011-10-31', score: 0.03343 },
        { id:3, name:"Susan", age: 16, createdAt: '2011-10-30', score: 0.03343 },
        { id:4, name:"Chris", age: 55, createdAt: '2011-10-11', score: 0.03343 },
        { id:5, name:"Dan", age: 40, createdAt: '2011-10-21', score: 0.03343 },
        { id:6, name:"John", age: 20, createdAt: '2011-10-31', score: 0.03343 },
        { id:7, name:"Jane", age: 24, createdAt: '2013-09-21' },
        { id:8, name:"Susan", age: 16, createdAt: '2013-10-31', score: 0.03343 },
      ],
    };
  },
});