The q-table-blog from ldiebold

q-table-blog's People

Contributors

Stargazers

Watchers

q-table-blog's Issues

Nested array in the QTable component

I am new to Quasar, and Vue for that matter, and not much of a programmer...

I am having a real hard time working with a nested array in the QTable component.

Consider this data structure:

rows: [
    {
        id: 1,
        productgroup: "Product Group 1",
        description: "Product Group 1 description",
        products: [
            {
                product: "Product 1.1",
                description: "Product 1.1 description",
                price_small: "1.50",
                price_default: "2.00",
                price_large: "2.50"
            },
            {
                product: "Product 1.2",
                description: "Product 1.2 description",
                price_small: "1.50",
                price_default: "2.00",
                price_large: "2.50"
            },
	]
    },
    {
        id: 2,
        productgroup: "Product Group 2",
        description: "Product Group 2 description",
        products: [
            {
                product: "Product 2.1",
                description: "Product 2.1 description",
                price_small: "1.50",
                price_default: "2.00",
                price_large: "2.50"
            },
            {
                product: "Product 2.2",
                description: "Product 2.2 description",
                price_small: "1.50",
                price_default: "2.00",
                price_large: "2.50"
            },
	]
    },
]

I'm trying to achieve a separate table for each product group with the product group as title and a description line underneath the title. And I want the products in that product group as rows in the table:

Product Group 1 Product Group 1 description (colspan = 5)

Expand	Products	Price small	Price default	Price large
-	Product 1.1	$1.50	$2.00	$2.50
	Product 1.1 description (colspan = 4)
+	Product 1.2	$1.50	$2.00	$2.50

Product Group 2 Product Group 2 description (colspan = 5)

Expand	Products	Price small	Price default	Price large
+	Product 2.1	$1.50	$2.00	$2.50
+	Product 2.2	$1.50	$2.00	$2.50

I can easily achieve this with QMarkupTable (without the expansion unfortunately) using a v-for and a nested v-for, but I can't seem to get it right with QTable.

Any help would be greatly appreciated.

Recommend Projects