Address array field in value attribute in table header definition

[stolpeo]

I want to use the value attribute in a column header definition to address an array element. How can I do this?

const tableHeaders = [
  { text: 'column1', value: `myArray[${someValue}]` },
]

I'm aware that I could do this in the <template #item-column1="{ myArray }"> but the column (and header) will be automatically generated, so I can't use that. Any help is appreciated!

[stolpeo]

I found a solution to the problem. I can generate the <template> element with a for loop and can refer to the slot using dynamic attributes. Actually my current code is a bit more complex than my boiled down example. Here my fragments for completeness (boiled down again a bit, so might contain errors).

const optionalColumnHeader = (optionalColumns) => {
  return optionalColumns.map(({ field, label }) => ({
    text: label,
    value: `optional_column${field}`,
    sortable: true,
  }))
}

const tableHeaders = [
  { text: 'X', value: 'x' },
   ...optionalColumnHeader(optionalColumns),
]

<template v-for="{ field } in optionalColumns" v-slot:[`item-optional_column${field}`]="{ myArray }">
  {{ myArray[field] }}
</template>