DataTable: row group header colspan doesn't span full row when table has selection column

[iampeternguyen]

Describe the bug

When using selection column and row group headers, the colspan for the row group header doesn't count the select column so it doesn't span the full row.

Reproducer

https://codesandbox.io/s/modest-hamilton-q4v4nl

PrimeVue version

2.10.1

Vue version

2.x

Language

ALL

Build / Runtime

Vue CLI App

Browser(s)

No response

Steps to reproduce the behavior

See code sandbox and inspect row group header. colspan is 3 when it should be 4.

Expected behavior

colspan for group headers should also include the selection column to span the full row.

[may820806]

same in 3.12.2.

[csmaller]

any fix for this? having the same problem : vue 3

[iampeternguyen]

@csmaller we ended up doing a workaround by wrapping the table in another component and manually setting the colspan. here's an updated codesanbox with an example https://codesandbox.io/s/angry-sara-iqkzs6. I can't remember if the setTimeout was needed or if nextTick would have been fine, but either way I think you'd get the main idea.

[csmaller]

Thank you, I had to do a similar workaround almost the same code and yours seems a bit more elegant. I need to make an async call to get the data first so a timeout didn't work...and a I have three tables with multiple selections and different column count so It needs to get each colspan then add 1 to each, plus it is in Vue3.

For anyone using Vue3 using TS I will post what I did here:

`const addColspanToHeader = () => {

const groupHeaders = document.querySelectorAll("table tbody .p-rowgroup-header td")

for (let item of groupHeaders) {
const newColspan = parseInt(item.colSpan) + 1;
item.colSpan = newColspan;
}
};`

[alansgonzaga]

Same probleme here, I used @csmaller code, and it worked for when I load the table, but when I make a sort or a filter, it goes back to the problem. My workaround was to get the emits for sort, filtering, rowschange... I got all of them, and made them all call the function addColspanToHeader() with a timeout to execute... Worked, but kind of messy...

Problem:

With workaround:

[csmaller]

3.34.1 still not working. steps: updated primevue in package.json to 3.34.1 cleared cache and opened in Incognito. Still broken

[kkurys]

I did not see your code, but are you grouping using a column rendered within the table?
I suspect this issue is happening because when you do use it, it hides that column and therefore reduces the number of columns shown and that results in the wrong colspan applied on the group header.

[csmaller]

I included one of the data tables that is causing this problem. Could be a few variables that are causing this. maybe you can see the problem better than I... thanks

<DataTable
          v-model:selection="invoicesToGenerateSelected"
          v-model:filters="filters"
          filter-display="menu"
          :value="invoicesReadyToGenerate"
          :total-records="invoicesReadyToGenerate?.length || 0"
          data-key="id"
          row-group-mode="subheader"
          group-rows-by="organization_id"
          :lazy="true"
          loading-icon="logo-spinner"
          :loading="billingStore.loading"
          responsive-layout="scroll"
          class="text-sm"
        >
          <Column selection-mode="multiple" header-style="width: 4em">
            <template #body="{ data }">
              <Checkbox v-else v-model="invoicesToGenerateSelected" :value="data" :disabled="isGeneratingInvoices" />
            </template>
          </Column>
          <Column field="invoice_number" header="Invoice #">
            <template #body="{ data }">
              <span
                class="text-primary font-semibold cursor-pointer"
                @click="openBillingModal(data.id)"
                v-text="data.invoice_number"
              />
            </template>
          </Column>
          <Column field="dates" header="Dates">
            <template #body="{ data }">
              {{ dateUtilities.formatIntlDate(data.start_at) }} - {{ dateUtilities.formatIntlDate(data.end_at) }}
            </template>
          </Column>
          <Column field="send_on" header="Send On">
            <template #body="{ data }">
              {{ dateUtilities.formatIntlDate(data.send_on) }}
            </template>
          </Column>
          <Column field="totals" header="Invoice Totals">
            <template #body="{ data }">
              {{ useCurrency().formatCurrency(data.total) }}
            </template>
          </Column>
          <template #groupheader="{ data }">
            <div class="flex gap-2 align-items-center bg-primary-100">
              <span class="mr-2 text-gray-600 font-semibold text-sm">{{ data.organization.name }}</span>
              <Icon
                v-if="data.organization.location"
                v-tooltip.bottom="{
                  value: subTag(data.organization.location),
                  escape: true,
                  fitContent: true,
                }"
                name="info"
                class="text-primary-500 text-base cursor-pointer"
              />
              <span v-if="data.third_party" class="third-party font-bold">3rd Party</span>
              <span v-if="data.prepay" class="prepay font-bold">Prepay</span>
            </div>
          </template>
        </DataTable>

[kkurys]

@csmaller Please try adding another column:

          <Column field="organization_id" header="">
          </Column>

This won't render anyways, but will resolve the issue of the subheader spanning wrong number of columns (I think :D)

[rlisper]

@csmaller Please try adding another column:

          <Column field="organization_id" header="">
          </Column>

This won't render anyways, but will resolve the issue of the subheader spanning wrong number of columns (I think :D)

It doesn't work. It makes empty space in the rest of row a little lower than before

Edit: it works but not add it in the rest of row

[deyanaaliyah]

I know the issue is closed but kkurys made a nice suggestion.

I'm using

• vue 3.2.x
• primevue 3.49.x

I added an extra empty column and it helped.

<template>
        <DataTable>
                <Column field="field1" header="field1"></Column>
                <Column field="field1" header="field1"></Column>
                <Column field="field2" header="field2"></Column>
                <Column field="field3" header="field3"></Column>
                <Column field="field4" header="field4"></Column>
                <Column field="field5" header="field5"></Column>

               <!-- Added this -->
               <Column field="" header="" style="display: none;"></Column>
        </DataTable>
</template>

[philipimperato]

Was this fixed in 4.1? I can't seem to make this work.

[majoess]

@philipimperato still not fixed but @deyanaaliyah answer #3685 (comment) works for now great.