vuetifyjs/vuetify · error · Error

Missing group!

Error message

Missing group!

What it means

Thrown by useGroupBy() when inject(VDataTableGroupSymbol) is undefined. The grouping state is created by createGroupBy() and provided by the data-table root; descendants consume it via this composable.

Source

Thrown at packages/vuetify/src/components/VDataTable/composables/group.ts:145

        }
      }

      return [...new Set(arr)]
    }
    return dive({ type: 'group', items, id: 'dummy', key: 'dummy', value: 'dummy', depth: 0 })
  }

  const data = { sortByWithGroups, toggleGroup, opened, groupBy, extractRows, isGroupOpen }

  provide(VDataTableGroupSymbol, data)

  return data
}

export function useGroupBy () {
  const data = inject(VDataTableGroupSymbol)

  if (!data) throw new Error('Missing group!')

  return data
}

function groupItemsByProperty <T extends GroupableItem> (items: readonly T[], groupBy: string) {
  if (!items.length) return []

  const groups = new Map<any, T[]>()
  for (const item of items) {
    const value = getObjectValueByPath(item.raw, groupBy)

    if (!groups.has(value)) {
      groups.set(value, [])
    }
    groups.get(value)!.push(item)
  }

  return groups

View on GitHub (pinned to 8d153908df)

Solutions

1. Call useGroupBy() only inside descendants of a VDataTable/VDataTableServer/VDataTableVirtual.
2. If building a custom table, run createGroupBy(...) and provide(VDataTableGroupSymbol, data) first.
3. Confirm Vuetify version is consistent across the app (symbol identity can break with duplicates).

Example fix

// before
const { toggleGroup } = useGroupBy()

// after — ensure a VDataTable ancestor exists, or self-provide:
import { createGroupBy, VDataTableGroupSymbol } from 'vuetify/components/VDataTable/composables/group'
const data = createGroupBy(/* props */, /* emit */)
provide(VDataTableGroupSymbol, data)

import { inject } from 'vue'
import { VDataTableGroupSymbol } from 'vuetify/components/VDataTable/composables/group'
function hasGroupProvider(): boolean {
  return inject(VDataTableGroupSymbol, null) != null
}

import { inject } from 'vue'
import { VDataTableGroupSymbol } from 'vuetify/components/VDataTable/composables/group'
function insideGroupTable(): boolean {
  return inject(VDataTableGroupSymbol, null) != null
}

try {
  useGroupBy()
} catch (e) {
  if (e instanceof Error && /Missing group/.test(e.message)) {
    // provide default or skip feature
  } else throw e
}

When it happens

Trigger: Calling useGroupBy() in a component that is not a descendant of a VDataTable-family component (which runs createGroupBy and provides the symbol).

Common situations: Importing the internal group composable into a standalone component, using a slot-rendered child outside the table's provide tree, or version mismatch where the symbol key differs.

Related errors

• foo
• Missing headers!
• Missing pagination!
• Missing selection!
• Missing sort!

AI-assisted analysis of vuetifyjs/vuetify@8d153908df (2026-08-12). Data as JSON: /api/errors/16858f8f1103382f. Report an issue: GitHub.