Is it possible to make a multi-level grouping of rows in the vuetify.js data-table component?

Question

Vue.js

Hello. vuetifyjs has a nice data-table component . It can group rows by some parameter ( example ). But I need another level of grouping.

For example, in banking applications, you can see the expenses for the year (the first level), and then reveal the expenses for each month (the second level).

The question itself is: is it possible to somehow do this simply through the settings of this component, or do you need to draw it yourself?

Thanks in advance

Answer 1

So far I have solved the issue through the expanded-item. Maybe someone will come in handy. Thus, any level of nesting can be displayed. If someone offers a more elegant solution, I will be glad.

// componentName = 'componentA'
<v-data-table>
    <template v-slot:expanded-item>
        <componentA></componentA>
    </template>
</v-data-table>