v2 DataTable Dynamic Row defect

[Quentin-L21]

Hello everyone,

I'm submitting a ...

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

Current behavior
I recently updated PrimeVue version from 2.3.0 to 2.8.0 and I discovered a bug regarding the filter functionnality on the ColumnGroup of a Datatable.

This is the current behavior :

I've a filter on LY BUD and AI FCST columns. If I uncheck one of the filter, it filters the columns on the rows under but not on the row with the columns LY/BUD/...

I'm using the following hierarchy for my datatable :

<Datatable>
 <template #header>
        <div>
          <MultiSelect
            v-model="selectedOnlyEditable"
            :options="onlyEditable"
            optionLabel="header"
            @input="onToggle"
            placeholder="Select Columns"
            style="width: 20rem"
            class="f-12"
          />
        </div>
 </template>
 <ColumnGroup type="header">
     <Row>
         <Column /> --> JAN 2021 Column
         <Column /> --> FEB 2021 Column 
         ...
     </Row>
     <Row>
          <Column
            v-for="(col, index) of selectedSubColumns"
            :field="col.field"
            :header="col.header"
            :key="col.field + '_' + index"
            :headerClass="
              (col.header == firstColumnLabel ? 'w-125' : 'w-50') +
              ' f-095 align-right ' +
              columnBodyClass(col)
            "
            :bodyClass="col.bodyClass"
            :frozen="col.isFrozen"
            :sortable="col.header != firstColumnLabel"
          >
          </Column> --> Those are the columns that are not updating in the datatable on filter
        </Row>
 </ColumnGroup>
  <Column
        v-for="(col, index) of selectedSubColumns"
        :field="col.field"
        :header="col.header"
        :key="col.field + '_' + index"
        :bodyClass="columnBodyClass(col)"
        :frozen="col.header == firstColumnLabel"
      >
        <template #body="slotProps">
          {{ getFixedValue(slotProps.data[slotProps.column.field]) }}
        </template>
  </Column> --> Those are the columns updating in the datatable on filter 
</Datatable>

The onToggle function in the multiSelect is updating the selectedSubColumns array.

Expected behavior
The dynamic columns in a ColumnGroup should be updated after a filter is applied on them.

I saw a similar issue (#1630) but it seems like you resolved it in this commit (a51f26c).

Is it possible for you to resolve it in version 2.8.0 (I can't update in Vue version 3.0) or do you have any workaround for me ?

My environment:

• Vue version: 2.6.10

• PrimeVue version: 2.8.0

• Browser: all

Thanks a lot !

Kind regards,
Quentin

[tugcekucukoglu]

This codesandbox works. What am I missing?

[tugcekucukoglu]

Any update?

[Quentin-L21]

Hi @tugcekucukoglu , I'll have a look into it this week-end or monday ! I'll let you know and I'll update the sandbox to reproduce the problem I'm facing. Thank you !

[Quentin-L21]

Hi @tugcekucukoglu , I tried to reproduce the problem in the following sandbox : https://codesandbox.io/s/frosty-goldstine-57x5er?file=/src/App.vue

The problem is that when I remove one column everything is not aligned anymore :

Thank you !
Quentin

[tugcekucukoglu]

Could you test with latest PrimeVue 2 version? With 2.8.0 we reimplemented PrimeVue 3 DataTable for PrimeVue 2.

If problem is still persist please reopen this issue.

Thanks,