Dynamic Column in a ColumnGroup

[riverman83]

Hey there,
first of all: PrimeVue is great. Thanks for your work.

I'm experiencing a problem and can't find a solution googling, checking the docs or this forum.
I try to create columns inside a row of a columngroup dynamically.
Here's how I tried to realize this.

Code: Select all

<DataTable :value="calcValues">
        <template #header>
         {{ someCalculatedHeaderValue }}       
        </template>
        <ColumnGroup type="header">
          <Row>
            <Column header="Values / Years" />
            <!-- Here starts the problem -->
            <Column v-for="n of numberOfYears" :key="n">
             <template #body>{{ calcHeadingPerYear(n) }}</template> 
            </Column>
            <!-- Here ends the problem -->
          </Row>
        </ColumnGroup>
        <Column field="rowHeading" />
        <Column v-for="n of getNumberOfColumns" :key="n">          
          <template #body="slotProps">
            {{ slotProps.data.values[n].value}}
          </template>
        </Column>
      </DataTable>

Whilst within the "body" of the DataTable everything works fine, I cannot find a solution to dynamically create the "head" of the DataTable.
The browser console tells me: "Uncaught (in promise) TypeError: Array.prototype.filter called on null or undefined"

I also tried to wrap the <Column> inside a <div v-for="n of numberOfYears" :key="n"></div>, but with the same result.

Could you please give me a hint how to solve this?

Kind regards,
riverman

[netsrac]

Hi there,

I'm currently experiencing the same problem.

Dynamically defining columns inside of a column group using the v-for directive doesn't seem to work for me.

Code: Select all

<DataTable v-bind:value="data">
     <ColumnGroup type="header">
            <Row>
                <Column header="Nr" v-bind:rowspan="2" />
                <Column v-for="n in 4" v-bind:key="n" v-bind:header="n" v-bind:colspan="7"/>
            </Row>
            <Row>
                <Column v-for="n in 28" v-bind:key="n" v-bind:header="n" />
           </Row>
      </ColumnGroup>                
</DataTable>      

Exception:

Code: Select all

Uncaught (in promise) TypeError: Array.prototype.filter called on null or undefined
    at filter (<anonymous>)
    at renderComponentRoot (runtime-core.esm-bundler.js:717)
    at componentEffect (runtime-core.esm-bundler.js:4035)
    at reactiveEffect (reactivity.esm-bundler.js:42)
    at effect (reactivity.esm-bundler.js:17)
    at setupRenderEffect (runtime-core.esm-bundler.js:4018)
    at mountComponent (runtime-core.esm-bundler.js:3976)
    at processComponent (runtime-core.esm-bundler.js:3936)
    at patch (runtime-core.esm-bundler.js:3547)
    at mountChildren (runtime-core.esm-bundler.js:3736)

edit: I posted the wrong error message in my initial post

Kind regards
netsrac