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:
{groupBy:'continent',groupMeta:[{value:'Africa',data:{population:1216,countries:54}},{value:'Asia',data:{population:4436countries:48}},{value:'Europe',data:{population:741.4,countries:50}}// etc...]}
<span slot="__group_meta" slot-scope="{ value, data }">{value} has {data.countries} countries and a population of {data.population} million</span>
Subscribers have access to data-level nested grouping. Simply 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