Feature Request: Native row grouping support for QTable

[davidyarkan]

Problem

QTable currently supports sorting, filtering, pagination, virtual scrolling, custom body slots, etc., but there is no native mechanism for grouping rows by one or more fields.

Grouping currently requires preprocessing the dataset and/or manually injecting group rows through slots. This makes common use cases such as hierarchical data presentation, subtotals, and collapsible groups unnecessarily complex.

Proposed Feature

Add native row grouping support to QTable, similar to the groupBy functionality available in other table libraries such as Vue Good Table.

For example:

<q-table
  :rows="rows"
  :columns="columns"
  :group-by="['category']"
/>

Given:

const rows = [
  { category: 'Hotels', name: 'Hotel A', price: 100 },
  { category: 'Hotels', name: 'Hotel B', price: 150 },
  { category: 'Tours', name: 'City Tour', price: 50 },
  { category: 'Tours', name: 'Museum Tour', price: 30 }
]

The table would internally group the rows:

Hotels
  Hotel A    100
  Hotel B    150

Tours
  City Tour   50
  Museum Tour 30

Suggested API

Basic grouping

<q-table
  :rows="rows"
  :columns="columns"
  :group-by="['category']"
/>

Multiple grouping levels

<q-table
  :rows="rows"
  :columns="columns"
  :group-by="['destination', 'category']"
/>

Resulting hierarchy:

Lima
  Hotels
    Hotel A
    Hotel B

  Tours
    City Tour

Cusco
  Hotels
    Hotel C

  Tours
    Sacred Valley

Group configuration

A configuration object could provide additional behavior:

<q-table
  :rows="rows"
  :columns="columns"
  :group-by="[
    {
      field: 'category',
      expanded: true
    }
  ]"
/>

Or alternatively:

<q-table
  :rows="rows"
  :columns="columns"
  :group-by="['category']"
  :group-expandable="true"
/>

Group slots

There should be a dedicated slot for rendering a group header:

<template #group="props">
  <q-tr>
    <q-td :colspan="columns.length">
      {{ props.value }}
    </q-td>
  </q-tr>
</template>

The slot scope could expose information such as:

{
  value,
  field,
  level,
  rows,
  count,
  expanded,
  toggle
}

This would allow applications to implement custom group headers, icons, counters, totals, etc.

Group-level aggregation

It would also be useful to expose group rows to the existing aggregation mechanisms.

For example:

Hotels (2)
  Hotel A                 $100
  Hotel B                 $150
  ----------------------------
  Total                   $250

Potentially:

<template #group-footer="props">
  ...
</template>

with access to:

{
  rows,
  aggregations
}

Interaction with existing QTable features

Grouping should ideally integrate with existing QTable functionality:

• Sorting
• Filtering
• Pagination
• Virtual scrolling
• Selection
• Row expansion
• Custom body slots
• Sticky headers
• Server-side pagination
• Server-side sorting/filtering

The important point is that grouping should be part of the table's row model rather than requiring users to modify the original rows array by inserting artificial group rows.

State management

For expandable groups, the expanded state could be controlled similarly to row expansion:

<q-table
  v-model:expanded-groups="expandedGroups"
  :group-by="['category']"
/>

For example:

const expandedGroups = ref([
  'Hotels'
])

Ideally, group keys should be generated deterministically, especially when using multiple grouping levels.

Why native support is useful

Without native grouping, implementing this generally requires:

1. Transforming the original dataset.
2. Creating artificial rows representing groups.
3. Handling group expansion manually.
4. Maintaining group state separately.
5. Modifying sorting/filtering behavior.
6. Handling pagination correctly.
7. Handling virtual scrolling correctly.
8. Implementing custom rendering through slots.

This becomes particularly difficult when several QTable features are used simultaneously.

A native implementation could keep grouping as part of the table's internal row-processing pipeline:

raw rows
   ↓
filter
   ↓
sort
   ↓
group
   ↓
paginate / virtualize
   ↓
render

rather than requiring applications to emulate grouping at the data level.

Expected behavior

Grouping should not modify the original rows supplied by the user.

For example:

rows.value

should remain:

[
  { category: 'Hotels', name: 'Hotel A' },
  { category: 'Hotels', name: 'Hotel B' },
  { category: 'Tours', name: 'City Tour' }
]

The grouping should be a presentation/data-processing concern handled internally by QTable.

References

A similar concept is implemented by Vue Good Table through row grouping. The goal is not necessarily to reproduce its API, but to provide equivalent functionality following Quasar's existing API conventions.

This would be particularly valuable for applications that need to represent hierarchical or categorized datasets while retaining the existing QTable features.