> For the complete documentation index, see [llms.txt](https://matanya.gitbook.io/vue-tables-2/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://matanya.gitbook.io/vue-tables-2/client-table/grouping.md).

# Grouping

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:

```javascript
{
    groupBy:'continent',
    groupMeta:[
       {
           value:'Africa',
           data:{
               population:1216,
               countries:54
           }
       },
       {
           value:'Asia',
           data:{
               population:4436
               countries:48
           }
       },
       {
           value:'Europe',
           data:{
               population:741.4,
               countries:50
           }
       }
       // etc...
    ]
    }
```

```markup
<span slot="__group_meta" slot-scope="{ value, data }">
  {value} has {data.countries} countries and a population of {data.population} million
</span>
```

### Multiple Level Grouping

{% hint style="info" %}
This feature is only available on vue-tables-2-premium and v-tables-3
{% endhint %}

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.

![](/files/-M5AhCs-ZgbZVMjLaRHB)

{% hint style="info" %}
use the `` VueTables__group-row--{level}` ``classes to apply background and padding to group rows
{% endhint %}

&#x20;