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 qgridUninstall
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:
💜 Support my open-source work on GitHub
Be sure to check out my sponsor page.
Thank you so much!!!