HTML-CSS/DatatableExample.vue at master · GadhariSachin/HTML-CSS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<template>
  <v-container>
    <v-row class="text-center">
      <v-col cols="12">
        <v-data-table
          :headers="headers"
          :items="currencyData"
          :page.sync="page"
          :items-per-page="itemsPerPage"
          hide-default-footer
          class="elevation-1"
          @page-count="pageCount = $event"
        >
          <template v-slot:item.iconUrl="{ item }">
            <v-img
              :src="item.iconUrl"
              :lazy-src="item.iconUrl"
              max-height="25"
              max-width="25"
              :alt="item.name"
            ></v-img>
          </template>
        </v-data-table>
        <div class="text-center pt-2">
          <v-row>
            <v-col offset="4" cols="2">
              <v-select
                v-model="itemsPerPage"
                :items="items"
                label="Items per page"
              ></v-select>
            </v-col>
            <v-col cols="6">
              <v-pagination v-model="page" :length="pageCount"></v-pagination>
            </v-col>
          </v-row>
        </div>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import Vue from "vue";

export default Vue.extend({
  name: "CurrencyList",
  data: () => ({
    timer: 0,
    page: 1,
    pageCount: 0,
    itemsPerPage: 10,
    items: [10, 25, 50, 100],
    headers: [
      {
        text: "Icon",
        value: "iconUrl",
        sortable: false,
      },
      {
        text: "Name",
        value: "name",
        sortable: false,
      },
      {
        text: "Symbol",
        value: "symbol",
        sortable: false,
      },
      {
        text: "Price",
        value: "price",
      },
      {
        text: "Price Chnage (%)",
        value: "change",
      },
    ],
  }),
  computed: {
    currencyData() {
      return this.$store.state.currencyData;
    },
  },
  created() {
    this.fetchCurrencyDataList();
  },
  methods: {
    fetchCurrencyDataList() {
      this.$store.dispatch("FetchCurrencyData");
    },
  },
});
</script>