DataTable Dynamic Row defect

[jtuchel]

I'm submitting a ...

[x] bug report
[ ] feature request
[ ] support request

---

This issue might be related to

• Cannot create dynamic ColumnGroup columns in DataTable #1630
• Can't create column groups via v-for loop #1754

---

Current behavior
When using this component code everything works fine

<template>
  <p-data-table>
    <p-column-group type="header">
      <p-row>
        <p-column header="Section 1" :rowspan="2" :colspan="1" />
        <p-column header="Section 2" :rowspan="1" :colspan="2" />
      </p-row>
      <p-row>
        <p-column header="Section 2.1" :rowspan="1" :colspan="1" />
        <p-column header="Section 2.2" :rowspan="1" :colspan="1" />
      </p-row>
    </p-column-group>
  </p-data-table>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import DataTable from "primevue/datatable";
import Column from "primevue/column";
import Row from "primevue/row";
import ColumnGroup from "primevue/columngroup";

export default defineComponent({
  components: {
    "p-data-table": DataTable,
    "p-column": Column,
    "p-row": Row,
    "p-column-group": ColumnGroup,
  },
});
</script>

The generated output is as expected

When using this component code instead

<template>
  <p-data-table>
    <p-column-group type="header">
      <p-row
        v-for="(row, rowIndex) in tableConfiguration"
        :key="`row-${rowIndex}`"
      >
        <p-column
          v-for="(column, columnIndex) in row"
          :key="`column-${columnIndex}`"
          :header="column.header"
          :colspan="column.colspan"
          :rowspan="column.rowspan"
        />
      </p-row>
    </p-column-group>
  </p-data-table>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import DataTable from "primevue/datatable";
import Column from "primevue/column";
import Row from "primevue/row";
import ColumnGroup from "primevue/columngroup";

export default defineComponent({
  components: {
    "p-data-table": DataTable,
    "p-column": Column,
    "p-row": Row,
    "p-column-group": ColumnGroup,
  },
  setup() {
    const tableConfiguration = ref([
      [
        {
          header: "Section 1",
          colspan: 1,
          rowspan: 2,
        },
        {
          header: "Section 2",
          colspan: 2,
          rowspan: 1,
        },
      ],
      [
        {
          header: "Section 2.1",
          colspan: 1,
          rowspan: 1,
        },
        {
          header: "Section 2.2",
          colspan: 1,
          rowspan: 1,
        },
      ],
    ]);

    return { tableConfiguration };
  },
});
</script>

I get no error but an empty table header

Expected behavior
It should render the same table

Minimal reproduction of the problem with instructions
Setup a Vue project with PrimeVue and PrimeFlex and use the component posted above.

Please tell us about your environment:
OS: Windows
Browser: Chrome
IDE: Visual Studio Code
Package manager: npm

Vue version: ^3.0.0

PrimeVue version: ^3.10.0

[mitow7821]

I'am facing the same problem:
https://forum.primefaces.org/viewtopic.php?f=110&t=70134&p=196647#p196647

[JoramM]

Jep. Same here also with PrimeVue v3.11.0.

There is nothing shown with this code:

<ColumnGroup ...>
  <Row v-for="(total, idx) in totals" :key="idx">
    <Column ... />
    <Column ... />
  </Row>
</ColumnGroup>