WARNING
Note
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 qgrid
To 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.
(GitHub currently doubles your support! So if you support me with $10/mo, I will get $20 instead! They’re alchemists 😉)
Thank you so much!!!
chevron_leftchevron_right
Name
data
Type
Array
Description
Rows of data to display
Example
:data="myData"Name
columns
Type
Array
Description
The column definitions (Array of Objects)
Example
:columns="tableColumns"Name
visible_columns
Type
Array
Description
Array of Strings defining column names ('name' property of each column from 'columns' prop definitions);
Examples
:visible_columns="myCols"[ 'desc', 'carbs', 'protein' ]Name
file_name
Type
String
Description
Name of the CSV File to export
Example
DownloadName
classes
Type
String
Description
For custom classes
Name
csv_download
Type
boolean
Description
For enabling CSV File download
Name
columns_filter
Type
boolean
Description
For enabling column filter
Name
global_search
Type
boolean
Description
For enabling Global Search filter
Name
groupby_filter
Type
boolean
Description
For enabling Grouping of columns
Name
draggable
Type
boolean
Description
For draggable rows
Name
draggable_columns
Type
boolean
Description
For draggable columns
Name
fullscreen
Type
boolean
Description
Fullscreen mode
Name
pagination
Type
Object
Description
Pagination object; You can use the '.sync' modifier on it if you want to have access on the current pagination in your components; When not using the .sync modifier it simply initializes the pagination on first render
Name
visible-columns
Type
Array
Description
Array of Strings defining column names ('name' property of each column from 'columns' prop definitions); Columns marked as 'required' are not affected by this property
