QGrid v0.0.2 has been released!!



  • Hi everyone

    I just released a new version of QGrid.

    NEW Features added

    • Global search filter

    • Fullscreen mode

    • Custom column filter with select options.

    Github - https://github.com/pratik227/quasar-qgrid

    Demo - https://quasar-qgrid.netlify.com



  • QGird v0.0.3 has been released!!



  • @Pratik-Patel nice, what changes you made?



  • @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



  • @Pratik-Patel

    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


Log in to reply