Vue-Patternfly full table example

patternfly-mail.vue

<template>
  <div>

    <pf-toolbar ref="toolbar" class="table-view-pf-toolbar"
                :filters.sync="filters"
                :filter-fields="filterFields"
                :result-count="mails.total"
                :columns="['Date', 'From', 'To', 'Subject', 'Size', 'Attachments']"
                :picked-columns.sync="columns"
                view="table"
                views=''>
      <button class="btn btn-default" type="button" @click="fetch">
        <span class="i fa fa-refresh"></span>
        Refresh
      </button>
    </pf-toolbar>

    <pf-table class="flex-column" striped bordered hover scrollable sortable
              :page.sync="page"
              :pages="pages"
              :columns="columns"
              :rows="mails.hits"
              :sort-by="sortBy"
              :sort-direction="sortDirection"
              @sort-by="setSort">
      <template scope="data">
        <td v-if="columns.indexOf('Date') >= 0" class="table-column-date">
          {{dateFormat(data.row['date'])}}
        </td>
        <td v-if="columns.indexOf('From') >= 0">
          <a :href="'mailto:' + data.row.from" :title="data.row.from">{{mailLabel(data.row.from)}}</a>
        </td>
        <td v-if="columns.indexOf('To') >= 0">
          <template v-for="(email, i) in data.row.to">
            <template v-if="i > 0">, </template>
            <a :href="'mailto:' + email" :title="email">{{mailLabel(email)}}</a>
          </template>
        </td>
        <td v-if="columns.indexOf('Subject') >= 0">
          {{data.row.subject}}
        </td>
        <td v-if="columns.indexOf('Size') >= 0" class="table-column-size">
          {{sizeFormat(data.row.size)}}
        </td>
        <td v-if="columns.indexOf('Attachments') >= 0" class="table-column-attachments">
          {{data.row.nr_attachments}}
        </td>
      </template>
      <template scope="data" slot="action">
        <a :href="'/mail/' + data.row.id + '.eml'" class="btn btn-default">
          <span class="i fa fa-envelope"></span>
          Open
        </a>
      </template>
    </pf-table>

  </div>
</template>

<style>
.table-column-date {
  min-width: 140px;
}
.table-column-size {
  min-width: 80px;
  text-align: right;
}
</style>

<script>
import http from '../http';
import format from 'date-fns/format';

const MAX_RESULT_WINDOW = 50;

export default {
  name: 'archive-page',

  data() {
    return {
      columns: ['Date', 'From', 'To', 'Subject', 'Size'],
      filters: [],
      filterFields: {
        subject: 'Subject',
        body: 'Body',
        from: 'From',
        to: 'To',
        date: {
          label: 'Date',
          placeholder: 'Ex: >2017-01-01',
        },
        size: {
          label: 'Size',
          placeholder: 'Ex: >100000',
        },
        nr_attachments: {
          label: 'Nr. Attachments',
          placeholder: 'Ex: 0',
        },
        any: 'Any',
      },
      sortBy: 'Date',
      sortDirection: 'desc',
      mails: {},
      page: 1,
      size: 50,
    };
  },

  mounted() {
    this.fetch();
  },

  computed: {
    pages() {
      if (!this.mails.total) {
        return 0;
      }
      return this.mails.total / this.size;
    },
  },

  methods: {
    async fetch() {
      this.mails = {};

      const query = {
        filters: this.filters,
        from: (this.page - 1) * this.size,
        size: this.size,
        sortBy: this.sortBy,
        sortDirection: this.sortDirection,
      };
      try {
        this.mails = await http.get('/mail/', query);
      } catch(e) {
        this.$root.notify(e.response.text, e.response.status >= 500 ? 'danger' : 'warning');
      }
    },

    mailLabel(mail) {
      if (!mail || mail.substr(-1) != '>') {
        return mail;
      }

      var match = /^["']*(.*?)["']*\s*<(.*)>$/.exec(mail);

      if (match) {
        return match[1] ? match[1] : match[2];
      }

      return mail;
    },

    dateFormat(date_string) {
      const d = new Date(date_string);
      return format(d, 'DD/MM/YYYY HH:mm:SS');
    },

    sizeFormat(size) {
      const units = ['', 'K', 'M', 'G', 'T', 'P'];
      let unitX = 0;
      while (size >= 1000 && unitX < units.length) {
        unitX++;
        size /= 1000;
      }
      const precision = unitX < 2 ? 0 : 2;
      return `${size.toLocaleString(undefined, {maximumFractionDigits: precision})} ${units[unitX]}B`;
    },

    setSort(field, direction) {
      this.sortBy = field;
      this.sortDirection = direction;
      this.fetch();
    },
  },

  watch: {
    filters() {
      this.page = 1;
      this.fetch();
    },

    page() {
      this.fetch();
    },
  },
};
</script>