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.
To add this App Extension to your Quasar application, run the following (in your Quasar app folder):
quasar ext add qgridTo remove this App Extension from your Quasar application, run the following (in your Quasar app folder):
quasar ext remove qgrid
[
{
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)
}
]
[
{
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%'
}, //....
]
can be found here.
can be found here.
can be found here.
can be found here.
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!!!
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent