Skip to content

Nested array in the QTable component #1

@Zignature

Description

@Zignature

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions