Hello, I tried to create a page that will retrieve data from Django Backend Application. And the frontend is built using Vue.Js 3 and Quasar Latest version.
Here is a sample of my data:
[
{
"rule_id": "1",
"spa_group_id": "100",
"range": [
{
"id": 1,
"from_risk_score": "100",
"to_risk_score": "150",
"collection_path_dg": "100",
"spa_group_id": "100"
}
]
},
{
"rule_id": "2",
"spa_group_id": "200",
"range": [
{
"id": 2,
"from_risk_score": "200",
"to_risk_score": "250",
"collection_path_dg": "100",
"spa_group_id": "200"
}
]
},
{
"rule_id": "3",
"spa_group_id": "300",
"range": [
{
"id": 3,
"from_risk_score": "300",
"to_risk_score": "350",
"collection_path_dg": "200",
"spa_group_id": "300"
},
{
"id": 4,
"from_risk_score": "400",
"to_risk_score": "450",
"collection_path_dg": "300",
"spa_group_id": "400"
},
{
"id": 5,
"from_risk_score": "400",
"to_risk_score": "450",
"collection_path_dg": "300",
"spa_group_id": "500"
}
]
},
]

As you may see that the data is grouped by two fields "rule_id" and "spa_group_id". I'm trying to show the data using Quasar Framework.

How can I get it done right with the ability to filter data by values from specific columns and allowing to sort the data?