Do you have a UX team? I Would really appreciate their feedback on my new product - UserBit

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 within header rows containing data rows in their children property. For example:

rows: [
  {
    mode: "span", // span means this header will span all columns
    label: "Mammal", // 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: "Elephant", diet: "herbivore", count: 5 },
      { name: "Cat", diet: "carnivore", count: 28 }
    ]
  }
];
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 count for your group

rows: [
  {
    name: "Mammals Total", // this is the label that'll be used for the header
    diet: undefined,
    count: "", // total count will be displayed here
    children: [
      { name: "Elephant", diet: "herbivore", count: 5 },
      { name: "Cat", diet: "carnivore", count: 28 }
    ]
  }
];

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
  • 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/4/2019, 7:48:15 PM