I'm using Vue. Lets say I have a database table with the historical price of a few kinds of fruits for the last few years, so: fruit, year and price columns.
| fruit | year | price | |--------|------|-------| | apple | 2018 | 52 | | apple | 2019 | 57 | | apple | 2020 | 56 | | apple | 2021 | 50 | | banana | 2018 | 25 | | banana | 2019 | 26 | | banana | 2021 | 28 | | pear | 2018 | 61 | | pear | 2019 | 65 | | pear | 2020 | 67 | | pear | 2021 | 64 |
Now I want to create a html table which has fruit names on one axis and years on the other, and the cells contain the price for the given fruit / year combination as below. Some combinations might be missing from the data.
What features and template syntax you'd use? Please do not suggest tranforming the raw data: it comes straight from a database and there will be many tables like this, and I need a generic solution.
| | 2018 | 2019 | 2020 | 2021 | |--------|------|------|------|------| | apple | 52 | 57 | 56 | 50 | | banana | 25 | 26 | n/a | 28 | | pear | 61 | 65 | 67 | 64 |
I'm looking for elegant "vue-like" solutions. For now I created getRows(), getColumns() functions which collect all possible row and column values and then a getCell(col, row) function to pick up the right value from the dataset - but this might force Vue to rebuild the display more than optimal times when I edit the underlying data.
The broader question is how you work with relational data in Vue, because this is just the basic example, normally the name of the fruit would come from another base table...