Skip to content

Instantly share code, notes, and snippets.

@ajcastro
Forked from christian-smith/Component.vue
Last active January 21, 2020 04:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ajcastro/83af279e7d7540f82cae791d9bd430f9 to your computer and use it in GitHub Desktop.
Save ajcastro/83af279e7d7540f82cae791d9bd430f9 to your computer and use it in GitHub Desktop.
Quasar QTable Bottom Pagination
<q-table
:data="data"
:pagination="pagination"
@request="paginationRequest"
:columns="columns"
>
<template v-slot:top-left="props">
<TablePagination
:pagination="props.pagination"
:filter="table.filter"
@request="request"
/>
</template>
</q-table>
import Vue from 'vue'
import Bottom from 'quasar/src/components/table/table-bottom'
import Filter from 'quasar/src/components/table/table-filter'
import Pagination from 'quasar/src/components/table/table-pagination'
export default Vue.extend({
mixins: [
Bottom,
Filter,
Pagination
],
computed: {
computedRowsNumber () {
return this.pagination.rowsNumber
},
isServerSide () {
return this.computedPagination.rowsNumber !== void 0
}
},
methods: {
requestServerInteraction (prop = {}) {
this.$nextTick(() => {
this.$emit('request', {
pagination: prop.pagination || this.computedPagination,
filter: prop.filter || this.filter,
getCellValue: this.getCellValue || (() => {})
})
})
}
},
render (h) {
return h('div', [
this.getBottom(h)
])
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment