Quasar Q-Table Row Spanning

#vue #quasar #beginners #programming

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?

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more