Grouping

Search…
Grouping
Grouping rows by a common value
The client component supports simple grouping of rows by a common value. By simple we mean that the grouping is merely presentational, and not backed by a real model-level data grouping (i.e the data is NOT divided into distinct arrays). you can group by any property on your dataset. For example, for a table of countries you can group by a `continent` property. Simply declare in your options groupBy:'continent'.
If you want to present some additional meta-data realted to each value, you can use the `groupMeta` option, along with the dedicated __group_meta scoped slot. For example:
1
{
2
    groupBy:'continent',
3
    groupMeta:[
4
       {
5
           value:'Africa',
6
           data:{
7
               population:1216,
8
               countries:54
9
           }
10
       },
11
       {
12
           value:'Asia',
13
           data:{
14
               population:4436
15
               countries:48
16
           }
17
       },
18
       {
19
           value:'Europe',
20
           data:{
21
               population:741.4,
22
               countries:50
23
           }
24
       }
25
       // etc...
26
    ]
27
    }
Copied!
1
<span slot="__group_meta" slot-scope="{ value, data }">
2
  {value} has {data.countries} countries and a population of {data.population} million
3
</span>
Copied!
Multiple Level Grouping
This feature is only available on vue-tables-2-premium and v-tables-3
To employ data-level nested grouping, pass an array to groupBy, e.g groupBy: ['country','city'] and you're good to go. The filteredData computed property will reflect the nested presentation.
use the VueTables__group-row--{level}`classes to apply background and padding to group rows
 
Asynchronous Loading
Filtering Algorithm
Last modified 2mo ago
Copy link
Contents
Multiple Level Grouping