Grouped Table

To create grouped rows, you need two things.

1. Add groupOptions to table component

<vue-good-table
  :columns="columns"
  :rows="rows"
  :groupOptions="{
  	enabled: true
  }">
</vue-good-table>

2. Make sure the rows are formatted correctly. Grouped rows need to be nested with headers rows containing rows in their children property. For example:

rows: [{
  mode: 'span', // span means this header will span all columns
  label: 'Header Two', // this is the label that'll be used for the header
  children: [
    { name: 'Chris', age: 55, createdAt: '2011-10-11', score: 0.03343 },
    { name: 'Dan', age: 40, createdAt: '2011-10-21', score: 0.03343 },
  ]
}]
NameDietCount
Mammal
Elephant herbivore 5
Cat carnivore 28
Reptiles
Snake carnivore 40
lizard insectivore 34
Fish
Shark carnivore 2
koi omnivore 14

3. Sometimes, you might want a summary row instead of a header row. For example, if you want to show total score for your group

rows: [{
  name: 'Total', // this is the label that'll be used for the header
  age: undefined,
  createdAt: undefined,
  score: 0.3, // total score here
  children: [
    { name: 'Chris', age: 55, createdAt: '2011-10-11', score: 0.03343 },
    { name: 'Dan', age: 40, createdAt: '2011-10-21', score: 0.03343 },
  ]
}]

4. If you want the header/summary row to show up at the bottom of the group, you can specify that in the groupOptions property of the table.

<vue-good-table
  :columns="columns"
  :rows="rows"
  :groupOptions="{
  	enabled: true,
    headerPosition: 'bottom',
  }">
</vue-good-table>
NameDietCount
Elephant herbivore 5
Cat carnivore 28
Mammal
Snake carnivore 40
lizard insectivore 34
Reptiles
Shark carnivore 2
koi omnivore 14
Fish

5. What if you wanted to add a total count in summary rows?

In your column definition add a property, headerField. This is just like field property but for summary/header rows only. So lets say we wanted to add a sum function to this field.

// in columns
{
  label: 'Count',
  field: 'count',
  headerField: this.sumCount,
  type: 'number',
},

// in methods we define sumCount
methods: {
  sumCount(rowObj) {
    console.log(rowObj);
    let sum = 0;
    for (let i = 0; i < rowObj.children.length; i++) {
      sum += rowObj.children[i].count;
    }
    return sum;
  },
},