Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Nested array in the QTable component #1

Open
Zignature opened this issue Sep 18, 2023 · 0 comments
Open

Nested array in the QTable component #1

Zignature opened this issue Sep 18, 2023 · 0 comments

Comments

@Zignature
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant