QGrid v0.0.2 has been released!!
-
@metalsadman added new props for paginations and visible columns etc.Planning to add a grouping of columns in new release
-
@Pratik-Patel Very useful and great additions!
-
@dobbel Thanks.
-
QGrid v0.0.5 has been released!!
New -
- Added Grouping of the columns feature
Demo - https://quasar-qgrid.netlify.app/examples
*edit: modded typo - @metalsadman
-
great update!
-
QGrid, not QGird – be careful
-
Yes, @Hawkeye64
-
@Pratik-Patel i have tried using your qgrid extension but there are a few quirks i found,
the filter_type: ‘select’ and pagination does not seem to work with data being requested from the server, i am pasting the demo i have built, its pretty straight forward with the ajax request i am doing.
can you please review
@Hawkeye64 if you can also advise, thanks!
<template> <div> <q-grid :title="`${pageTitle}s`" :pagination.sync="pagination" :data="data" :columns="columns" :columns_filter="true" :draggable="true" :fullscreen="true" :csv_download="true" :global_search="true" :no-data-label="$utils.noResultsLabel" :no-results-label="$utils.filterNoResultsLabel" row-key="id" :loading="loading" :filter="filter" @request="onRequest" binary-state-sort > <template v-slot:body="props"> <q-tr :props="props"> <q-td key="id"> {{ props.row.id }} </q-td> <q-td key="roll_no"> {{ props.row.roll_no }} </q-td> <q-td key="color"> {{ props.row.color }} </q-td> <q-td key="gsm"> {{ props.row.gsm }} </q-td> <q-td key="length"> {{ props.row.length }} </q-td> <q-td key="roll_size"> {{ props.row.roll_size }} </q-td> <q-td key="gross_weight"> {{ props.row.gross_weight }} </q-td> <q-td key="net_weight"> {{ props.row.net_weight }} </q-td> <q-td key="createdAt"> {{ $utils.formatDate(props.row.createdAt) }} </q-td> <q-td key="updatedAt"> {{ $utils.formatDate(props.row.updatedAt) }} </q-td> </q-tr> </template> </q-grid> </div> </template> <script> const strPage = "Roll"; import { mapActions, mapState, mapGetters } from "vuex"; export default { async mounted() { this.refresh(); }, computed: { ...mapState("enquiry", ["arrColor"]), arrColorMapped() { let arr = this.arrColor.map(str => { return { id: str, name: str }; }); return arr; }, pageUri() { return this.pageTitle.toLowerCase().replace(" ", "_"); } }, methods: { async onRequest(props) { const { page, rowsPerPage, sortBy, descending } = props.pagination; const strFilter = props.filter; this.loading = true; let objParams = Object.assign({}, props.pagination); objParams.search = strFilter; let objResponse; try { //pass status as params if (this.status) { objParams.status = this.status; } objResponse = await this.$myAxios.execute( "GET", `/${this.pageUri}`, objParams ); } catch (e) { this.$utils.showErrorNotice(e.message); } finally { this.loading = false; } if (objResponse) { this.pagination.rowsNumber = objResponse.obj.count; this.pagination.page = page; this.pagination.rowsPerPage = rowsPerPage; this.pagination.sortBy = sortBy; this.pagination.descending = descending; this.data = objResponse.obj.rows; } }, async refresh() { this.onRequest({ pagination: this.pagination, filter: undefined }); } }, data() { return { pageTitle: strPage, breadcrumbs: [ { id: 1, label: "Home", icon: "home", to: "/admin/dashboard" }, { id: 2, label: strPage, icon: "folder" } ], columns: [ { name: "id", required: true, label: "Id", align: "left", field: "id", sort: (a, b) => parseInt(a, 10) - parseInt(b, 10), sortable: true }, { name: "roll_no", required: true, label: "Roll #", align: "left", field: "roll_no", sort: (a, b) => parseInt(a, 10) - parseInt(b, 10), sortable: true }, { name: "color", label: "Color", align: "left", field: "color", sortable: true, filter_type: "select", sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) }, { name: "gsm", label: "GSM", align: "left", field: "gsm", sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) }, { name: "length", label: "Length", align: "left", field: "length", sortable: true, filter_type: "select", sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) }, { name: "roll_size", label: "Roll Size", align: "left", field: "roll_size", sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) }, { name: "gross_weight", label: "Gross Weight", align: "left", field: "gross_weight", sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) }, { name: "net_weight", label: "Net Weight", align: "left", field: "net_weight", sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) }, { name: "createdAt", label: "Date Created", align: "left", field: "createdAt", sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) }, { name: "updatedAt", label: "Date Updated", align: "left", field: "updatedAt", sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) } ], objModel: {}, editMode: false, dialog: false, printDialog: false, loading: false, filter: "", data: [], pagination: { sortBy: "id", descending: true, page: 1, rowsPerPage: 10, rowsNumber: 10 }, rollsToPrint: [] }; } }; </script> <style lang="scss" scoped></style> -
@gs86 My advice is to not use anything less than v1.0.0 in production. If you’re playing with it, fine, otherwise you’re just testing.
-
@Hawkeye64 thanks for the advice, lets see if @Pratik-Patel has this working and is an easy fix we can use. i will give it a try.
Thanks
-
Hi @gs86,
I never worked on server side pagination and filter with QTable. I have tried to implement in QGrid but no luck yet.
Thanks
