Skip to content

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.

License

Notifications You must be signed in to change notification settings

pratik227/quasar-qgrid

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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. 

Install

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

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.

Docs

can be found here.

Examples

can be found here.

Demo (source) Project.

can be found here.

Sponsors

Support

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

Be sure to check out my sponsor page.

Thank you so much!!!

About

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.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Sponsor this project

 

Packages

No packages published