[Feature Request] data-table: ability to group headers/columns

Problem to solve

It is currently not possible to group table headers / columns so that related headers can have a common title above them.

There are various use cases across different industries for being able to create column groups, especially when doing multi-dimension comparisons (I can provide real-world examples if needed).

Proposed solution

From a props perspective, I think one could augment the current :headers prop to accept nested column definitions. Something along these lines:

[
{ text: 'Total', value: 'yearlyTotal', align: 'left' },
{
 text: 'Q1 2019',
 align: 'center',
 headers: [
    { text: 'Travel', value: 'travelQ1' },
    { text: 'Food', value: 'foodQ1' },
    { text: 'Equipment', value: 'equipmentQ1' }
  ]
},
{
{
 text: 'Q2 2019',
 align: 'center',
 headers: [
    { text: 'Travel', value: 'travelQ2' },
    { text: 'Food', value: 'foodQ2' },
    { text: 'Equipment', value: 'equipmentQ2' }
  ]
}
]

Column nesting / grouping to continue recursively (meaning the developer could create as much grouping and sub-groupings as they need). Column groups would not be sortable nor filtrable, only individual columns.

[nikoaliro]

Sorry for the late response. I can see my custom header placed under the default one, it is not replacing the default header with the custom one. This is my code:

<v-data-table ...>
  <template v-slot:header="props" >
    <tr><th>...</th></tr>
    <tr><th>...</th></tr>
  </template>
</v-data-table>

Using this info, it turns out you can simply implement your own categories line above the default headers if you just add <thead> in the slot template. Leaving out the <thead>, as you said, puts it underneath.

<v-data-table ...>
  <template v-slot:header="props" >
    <thead>
      <tr>
        <th colspan="2">Category 1</th>
        <th colspan="3">Category 2</th>
      </tr>
    </thead>
  </template>
</v-data-table>

[nekosaur]

yes, you have to manually set hide-default-header