qgrid style

[jersingh]

Hi,

I've installed the QGrid extension and copy and pasted just the q-grid component into my application:

<q-grid :data="data" :columns="columns" :columns_filter="true"></q-grid>

along with sample data provided in the demo.

The grid doesn't display quite right. Maybe a style issue? The filter inputs are stacked on each other and the grid data itself is not displaying as a grid:

Here's my packake.json file:

 "dependencies": {
    "@quasar/extras": "^1.8.1",
    "axios": "^0.19.0",
    "git-branch": "^2.0.1",
    "global": "^4.4.0",
    "quasar": "^1.12.1",
    "shipit-nvm": "^0.0.6",
    "shipit-shared": "^4.4.2"
  },
  "devDependencies": {
    "@quasar/app": "^1.2.4",
    "@quasar/quasar-app-extension-icon-genie": "^1.1.2",
    "@quasar/quasar-app-extension-qenv": "^1.0.0-beta.2",
    "babel-eslint": "^10.0.2",
    "cypress": "^4.0.1",
    "eslint": "^6.1.0",
    "eslint-config-standard": "^13.0.1",
    "eslint-loader": "^2.2.1",
    "eslint-plugin-cypress": "^2.6.1",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-node": "^9.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^5.2.3",
    "node-sass": "^4.12.0",
    "quasar-app-extension-qgrid": "^0.0.2",
    "sass-loader": "^7.1.0",
    "shipit-cli": "^5.0.0",
    "shipit-deploy": "^5.0.0"
  },
  "engines": {
    "node": ">= 10.20.1",
    "npm": ">= 6.14.15",
    "yarn": ">= 1.22.4"
  },

And source/template:

<template>
  <q-page padding>
    <q-grid :data="data" :columns="columns" :columns_filter="true"></q-grid>
  </q-page>
</template>

<script>
  export default {
    data() {
      return {
        columns: [
          {
            name: 'name',
            required: true,
            label: 'Dessert (100g serving)',
            align: 'left',
            field: 'name',
            sortable: true
          },
          {name: 'calories', align: 'center', label: 'Calories', field: 'calories', sortable: true},
          {name: 'fat', label: 'Fat (g)', field: 'fat', sortable: true},
          {name: 'carbs', label: 'Carbs (g)', field: 'carbs'},
          {name: 'protein', label: 'Protein (g)', field: 'protein'},
          {name: 'sodium', label: 'Sodium (mg)', field: 'sodium'},
          {
            name: 'calcium',
            label: 'Calcium (%)',
            field: 'calcium',
            sortable: true,
            sort: (a, b) => parseInt(a, 10) - parseInt(b, 10)
          },
          {
            name: 'iron',
            label: 'Iron (%)',
            field: 'iron',
            sortable: true,
            sort: (a, b) => parseInt(a, 10) - parseInt(b, 10)
          }
        ],
        data: [
          {
            name: 'Frozen Yogurt',
            calories: 159,
            fat: 6.0,
            carbs: 24,
            protein: 4.0,
            sodium: 87,
            calcium: '14%',
            iron: '1%'
          },
          {
            name: 'Ice cream sandwich',
            calories: 237,
            fat: 9.0,
            carbs: 37,
            protein: 4.3,
            sodium: 129,
            calcium: '8%',
            iron: '1%'
          },
          {
            name: 'Eclair',
            calories: 262,
            fat: 16.0,
            carbs: 23,
            protein: 6.0,
            sodium: 337,
            calcium: '6%',
            iron: '7%'
          },
          {
            name: 'Cupcake',
            calories: 305,
            fat: 3.7,
            carbs: 67,
            protein: 4.3,
            sodium: 413,
            calcium: '3%',
            iron: '8%'
          },
          {
            name: 'Gingerbread',
            calories: 356,
            fat: 16.0,
            carbs: 49,
            protein: 3.9,
            sodium: 327,
            calcium: '7%',
            iron: '16%'
          },
          {
            name: 'Jelly bean',
            calories: 375,
            fat: 0.0,
            carbs: 94,
            protein: 0.0,
            sodium: 50,
            calcium: '0%',
            iron: '0%'
          },
          {
            name: 'Lollipop',
            calories: 392,
            fat: 0.2,
            carbs: 98,
            protein: 0,
            sodium: 38,
            calcium: '0%',
            iron: '2%'
          },
          {
            name: 'Honeycomb',
            calories: 408,
            fat: 3.2,
            carbs: 87,
            protein: 6.5,
            sodium: 562,
            calcium: '0%',
            iron: '45%'
          },
          {
            name: 'Donut',
            calories: 452,
            fat: 25.0,
            carbs: 51,
            protein: 4.9,
            sodium: 326,
            calcium: '2%',
            iron: '22%'
          },
          {
            name: 'KitKat',
            calories: 518,
            fat: 26.0,
            carbs: 65,
            protein: 7,
            sodium: 54,
            calcium: '12%',
            iron: '6%'
          }
        ]
      }
    }
  };
</script>

I do have the standard quasar grid successfully working on another page:

Any help is greatly appreciated. Thanks!

[pratik227]

Hello,

QGrid is compatible with 1.5.11 Quasar Version.

api.compatibleWith('quasar', '^1.5.11'); api.compatibleWith('@quasar/app', '^1.4.3');

You can update the quasar version and let me know if it works or you need anything.

[jersingh]

Hi,

Made the changes you requested but still see the same thing.

Relevant portion of my yarn.lock:

quasar@=1.5.11: version "1.5.11" ...

"@quasar/app@=1.4.3": version "1.4.3"

Just to test, I generated a new quasar app. Copied contents of existing apps package.json into new package.json.

Added to new apps index.vue and the QGrid works so something is not configured right in my application.

I might copy over internals of my app into new app to see how things go.

I appreciate your response, if you can think of something, let me know, otherwise you can close this issue.

A few questions if you will permit me:

1. A you on quasar discord?
2. Do you anticipate bumping quasar version to latest? Their q-table has been updated with new functionality.

Thanks!

[pratik227]

Yes, I'm on Discord - Pratik Patel#9040. We can communicate through discord.

Do you anticipate bumping quasar version to latest? Their q-table has been updated with new functionality.

• I can Bump the demo app version

[jersingh]

I figured out what was missing. I manually specify what components to import in my quasar.js.conf and needed to add 'QTr', 'QTd', and 'QTh' to components block. Works now.

Thanks!