DataTable template header when using expandableRows colspan wrong

[lucassmsilva]

When using expandableRows props, there's two issues that happen.
First, the row of the group doesnt have full width, it's always it a less colspan
Second, the row isnt flex so its harder to align it.
Below, the print and code example

When inspecting the row in the browser, will see that the colspan is wrong

<script setup>
import { ref } from 'vue';

const value = [
  {
    "name": "Sarah Miller",
    "age": 25,
    "email": "[email protected]",
    "birthdate": "1998-05-12",
    "project": "Marketing"
  },
  {
    "name": "John Smith",
    "age": 32,
    "email": "[email protected]",
    "birthdate": "1991-10-27",
    "project": "Design"
  },
  {
    "name": "Emily Jones",
    "age": 28,
    "email": "[email protected]",
    "birthdate": "1995-02-01",
    "project": "Development"
  },
  {
    "name": "Michael Lee",
    "age": 40,
    "email": "[email protected]",
    "birthdate": "1983-08-15",
    "project": "Design"
  },
  {
    "name": "Jessica Garcia",
    "age": 22,
    "email": "[email protected]",
    "birthdate": "2001-03-07",
    "project": "Marketing"
  },
];

const expandedRowGroups=ref();

</script>

<template>   

    <div class="w-full bg-blue-500">
        width full
    </div>


    <DataTable :value="value" 
        class="p-datatable-sm" 
        v-model:expandedRowGroups="expandedRowGroups"
        expandableRowGroups 
        rowGroupMode="subheader" groupRowsBy="project" sortMode="single"
        sortField="project" :sortOrder="1" scrollable scrollHeight="400px"
        tableStyle="min-width: 50rem"
        >
        
        <Column width="25%" field="name"></Column>
        <Column width="25%" field="age"></Column>
        <Column width="25%" field="email"></Column>
        <Column width="25%" field="birthdate"></Column>
        
        
        <template #groupheader="slotProps">
            <div class="flex flex-row w-full bg-red-500">
                {{ slotProps.data.project }}
            </div>
        </template>
</DataTable>
</template>

[tugcekucukoglu]

I've created a demo https://stackblitz.com/edit/zgmug5?file=src%2FApp.vue%3AL10 and cannot replicate the issue. Could you share a stackblitz link?

[WashingtonOlmos]

Hi, I have exactly the same problem, were you able to solve it? Could you share your solution with me?
The arrows show where the background color should be, but it doesn't.

my DataTable Configuration

[WashingtonOlmos]

I solved it by adding a column
<Column field="categoria.descripcion" header="Categoria"></Column>