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
  html: false, // if this is true, label will be rendered as html
  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;
  },
},

Customizing Header Row

If you want more control over what the header row looks like, you can use slots the same way you customize rows. For example if you want to add a button in the header row or something, this would be the way to do it.

When mode is 'span'

In this case, the header row spans across all columns

  <vue-good-table
    :columns="columns"
    :rows="rows"
    :group-options="{
      enabled: true,
      headerPosition: 'top',
    }">
    <template slot="table-header-row" slot-scope="props">
      <span class="my-fancy-class">
        {{ props.row.label }}
      </span>
    </template>
  </vue-good-table>
NameDietCount
Mammal
Elephant herbivore 5
Cat carnivore 28
Reptiles
Snake carnivore 40
lizard insectivore 34
Fish
Shark carnivore 2
koi omnivore 14

When mode is not 'span'

In this case header row expects a value for each column

  <vue-good-table
    :columns="columns"
    :rows="rows"
    :group-options="{
      enabled: true,
      headerPosition: 'top',
    }">
    <template slot="table-header-row" slot-scope="props">
      <span v-if="props.column.field == 'action'">
        <button class="fancy-btn">Action</button>
      </span>
      <span v-else>
        {{props.formattedRow[props.column.field]}}
      </span>
    </template>
  </vue-good-table>
NameDietCountAction
Mammal
Elephant herbivore 5
Cat carnivore 28
Reptiles
Snake carnivore 40
lizard insectivore 34
Fish
Shark carnivore 2
koi omnivore 14

NOTE

  • The original row object can be accessed via props.row
  • The column object can be accessed via props.column
  • You can access the formatted row data (for example - formatted date) via props.formattedRow
Last Updated: 7/17/2018, 2:58:05 PM