ldiebold / q-table-blog Goto Github PK
View Code? Open in Web Editor NEWThis repo is to accompany the blog post series at dev.to/quasar (Quasar's QTable: The ULTIMATE Component)
This repo is to accompany the blog post series at dev.to/quasar (Quasar's QTable: The ULTIMATE 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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.