1-vgt-grouped-summary

by Leo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-good-table/dist/vue-good-table.css">
<script src="https://unpkg.com/vue-good-table/dist/vue-good-table.js"></script>
<div id="app">
  <vue-good-table
    max-height="100%"
    :fixed-header="true"
    :columns="columns"
    :rows="rows"
    :group-options="{
      enabled: true,
      headerPosition: 'bottom',
    }"
    :search-options="{
      enabled: true
    }"> 
  </vue-good-table>                  
</div>

CSS

#app{
 padding: 20px;
}

JavaScript

new Vue({
  el: '#app',
  data() {
  	return{
    	columns: [
        {
          label: 'Name',
          field: 'name',
        },
        {
          label: 'Diet',
          field: 'diet',
          type: 'text',
        },
        {
          label: 'Count',
          field: 'count',
          headerField: this.sumCount,
          type: 'number',
        },
      ],
      rows: [
        {
          name: 'Mammal Total',
          diet: '',
          count: '',
          children: [
            { name: 'Elephant', diet: 'herbivore', count: 5 },
            { name: 'Cat', diet: 'carnivore', count: 28 },
            { name: 'Dog', diet: 'omnivore', count: 12 },
            { name: 'Dolphin', diet: 'carnivore', count: 9 },
          ],
        },
        {
          name: 'Reptile Total',
          diet: '',
          count: '',
          children: [
            { name: 'Snake', diet: 'carnivore', count: 40 },
            { name: 'lizard', diet: 'insectivore', count: 34 },
            { name: 'crocodile', diet: 'carnivore', count: 22 },
            { name: 'turtles', diet: 'herbivore', count: 29 },
          ],
        },
        {
          name: 'Fish Total',
          diet: '',
          count: '',
          children: [
            { name: 'Shark', diet: 'carnivore', count: 2 },
            { name: 'koi', diet: 'omnivore', count: 14 },
            { name: 'guppy', diet: 'omnivore000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000', count: 35 },
            
          ],
        },
        
        
        {
          name: 'Mammal Total',
          diet: '',
          count: '',
          children: [
            { name: 'Elephant', diet: 'herbivore', count: 5 },
            { name: 'Cat', diet: 'carnivore', count: 28 },
            { name: 'Dog', diet: 'omnivore', count: 12 },
            { name: 'Dolphin', diet: 'carnivore', count: 9 },
          ],
        },
        {
          name: 'Reptile Total',
...