I am facing a challenge with two sets of arrays - one for the headers (columns) of a table and the other for the rows.
const headers = [
{
text: 'Dessert (100g serving)',
align: 'left',
sortable: false,
value: 'name',
visible: true
},
{ text: 'Calories', value: 'calories', visible: true },
{ text: 'Fat (g)', value: 'fat', visible: true },
{ text: 'Carbs (g)', value: 'carbs', visible: true },
{ text: 'Protein (g)', value: 'protein', visible: true },
{ text: 'Iron (%)', value: 'iron', visible: true }
]
const desserts = [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%'
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: '1%'
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
iron: '7%'
},
{
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
iron: '8%'
}
]
My goal is to allow users to choose which columns they want to view in the table by using checkboxes.
Using Vue.js, I have created a collection of checkboxes that are bound to headers from the headers array as follows:
computed: {
filteredHeaders () {
return this.headers.filter(header => header.visible)
}
}
This functionality works well, where the table column headers change based on selected checkboxes.
However, I am struggling to filter the row data (desserts) based on the selected columns (filteredHeaders).
I attempted the following approach:
computed: {
...
filteredItems () {
return this.desserts.filter(dessert => {
return this.filteredHeaders.some(header => {
return Object.keys(header).some(prop => {
return dessert[prop] != header[prop] && header.visible
})
})
})
}
}
Despite not encountering any errors, the result of filteredItems remains unchanged from the original desserts, and properties that should be excluded still appear when visible is set to false through checkboxes.
I believe I'm close to solving this issue, but I haven't quite hit the mark yet!