QGrid v0.0.2 has been released!!

[Pratik Patel]

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

[Pratik Patel]

QGird v0.0.3 has been released!!

[metalsadman]

@Pratik-Patel nice, what changes you made?

[Pratik Patel]

@metalsadman added new props for paginations and visible columns etc.Planning to add a grouping of columns in new release

[dobbel]

@Pratik-Patel Very useful and great additions!

[Pratik Patel]

@dobbel Thanks.

[Pratik Patel]

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

[dobbel]

@Pratik-Patel

great update!

[Hawkeye64]

QGrid, not QGird – be careful

[Pratik Patel]

Yes, @Hawkeye64

[gs86]

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

[Hawkeye64]

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

[gs86]

@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

[Pratik Patel]

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