vuetifyjs/vuetify · error · Error

Missing headers!

Error message

Missing headers!

What it means

Thrown by useHeaders() when inject(VDataTableHeadersSymbol) is undefined. Header/column state is provided by createHeaders() in the data-table root. Descendants (column components, slots) consume it via useHeaders().

Source

Thrown at packages/vuetify/src/components/VDataTable/composables/headers.ts:348

      }

      if (header.filter) {
        filterFunctions.value[header.key] = header.filter
      }
    }
  })

  const data = { headers, columns, sortFunctions, sortRawFunctions, filterFunctions }

  provide(VDataTableHeadersSymbol, data)

  return data
}

export function useHeaders () {
  const data = inject(VDataTableHeadersSymbol)

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

  return data
}

View on GitHub (pinned to 8d153908df)

Solutions

1. Call useHeaders() only inside descendants of a VDataTable-family component.
2. For a custom table, call createHeaders(...) and provide(VDataTableHeadersSymbol, data).
3. Make sure only one copy of Vuetify is installed (check pnpm/npm for duplicates).

Example fix

// before
const { columns } = useHeaders()

// after
import { createHeaders, VDataTableHeadersSymbol } from 'vuetify/components/VDataTable/composables/headers'
const data = createHeaders(/* props */)
provide(VDataTableHeadersSymbol, data)

import { inject } from 'vue'
import { VDataTableHeadersSymbol } from 'vuetify/components/VDataTable/composables/headers'
function hasHeadersProvider(): boolean {
  return inject(VDataTableHeadersSymbol, null) != null
}

import { inject } from 'vue'
import { VDataTableHeadersSymbol } from 'vuetify/components/VDataTable/composables/headers'
function insideHeadersTable(): boolean {
  return inject(VDataTableHeadersSymbol, null) != null
}

try {
  useHeaders()
} catch (e) {
  if (e instanceof Error && /Missing headers/.test(e.message)) {
    // no header context; degrade gracefully
  } else throw e
}

When it happens

Trigger: Calling useHeaders() outside a VDataTable-family provider, e.g. in a standalone column editor or a header slot rendered outside the table.

Common situations: Building a custom data-table shell without createHeaders, rendering header-related components outside the table's provide scope, or duplicate Vuetify installs breaking symbol identity.

Related errors

• foo
• Missing group!
• Missing pagination!
• Missing selection!
• Missing sort!

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