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

QGrid is a Quasar App Extension. It allows you to filter data for each column, Drag and Drop Rows and also allows you to filter data using header filters.
https://github.com/pratik227/quasar-qgrid

Last synced: 3 months ago
JSON representation

QGrid is a Quasar App Extension. It allows you to filter data for each column, Drag and Drop Rows and also allows you to filter data using header filters.

• Host: GitHub
• URL: https://github.com/pratik227/quasar-qgrid
• Owner: pratik227
• License: mit
• Created: 2020-02-03T20:18:56.000Z (almost 5 years ago)
• Default Branch: next
• Last Pushed: 2024-06-18T21:23:53.000Z (7 months ago)
• Last Synced: 2024-07-31T19:55:24.938Z (6 months ago)
• Language: Vue
• Homepage: https://next-quasar-qgrid.netlify.app/
• Size: 9.9 MB
• Stars: 113
• Watchers: 11
• Forks: 92
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

• quasar-awesome - QGrid

README

        
[![githelp.app shield](https://rbpwwcsvhmbmfiphokrm.supabase.co/storage/v1/object/public/public_resources/Badge2%20-%20round%20corners.svg?t=2023-12-11T13%3A11%3A05.524Z)](https://githelp.app/repos/quasar-qgrid)

# QGrid

QGrid is a [Quasar App Extension](https://quasar.dev/app-extensions/introduction).  It allows you to filter data for each column, Drag and Drop Rows and also allows you to filter data using header filters. 

## Install

To add this App Extension to your Quasar application, run the following (in your Quasar app folder):

```bash

quasar ext add qgrid

```

# Uninstall

To remove this App Extension from your Quasar application, run the following (in your Quasar app folder):

```

quasar ext remove qgrid

```

# Defining the columns

        [

                    {

                        name: 'name',

                        required: true,

                        label: 'Dessert (100g serving)',

                        align: 'left',

                        field: 'name',

                        sortable: true,

                        filter_type:'select' // Default is text with input filed

                    },

                    {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)

                    }

                ]

# Defining 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%'

                    }, //....

      ]

# Source

can be found [here](https://github.com/pratik227/quasar-qgrid).

# Docs

can be found [here](https://next-quasar-qgrid.netlify.app/).

# Examples

can be found [here](https://next-quasar-qgrid.netlify.app/).

# Demo (source) Project.

can be found [here](https://github.com/pratik227/quasar-qgrid/tree/ui/dev).

# Sponsors



  

    

  



# Support

If this helped you in any way, you can contribute to the package's long term survival by supporting me:

### [💜 Support my open-source work on GitHub](https://github.com/sponsors/pratik227)

Be sure to check out my sponsor page.

Thank you so much!!!