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

[morficus]

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.

[johnleider]

Is this not possible in v2 @nekosaur ?

[nekosaur]

No. This is talking about grouping columns, now rows.

[vschimpf]

This was possible in v1 by using the headers slot. I tried the same in v2 using the header slot, but the column group didn't work. Also saw in documentation that there is a group.header slot, but don't know how to use it. I couldn't find any example of grouping column header for v2.

[nekosaur]

header slot should be pretty much identical to old headers slot. What didn't work?

[vschimpf]

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>

And the resultant table is:

<table>
  <colgroup>...</colgroup>
  <tr><th>...</th></tr>
  <tr><th>...</th></tr>
  <thead class="v-data-table-header">
    <tr>...</tr>
  </thead>
  ...
</table>

So I have to manually set hide-default-header and add <thead class="v-data-table-header"> under the template scope in order to actually replace the default header with my own. I thought that "header" slot would automatically hide the default header and place my stuff under the thead tag, but is not doing that. So is this other way how it is expected to use it? Thanks!

[nekosaur]

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

[mandaputtra]

So, for now, it must be added manually? Like these?

I'm using V2 here the codepen, but on mobile, it's kinda screw up, how to disable the styling on mobile ?

[krishnarhl]

@nekosaur Is this feature implemented yet?

[mandaputtra]

@krishnarhl as long it is still open it is not implemented for now use my method to do this kind of stuff or you can use simple table to do this

[ghost]

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>

[KaelWD]

v3 accepts a 2d headers array, where each inner array is a new row

[
  [
    { title: 'Total', value: 'yearlyTotal', rowspan: 2 },
    {
      title: 'Q1 2019',
      align: 'center',
      colspan: 3,
    },
    {
      title: 'Q2 2019',
      align: 'center',
      colspan: 3,
    }
  ],
  [
    { title: 'Travel', value: 'travelQ1' },
    { title: 'Food', value: 'foodQ1' },
    { title: 'Equipment', value: 'equipmentQ1' },
    { title: 'Travel', value: 'travelQ2' },
    { title: 'Food', value: 'foodQ2' },
    { title: 'Equipment', value: 'equipmentQ2' }
  ],
]

"groups" can be used for filtering or sorting if they have a key property