quasar/src/components/data-table/table-bottom.js at 1b20b4d90a16bea4c052d66739fd7e50c0d202fa · hipertracker/quasar · 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
95
96
97
98
99
100
import { QSelect } from '../select'
import { QBtn } from '../btn'
import { QIcon } from '../icon'

export default {
  methods: {
    getBottom (h) {
      if (this.nothingToDisplay) {
        const message = this.filter
          ? this.noResultsLabel
          : (this.loader ? this.loaderLabel : this.noDataLabel)

        return h('div', { staticClass: 'q-datatable-bottom row items-center q-datatable-nodata' }, [
          h(QIcon, {props: {name: 'warning'}}),
          message
        ])
      }

      if (this.noBottom) {
        return
      }

      return h('div', { staticClass: 'q-datatable-bottom row items-center' },
        this.getPaginationRow(h)
      )
    },
    getPaginationRow (h) {
      const { page, rowsPerPage } = this.computedPagination

      return [
        h('div', { staticClass: 'col' }, [
          this.selection && this.rowsSelectedNumber > 0
            ? this.selectedRowsLabel(this.rowsSelectedNumber)
            : ''
        ]),
        h('div', [
          h('span', { style: {marginRight: '32px'} }, [
            this.rowsPerPageLabel
          ]),
          h(QSelect, {
            staticClass: 'inline',
            style: {
              margin: '0 15px',
              minWidth: '50px'
            },
            props: {
              color: this.color,
              value: rowsPerPage,
              options: this.computedRowsPerPageOptions,
              dark: this.dark
            },
            on: {
              input: rowsPerPage => {
                this.setPagination({
                  page: 1,
                  rowsPerPage
                })
              }
            }
          }),
          h('span', { style: {margin: '0 32px'} }, [
            rowsPerPage
              ? this.paginationLabel(this.firstRowIndex + 1, Math.min(this.lastRowIndex, this.computedRowsNumber), this.computedRowsNumber)
              : this.paginationLabel(1, this.computedRowsNumber, this.computedRowsNumber)
          ]),
          h(QBtn, {
            props: {
              color: this.color,
              round: true,
              icon: 'chevron_left',
              small: true,
              flat: true,
              disable: page === 1
            },
            on: {
              click: () => {
                this.setPagination({ page: page - 1 })
              }
            }
          }),
          h(QBtn, {
            props: {
              color: this.color,
              round: true,
              icon: 'chevron_right',
              small: true,
              flat: true,
              disable: this.lastRowIndex === 0 || page * rowsPerPage >= this.computedRowsNumber
            },
            on: {
              click: () => {
                this.setPagination({ page: page + 1 })
              }
            }
          })
        ])
      ]
    }
  }
}