diff --git a/.claude/rules/composables.md b/.claude/rules/composables.md
index 52c37e375..8a528ba3f 100644
--- a/.claude/rules/composables.md
+++ b/.claude/rules/composables.md
@@ -26,6 +26,7 @@ Scope-specific mechanics for `packages/0/src/composables/**`. Covers naming, fac
 - §6.6 `useProxyModel`
 - §6.7 `useProxyRegistry`
 - §6.8 Register / unregister lifecycle contract
+- §6.10 Collection composables: no `items` option
 - §7 Events & lifecycle
 - §9 Errors & invariants
 
@@ -343,6 +344,10 @@ const table = createDataTable({
 - The composable has exactly one correct implementation, and consumers have no reason to swap it. Example: `useHotkey` — the listener semantics are fixed.
 - You want to switch behavior based on a boolean flag. Use an option (`mode: 'client' | 'server'`) rather than dressing it up as an adapter. Adapters are for swapping *implementations*, not for flipping a known toggle.
 
+### Collection composables: no `items` option
+
+A composable that owns a collection of values exposes `register` / `onboard` / `unregister`. It never accepts an `items` option in its factory — row identity, order, and per-row state live in the registry. Followed by `createRegistry`, `createModel`, `createSelection`, `createSingle`, `createGroup`, `createStep`, `createNested`, `createSortable`, `createKanban`, `createQueue`, `createTimeline`, `createTokens`, and (after the recent refactor) `createDataTable` and `createDataGrid`. Full rule and migration shape: PHILOSOPHY §6.10.
+
 ### `useProxyModel` and `useProxyRegistry` — cross-link
 
 Both composables are covered in PHILOSOPHY §6.6 and §6.7. Repeating the when-to-use summary here for composable authors:
@@ -494,3 +499,4 @@ Pure transformers (`toRef`, `toElement`, `toValue`) are fine to call inline —
 - [ ] No DOM event binding inside the composable
 - [ ] ID generation through `useId()`
 - [ ] Trinity return only from `createTrinity` / `createContext` / `createPlugin`
+- [ ] Composable that owns a collection of values uses `register` / `onboard`, never an `items` option (PHILOSOPHY §6.10)
diff --git a/.claude/rules/new-feature-checklist.md b/.claude/rules/new-feature-checklist.md
index 5e822739a..343ed3ec4 100644
--- a/.claude/rules/new-feature-checklist.md
+++ b/.claude/rules/new-feature-checklist.md
@@ -189,3 +189,4 @@ Prefer extending an existing pattern over creating a new one.
 - [ ] Feature appears in `apps/docs/build/generated/api-whitelist.ts` after build
 - [ ] `<DocsApi />` renders on the new docs page
 - [ ] Maturity level matches the promotion criteria table (don't self-promote to `stable` or `mature` — those require a maintainer)
+- [ ] Collection composable surface uses `register` / `onboard` (no `items` option) — see PHILOSOPHY §6.10
diff --git a/apps/docs/src/components/docs/DocsFaq.vue b/apps/docs/src/components/docs/DocsFaq.vue
index b4aac3c34..5faf632ef 100644
--- a/apps/docs/src/components/docs/DocsFaq.vue
+++ b/apps/docs/src/components/docs/DocsFaq.vue
@@ -1,14 +1,56 @@
-<script setup lang="ts">
+<script lang="ts">
   // Framework
-  import { ExpansionPanel } from '@vuetify/v0'
+  import { createFilter, createFilterContext, ExpansionPanel } from '@vuetify/v0'
+
+  // Utilities
+  import { toRef, useSlots } from 'vue'
+
+  export const [useFaqFilter, provideFaqFilter] = createFilterContext({
+    namespace: 'docs:faq',
+  })
+</script>
 
-  const props = defineProps<{
+<script setup lang="ts">
+  const { multiple = true } = defineProps<{
     multiple?: boolean
   }>()
+
+  const slots = useSlots()
+  const filter = createFilter()
+  provideFaqFilter(filter)
+
+  const count = toRef(() => {
+    const items = slots.default?.() ?? []
+    return items.filter(v => (v.type as { __name?: string })?.__name === 'DocsFaqItem').length
+  })
+
+  const show = toRef(() => count.value >= 5)
+
+  function onInput (e: Event) {
+    filter.query.value = (e.target as HTMLInputElement).value
+  }
 </script>
 
 <template>
-  <ExpansionPanel.Group class="flex flex-col gap-3 my-6" :multiple="props.multiple ?? true">
-    <slot />
-  </ExpansionPanel.Group>
+  <div class="my-6">
+    <div v-if="show" class="relative mb-3">
+      <AppIcon
+        class="absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant pointer-events-none"
+        icon="search"
+        :size="16"
+      />
+
+      <input
+        class="w-full pl-9 pr-3 py-2 text-sm bg-surface-tint border border-divider rounded-lg outline-none focus:border-primary transition-colors placeholder:text-on-surface-variant"
+        placeholder="Search FAQ..."
+        type="text"
+        :value="filter.query.value"
+        @input="onInput"
+      >
+    </div>
+
+    <ExpansionPanel.Group class="flex flex-col gap-3" :multiple>
+      <slot />
+    </ExpansionPanel.Group>
+  </div>
 </template>
diff --git a/apps/docs/src/components/docs/DocsFaqItem.vue b/apps/docs/src/components/docs/DocsFaqItem.vue
index b7be753dd..f7e3236ec 100644
--- a/apps/docs/src/components/docs/DocsFaqItem.vue
+++ b/apps/docs/src/components/docs/DocsFaqItem.vue
@@ -2,13 +2,23 @@
   // Framework
   import { ExpansionPanel } from '@vuetify/v0'
 
-  defineProps<{
+  // Context
+  import { useFaqFilter } from './DocsFaq.vue'
+
+  // Utilities
+  import { toRef } from 'vue'
+
+  const { question } = defineProps<{
     question: string
   }>()
+
+  const filter = useFaqFilter()
+  const result = filter.apply(filter.query, () => [question])
+  const visible = toRef(() => result.items.value.length > 0)
 </script>
 
 <template>
-  <ExpansionPanel.Root>
+  <ExpansionPanel.Root v-show="visible">
     <ExpansionPanel.Activator
       v-slot="{ isSelected }"
       class="w-full list-item-bordered flex items-center gap-3 text-left"
diff --git a/apps/docs/src/examples/composables/create-data-grid/basic/BasicGrid.vue b/apps/docs/src/examples/composables/create-data-grid/basic/BasicGrid.vue
new file mode 100644
index 000000000..30a8454e0
--- /dev/null
+++ b/apps/docs/src/examples/composables/create-data-grid/basic/BasicGrid.vue
@@ -0,0 +1,323 @@
+<script setup lang="ts">
+  import { nextTick, ref, shallowRef, useTemplateRef } from 'vue'
+  import { mdiArrowUp, mdiArrowDown, mdiChevronUp, mdiChevronDown } from '@mdi/js'
+  import {
+    createDataGrid,
+    useClickOutside,
+    useEventListener,
+    useHotkey,
+    useToggleScope,
+  } from '@vuetify/v0'
+  import type { ID } from '@vuetify/v0'
+  import { columns } from './columns'
+  import { projects } from './data'
+
+  const grid = createDataGrid({
+    columns,
+    rowReordering: true,
+    editing: {
+      onEdit (row, column, value) {
+        const item = projects.find(p => p.id === row)
+        if (item) {
+          (item as Record<string, unknown>)[column] = column === 'budget'
+            ? Number(value)
+            : value
+        }
+      },
+    },
+  })
+
+  grid.onboard(projects.map(value => ({ id: value.id, value })))
+
+  // -- Resize --
+  const resizing = shallowRef<string | null>(null)
+  let startX = 0
+  let table: HTMLElement | null = null
+  let resized = false
+
+  function onResizeStart (key: string, event: PointerEvent) {
+    resizing.value = key
+    startX = event.clientX
+    table = (event.target as HTMLElement).closest('table')
+  }
+
+  useToggleScope(
+    () => !!resizing.value,
+    () => {
+      useEventListener(document, 'pointermove', (event: PointerEvent) => {
+        if (!resizing.value || !table) return
+        const delta = ((event.clientX - startX) / table.clientWidth) * 100
+        startX = event.clientX
+        grid.layout.resize(resizing.value, delta)
+      })
+      useEventListener(document, 'pointerup', () => {
+        resizing.value = null
+        table = null
+        resized = true
+        requestAnimationFrame(() => {
+          resized = false
+        })
+      })
+    },
+  )
+
+  function canResize (key: string) {
+    const { left, scrollable, right } = grid.layout.pinned.value
+    const region = left.some(c => c.key === key)
+      ? left
+      : (right.some(c => c.key === key) ? right : scrollable)
+    const index = region.findIndex(c => c.key === key)
+    return index !== -1 && index < region.length - 1
+  }
+
+  // -- Sort --
+  function onSort (key: string) {
+    if (resized) return
+    grid.sort.toggle(key)
+  }
+
+  // -- Editing --
+  const input = ref('')
+  const editRef = useTemplateRef<HTMLInputElement>('edit-input')
+  const cell = useTemplateRef<HTMLTableCellElement>('active-cell')
+
+  function onEdit (row: ID, column: string, value: unknown) {
+    const col = columns.find(c => c.key === column)
+    if (!col?.editable) return
+    grid.editing.edit(row, column)
+    input.value = String(value ?? '')
+    nextTick(() => {
+      editRef.value?.focus()
+      editRef.value?.select()
+    })
+  }
+
+  function isEditing (row: ID, column: string) {
+    const a = grid.editing.active.value
+    return a?.row === row && a?.column === column
+  }
+
+  useToggleScope(
+    () => !!grid.editing.active.value,
+    () => {
+      useClickOutside(cell, () => grid.editing.cancel())
+      useHotkey('escape', () => grid.editing.cancel(), { inputs: true })
+    },
+  )
+
+  // -- Helpers --
+  function label (key: string) {
+    return columns.find(c => c.key === key)?.title ?? key
+  }
+
+  function tint (v: number) {
+    if (v > 70) return 'bg-success'
+    if (v >= 30) return 'bg-warning'
+    return 'bg-error'
+  }
+</script>
+
+<template>
+  <div class="flex flex-col gap-2">
+    <div class="flex items-center gap-2">
+      <input
+        class="flex-1 px-3 py-1.5 text-sm border border-divider rounded bg-surface text-on-surface outline-none focus:border-primary"
+        placeholder="Search..."
+        type="text"
+        :value="grid.query.value"
+        @input="grid.search(($event.target as HTMLInputElement).value)"
+      >
+
+      <button
+        class="px-3 py-1.5 text-xs border border-divider rounded hover:bg-surface-tint"
+        @click="grid.layout.reset()"
+      >
+        Reset
+      </button>
+    </div>
+
+    <div class="border border-divider rounded-lg overflow-x-auto">
+      <table class="w-full text-xs table-fixed min-w-[700px]">
+        <thead>
+          <tr class="border-b border-divider">
+            <th
+              v-for="col in grid.layout.columns.value"
+              :key="col.key"
+              class="group relative px-3 py-2 font-semibold text-left select-none overflow-hidden uppercase tracking-wider text-on-surface/60"
+              :class="[
+                col.pinned ? 'bg-surface-tint border-r border-divider' : 'bg-surface',
+              ]"
+              :style="{
+                width: col.size + '%',
+                position: col.pinned ? 'sticky' : undefined,
+                left: col.pinned === 'left' ? col.offset + '%' : undefined,
+                zIndex: col.pinned ? 10 : undefined,
+              }"
+              @click="onSort(col.key)"
+            >
+              <div class="flex items-center gap-1">
+                <span class="truncate">{{ label(col.key) }}</span>
+
+                <svg
+                  v-if="grid.sort.direction(col.key) !== 'none'"
+                  class="w-3 h-3 shrink-0"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    :d="grid.sort.direction(col.key) === 'asc' ? mdiArrowUp : mdiArrowDown"
+                    fill="currentColor"
+                  />
+                </svg>
+              </div>
+
+              <div
+                v-if="canResize(col.key)"
+                class="absolute top-0 -right-1 w-2 h-full cursor-col-resize z-20 hover:bg-primary/50"
+                @pointerdown.stop="onResizeStart(col.key, $event)"
+              />
+            </th>
+          </tr>
+        </thead>
+
+        <tbody>
+          <tr
+            v-for="(item, index) in grid.items.value"
+            :key="item.id"
+            class="border-b border-divider/50 hover:bg-surface-tint/50 transition-colors"
+          >
+            <td
+              v-for="col in grid.layout.columns.value"
+              :key="col.key"
+              :ref="isEditing(item.id as ID, col.key) ? 'active-cell' : undefined"
+              class="px-3 py-1.5 truncate"
+              :class="[
+                col.pinned ? 'bg-surface-tint border-r border-divider' : '',
+                columns.find(c => c.key === col.key)?.editable && !isEditing(item.id as ID, col.key)
+                  ? 'cursor-pointer hover:bg-primary/5' : '',
+              ]"
+              :style="{
+                width: col.size + '%',
+                position: col.pinned ? 'sticky' : undefined,
+                left: col.pinned === 'left' ? col.offset + '%' : undefined,
+                zIndex: col.pinned ? 10 : undefined,
+                outline: isEditing(item.id as ID, col.key) ? '2px solid var(--v0-color-primary)' : undefined,
+                outlineOffset: isEditing(item.id as ID, col.key) ? '-2px' : undefined,
+              }"
+              @click="onEdit(item.id as ID, col.key, item[col.key])"
+            >
+              <!-- Editing -->
+              <template v-if="isEditing(item.id as ID, col.key)">
+                <div class="flex flex-col gap-0.5">
+                  <input
+                    ref="edit-input"
+                    class="w-full bg-transparent outline-none border-none p-0 text-xs"
+                    :class="col.key === 'budget' ? 'text-right' : ''"
+                    :value="input"
+                    @input="input = ($event.target as HTMLInputElement).value"
+                    @keydown.enter="grid.editing.commit(input)"
+                  >
+
+                  <span v-if="grid.editing.error.value" class="text-[10px] text-error">
+                    {{ grid.editing.error.value }}
+                  </span>
+                </div>
+              </template>
+
+              <!-- Progress bar -->
+              <template v-else-if="col.key === 'progress'">
+                <div class="flex items-center gap-1.5">
+                  <div class="flex-1 h-1 bg-on-surface/10 rounded-full overflow-hidden">
+                    <div
+                      class="h-full rounded-full"
+                      :class="tint(item.progress)"
+                      :style="{ width: item.progress + '%' }"
+                    />
+                  </div>
+
+                  <span class="tabular-nums text-on-surface/50 w-6 text-right">{{ item.progress }}%</span>
+                </div>
+              </template>
+
+              <!-- Budget -->
+              <template v-else-if="col.key === 'budget'">
+                <span class="block text-right tabular-nums">${{ (item.budget as number).toLocaleString() }}</span>
+              </template>
+
+              <!-- Status pill -->
+              <template v-else-if="col.key === 'status'">
+                <span
+                  class="inline-block px-1.5 py-0.5 rounded-full text-[10px] font-semibold uppercase"
+                  :class="{
+                    'bg-success/15 text-success': item.status === 'active',
+                    'bg-warning/15 text-warning': item.status === 'paused',
+                    'bg-on-surface/10 text-on-surface/60': item.status === 'done',
+                  }"
+                >
+                  {{ item.status }}
+                </span>
+              </template>
+
+              <!-- Row reorder (due column) -->
+              <template v-else-if="col.key === 'due'">
+                <div class="flex items-center gap-1">
+                  <span class="tabular-nums">{{ item.due.slice(5) }}</span>
+
+                  <div class="flex flex-col ml-auto">
+                    <button
+                      class="opacity-0 group-hover:opacity-40 hover:!opacity-100 disabled:!opacity-10"
+                      :disabled="index === 0"
+                      @click.stop="grid.rows.move(index, index - 1)"
+                    >
+                      <svg class="w-3 h-3" viewBox="0 0 24 24">
+                        <path :d="mdiChevronUp" fill="currentColor" />
+                      </svg>
+                    </button>
+
+                    <button
+                      class="opacity-0 group-hover:opacity-40 hover:!opacity-100 disabled:!opacity-10"
+                      :disabled="index === grid.items.value.length - 1"
+                      @click.stop="grid.rows.move(index, index + 1)"
+                    >
+                      <svg class="w-3 h-3" viewBox="0 0 24 24">
+                        <path :d="mdiChevronDown" fill="currentColor" />
+                      </svg>
+                    </button>
+                  </div>
+                </div>
+              </template>
+
+              <!-- Default -->
+              <template v-else>
+                {{ item[col.key] }}
+              </template>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <div class="flex items-center justify-between text-xs text-on-surface/60">
+      <span>{{ grid.total.value }} projects</span>
+
+      <div class="flex items-center gap-1">
+        <button
+          class="px-2 py-1 border border-divider rounded hover:bg-surface-tint disabled:op-30"
+          :disabled="grid.pagination.isFirst.value"
+          @click="grid.pagination.prev()"
+        >
+          Prev
+        </button>
+
+        <span class="px-2 tabular-nums">{{ grid.pagination.page.value }} / {{ grid.pagination.pages }}</span>
+
+        <button
+          class="px-2 py-1 border border-divider rounded hover:bg-surface-tint disabled:op-30"
+          :disabled="grid.pagination.isLast.value"
+          @click="grid.pagination.next()"
+        >
+          Next
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/examples/composables/create-data-grid/basic/columns.ts b/apps/docs/src/examples/composables/create-data-grid/basic/columns.ts
new file mode 100644
index 000000000..46cd7f522
--- /dev/null
+++ b/apps/docs/src/examples/composables/create-data-grid/basic/columns.ts
@@ -0,0 +1,11 @@
+import type { DataGridColumn } from '@vuetify/v0'
+import type { Project } from './data'
+
+export const columns: DataGridColumn<Project>[] = [
+  { key: 'name', title: 'Project', sortable: true, filterable: true, size: 28, minSize: 18, pinned: 'left', editable: true, validate: v => (typeof v === 'string' && v.length > 0) || 'Required' },
+  { key: 'status', title: 'Status', sortable: true, size: 14, minSize: 10 },
+  { key: 'assignee', title: 'Assignee', sortable: true, filterable: true, size: 20, minSize: 12 },
+  { key: 'progress', title: 'Progress', sortable: true, size: 16, minSize: 10, sort: (a, b) => Number(a) - Number(b) },
+  { key: 'budget', title: 'Budget', sortable: true, size: 12, minSize: 8, sort: (a, b) => Number(a) - Number(b), editable: true, validate: v => (Number(v) > 0) || 'Must be positive' },
+  { key: 'due', title: 'Due', sortable: true, size: 10, minSize: 7 },
+]
diff --git a/apps/docs/src/examples/composables/create-data-grid/basic/data.ts b/apps/docs/src/examples/composables/create-data-grid/basic/data.ts
new file mode 100644
index 000000000..d5b7af8e1
--- /dev/null
+++ b/apps/docs/src/examples/composables/create-data-grid/basic/data.ts
@@ -0,0 +1,23 @@
+export type Project = {
+  id: number
+  name: string
+  status: 'active' | 'paused' | 'done'
+  priority: 'low' | 'medium' | 'high' | 'critical'
+  assignee: string
+  progress: number
+  due: string
+  budget: number
+}
+
+export const projects: Project[] = [
+  { id: 1, name: 'Website Redesign', status: 'active', priority: 'high', assignee: 'Alice Chen', progress: 72, due: '2026-04-28', budget: 45_000 },
+  { id: 2, name: 'Mobile App v2', status: 'active', priority: 'critical', assignee: 'Marcus Rivera', progress: 34, due: '2026-05-15', budget: 120_000 },
+  { id: 3, name: 'API Migration', status: 'paused', priority: 'medium', assignee: 'Sara Okonkwo', progress: 58, due: '2026-06-01', budget: 30_000 },
+  { id: 4, name: 'Design System', status: 'active', priority: 'high', assignee: 'Liam Park', progress: 91, due: '2026-04-20', budget: 55_000 },
+  { id: 5, name: 'Analytics Dashboard', status: 'done', priority: 'medium', assignee: 'Nina Volkov', progress: 100, due: '2026-03-30', budget: 28_000 },
+  { id: 6, name: 'Auth Service', status: 'active', priority: 'critical', assignee: 'James Wu', progress: 15, due: '2026-04-18', budget: 72_000 },
+  { id: 7, name: 'CI/CD Pipeline', status: 'done', priority: 'low', assignee: 'Fatima Al-Rashid', progress: 100, due: '2026-03-15', budget: 12_000 },
+  { id: 8, name: 'Data Export Tool', status: 'paused', priority: 'low', assignee: 'Carlos Mendez', progress: 22, due: '2026-07-10', budget: 18_000 },
+  { id: 9, name: 'Search Indexing', status: 'active', priority: 'medium', assignee: 'Alice Chen', progress: 47, due: '2026-05-22', budget: 35_000 },
+  { id: 10, name: 'Billing Integration', status: 'active', priority: 'high', assignee: 'Marcus Rivera', progress: 63, due: '2026-05-01', budget: 88_000 },
+]
diff --git a/apps/docs/src/examples/composables/create-data-grid/editing/EditableGrid.vue b/apps/docs/src/examples/composables/create-data-grid/editing/EditableGrid.vue
new file mode 100644
index 000000000..adc5cd0ca
--- /dev/null
+++ b/apps/docs/src/examples/composables/create-data-grid/editing/EditableGrid.vue
@@ -0,0 +1,307 @@
+<script setup lang="ts">
+  import { computed, nextTick, ref, useTemplateRef } from 'vue'
+
+  import { mdiArrowDown, mdiArrowUp, mdiPencilOutline, mdiPackageVariantClosed, mdiRefresh } from '@mdi/js'
+
+  import { createDataGrid, useClickOutside, useHotkey, useToggleScope } from '@vuetify/v0'
+  import type { ID } from '@vuetify/v0'
+
+  import { columns } from './columns'
+  import { products } from './data'
+
+  type EditEntry = {
+    row: ID
+    column: string
+    from: unknown
+    to: unknown
+  }
+
+  const log = ref<EditEntry[]>([])
+  const edits = ref<Map<string, unknown>>(new Map())
+  const input = ref('')
+  const editRef = useTemplateRef<HTMLInputElement>('edit-input')
+
+  const grid = createDataGrid({
+    columns,
+    editing: {
+      onEdit (row, column, value) {
+        const item = products.find(p => p.id === row)
+        const from = item ? item[column as keyof typeof item] : undefined
+
+        edits.value.set(`${row}:${column}`, value)
+        log.value.unshift({ row, column, from, to: value })
+
+        if (item) {
+          (item as Record<string, unknown>)[column] = column === 'price' || column === 'quantity'
+            ? Number(value)
+            : value
+        }
+      },
+    },
+  })
+
+  grid.onboard(products.map(value => ({ id: value.id, value })))
+
+  function cellKey (row: ID, column: string) {
+    return `${row}:${column}`
+  }
+
+  function isEditing (row: ID, column: string) {
+    const cell = grid.editing.active.value
+    return cell?.row === row && cell?.column === column
+  }
+
+  function isEdited (row: ID, column: string) {
+    return edits.value.has(cellKey(row, column))
+  }
+
+  function isEditable (column: string) {
+    return columns.find(c => c.key === column)?.editable === true
+  }
+
+  function isSortable (column: string) {
+    return columns.find(c => c.key === column)?.sortable === true || columns.find(c => c.key === column)?.sort !== undefined
+  }
+
+  function onEdit (row: ID, column: string, value: unknown) {
+    if (!isEditable(column)) return
+
+    grid.editing.edit(row, column)
+    input.value = String(value ?? '')
+
+    nextTick(() => {
+      editRef.value?.focus()
+      editRef.value?.select()
+    })
+  }
+
+  function onCommit () {
+    grid.editing.commit(input.value)
+  }
+
+  function onCancel () {
+    grid.editing.cancel()
+  }
+
+  function onClear () {
+    log.value = []
+    edits.value.clear()
+  }
+
+  const cell = useTemplateRef<HTMLTableCellElement>('active-cell')
+
+  useToggleScope(
+    () => !!grid.editing.active.value,
+    () => {
+      useClickOutside(cell, () => onCancel())
+      useHotkey('escape', () => onCancel(), { inputs: true })
+    },
+  )
+
+  function money (value: unknown) {
+    return `$${Number(value).toFixed(2)}`
+  }
+
+  const total = computed(() => products.reduce((sum, p) => sum + p.price * p.quantity, 0))
+  const low = computed(() => products.filter(p => p.quantity < 50).length)
+</script>
+
+<template>
+  <div class="flex flex-col gap-3">
+    <div class="flex items-center justify-between flex-wrap gap-2">
+      <div class="flex items-center gap-4 text-xs">
+        <div class="flex items-center gap-1.5">
+          <svg class="w-3.5 h-3.5 text-on-surface-variant" viewBox="0 0 24 24">
+            <path :d="mdiPackageVariantClosed" fill="currentColor" />
+          </svg>
+
+          <span class="text-on-surface-variant">Items</span>
+          <span class="tabular-nums font-medium">{{ products.length }}</span>
+        </div>
+
+        <div class="flex items-center gap-1.5">
+          <span class="text-on-surface-variant">Inventory value</span>
+          <span class="tabular-nums font-medium">${{ total.toFixed(0) }}</span>
+        </div>
+
+        <div class="flex items-center gap-1.5">
+          <span class="text-on-surface-variant">Low stock</span>
+
+          <span
+            class="tabular-nums font-medium px-1.5 rounded-full text-xs"
+            :class="low > 0 ? 'bg-warning/15 text-warning' : 'text-on-surface-variant'"
+          >
+            {{ low }}
+          </span>
+        </div>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <div
+          v-if="edits.size > 0"
+          class="flex items-center gap-1 text-xs px-2 py-0.5 rounded-full bg-primary/15 text-primary"
+        >
+          <svg class="w-3 h-3" viewBox="0 0 24 24">
+            <path :d="mdiPencilOutline" fill="currentColor" />
+          </svg>
+
+          <span class="tabular-nums">{{ edits.size }} edited</span>
+        </div>
+
+        <button
+          class="flex items-center gap-1 px-2 py-1 text-xs border border-divider rounded hover:bg-surface-tint disabled:opacity-30 disabled:cursor-not-allowed"
+          :disabled="log.length === 0"
+          @click="onClear"
+        >
+          <svg class="w-3 h-3" viewBox="0 0 24 24">
+            <path :d="mdiRefresh" fill="currentColor" />
+          </svg>
+
+          Clear log
+        </button>
+      </div>
+    </div>
+
+    <div class="border border-divider rounded-lg overflow-hidden">
+      <table class="w-full text-sm border-collapse">
+        <thead>
+          <tr class="border-b border-divider bg-surface-tint">
+            <th
+              v-for="col in grid.layout.columns.value"
+              :key="col.key"
+              class="px-3 py-2 font-medium select-none"
+              :class="[
+                col.key === 'price' || col.key === 'quantity' ? 'text-right' : 'text-left',
+                isSortable(col.key) ? 'cursor-pointer hover:bg-surface' : '',
+              ]"
+              :style="{ width: col.size + '%' }"
+              @click="isSortable(col.key) && grid.sort.toggle(col.key)"
+            >
+              <div
+                class="flex items-center gap-1"
+                :class="col.key === 'price' || col.key === 'quantity' ? 'justify-end' : ''"
+              >
+                <span>{{ columns.find(c => c.key === col.key)?.title }}</span>
+
+                <svg
+                  v-if="isSortable(col.key) && grid.sort.direction(col.key) !== 'none'"
+                  class="w-3 h-3"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    :d="grid.sort.direction(col.key) === 'asc' ? mdiArrowUp : mdiArrowDown"
+                    fill="currentColor"
+                  />
+                </svg>
+
+                <span
+                  v-if="isEditable(col.key)"
+                  class="text-[10px] text-on-surface-variant"
+                  title="Editable"
+                >
+                  <svg class="w-2.5 h-2.5" viewBox="0 0 24 24">
+                    <path :d="mdiPencilOutline" fill="currentColor" />
+                  </svg>
+                </span>
+              </div>
+            </th>
+          </tr>
+        </thead>
+
+        <tbody class="divide-y divide-divider">
+          <tr
+            v-for="item in grid.items.value"
+            :key="item.id"
+            class="hover:bg-surface-tint/40"
+          >
+            <td
+              v-for="col in grid.layout.columns.value"
+              :key="col.key"
+              :ref="isEditing(item.id as ID, col.key) ? 'active-cell' : undefined"
+              class="px-3 py-2"
+              :class="[
+                col.key === 'price' || col.key === 'quantity' ? 'text-right' : 'text-left',
+                isEditable(col.key) && !isEditing(item.id as ID, col.key) ? 'cursor-text hover:bg-surface-tint transition-colors' : '',
+              ]"
+              :style="[
+                { width: col.size + '%' },
+                isEditing(item.id as ID, col.key) ? 'outline: 2px solid var(--v0-color-primary); outline-offset: -2px; border-radius: 2px;' : '',
+              ]"
+              @click="onEdit(item.id as ID, col.key, item[col.key])"
+            >
+              <template v-if="isEditing(item.id as ID, col.key)">
+                <div class="flex flex-col gap-1">
+                  <input
+                    ref="edit-input"
+                    class="w-full bg-transparent outline-none border-none p-0 m-0 text-sm"
+                    :class="col.key === 'price' || col.key === 'quantity' ? 'text-right' : 'text-left'"
+                    :value="input"
+                    @input="input = ($event.target as HTMLInputElement).value"
+                    @keydown.enter="onCommit"
+                  >
+
+                  <span
+                    v-if="grid.editing.error.value"
+                    class="text-xs text-error"
+                  >
+                    {{ grid.editing.error.value }}
+                  </span>
+                </div>
+              </template>
+
+              <template v-else>
+                <span
+                  class="inline-flex items-center gap-1"
+                  :class="isEdited(item.id as ID, col.key) ? 'text-primary font-medium' : ''"
+                >
+                  <template v-if="col.key === 'price'">{{ money(item[col.key]) }}</template>
+                  <template v-else-if="col.key === 'quantity'">{{ item[col.key] }}</template>
+                  <template v-else>{{ item[col.key] }}</template>
+
+                  <span
+                    v-if="isEdited(item.id as ID, col.key)"
+                    class="w-1 h-1 rounded-full bg-primary"
+                  />
+                </span>
+              </template>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <div
+      v-if="log.length > 0"
+      class="border border-divider rounded-lg overflow-hidden"
+    >
+      <div class="px-3 py-2 bg-surface-tint text-xs font-medium border-b border-divider flex items-center justify-between">
+        <span>Edit history</span>
+        <span class="text-on-surface-variant tabular-nums">{{ log.length }}</span>
+      </div>
+
+      <div class="divide-y divide-divider text-xs max-h-40 overflow-y-auto">
+        <div
+          v-for="(entry, index) in log"
+          :key="index"
+          class="px-3 py-2 flex items-center gap-3"
+        >
+          <span class="text-on-surface-variant w-16 truncate">{{ entry.column }}</span>
+          <span class="text-on-surface-variant line-through tabular-nums">{{ entry.from }}</span>
+          <span class="text-on-surface-variant">&rarr;</span>
+          <span class="text-primary font-medium tabular-nums">{{ entry.to }}</span>
+        </div>
+      </div>
+    </div>
+
+    <div
+      v-else
+      class="text-xs text-on-surface-variant flex items-center gap-1.5"
+    >
+      <svg class="w-3.5 h-3.5" viewBox="0 0 24 24">
+        <path :d="mdiPencilOutline" fill="currentColor" />
+      </svg>
+
+      <span>Click any editable cell (Product, Price, Qty). Enter commits, Escape cancels.</span>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/examples/composables/create-data-grid/editing/columns.ts b/apps/docs/src/examples/composables/create-data-grid/editing/columns.ts
new file mode 100644
index 000000000..833b0daf2
--- /dev/null
+++ b/apps/docs/src/examples/composables/create-data-grid/editing/columns.ts
@@ -0,0 +1,10 @@
+import type { DataGridColumn } from '@vuetify/v0'
+import type { Product } from './data'
+
+export const columns: DataGridColumn<Product>[] = [
+  { key: 'name', title: 'Product', size: 28, minSize: 18, editable: true, validate: v => (typeof v === 'string' && v.length > 0) || 'Required' },
+  { key: 'sku', title: 'SKU', size: 15, minSize: 10 },
+  { key: 'price', title: 'Price', size: 15, minSize: 10, editable: true, validate: v => (Number(v) > 0) || 'Must be positive', sort: (a, b) => Number(a) - Number(b) },
+  { key: 'quantity', title: 'Qty', size: 12, minSize: 8, editable: true, validate: v => (Number.isInteger(Number(v)) && Number(v) >= 0) || 'Must be 0+', sort: (a, b) => Number(a) - Number(b) },
+  { key: 'category', title: 'Category', size: 30, minSize: 14, sortable: true },
+]
diff --git a/apps/docs/src/examples/composables/create-data-grid/editing/data.ts b/apps/docs/src/examples/composables/create-data-grid/editing/data.ts
new file mode 100644
index 000000000..6a42c6fdf
--- /dev/null
+++ b/apps/docs/src/examples/composables/create-data-grid/editing/data.ts
@@ -0,0 +1,19 @@
+export type Product = {
+  id: number
+  name: string
+  sku: string
+  price: number
+  quantity: number
+  category: string
+}
+
+export const products: Product[] = [
+  { id: 1, name: 'Wireless Mouse', sku: 'WM-1001', price: 29.99, quantity: 150, category: 'Peripherals' },
+  { id: 2, name: 'Mechanical Keyboard', sku: 'MK-2010', price: 89.99, quantity: 75, category: 'Peripherals' },
+  { id: 3, name: 'USB-C Hub', sku: 'UH-3022', price: 49.99, quantity: 200, category: 'Accessories' },
+  { id: 4, name: '27" Monitor', sku: 'MN-4005', price: 349.99, quantity: 30, category: 'Electronics' },
+  { id: 5, name: 'Webcam HD', sku: 'WC-5011', price: 59.99, quantity: 120, category: 'Peripherals' },
+  { id: 6, name: 'Laptop Stand', sku: 'LS-6003', price: 39.99, quantity: 90, category: 'Accessories' },
+  { id: 7, name: 'Bluetooth Speaker', sku: 'BS-7019', price: 79.99, quantity: 60, category: 'Electronics' },
+  { id: 8, name: 'Noise-Cancelling Headphones', sku: 'NC-8042', price: 199.99, quantity: 45, category: 'Electronics' },
+]
diff --git a/apps/docs/src/examples/composables/create-data-grid/pinned/PinnedGrid.vue b/apps/docs/src/examples/composables/create-data-grid/pinned/PinnedGrid.vue
new file mode 100644
index 000000000..e4ed76134
--- /dev/null
+++ b/apps/docs/src/examples/composables/create-data-grid/pinned/PinnedGrid.vue
@@ -0,0 +1,306 @@
+<script setup lang="ts">
+  import { computed, shallowRef } from 'vue'
+
+  import { mdiArrowDown, mdiArrowUp, mdiChartLine, mdiPin, mdiPinOffOutline, mdiPinOutline, mdiRefresh } from '@mdi/js'
+
+  import { createDataGrid, useEventListener, useToggleScope } from '@vuetify/v0'
+
+  import { columns } from './columns'
+  import { stocks } from './data'
+
+  const grid = createDataGrid({
+    columns,
+  })
+
+  grid.onboard(stocks.map(value => ({ id: value.id, value })))
+
+  const resizing = shallowRef<string | null>(null)
+  let startX = 0
+  let table: HTMLElement | null = null
+  let resized = false
+
+  function onResizeStart (key: string, event: PointerEvent) {
+    resizing.value = key
+    startX = event.clientX
+    table = (event.target as HTMLElement).closest('table')
+  }
+
+  function onSort (key: string) {
+    if (resized) return
+    grid.sort.toggle(key)
+  }
+
+  useToggleScope(
+    () => !!resizing.value,
+    () => {
+      useEventListener(document, 'pointermove', (event: PointerEvent) => {
+        if (!resizing.value || !table) return
+        const delta = ((event.clientX - startX) / table.clientWidth) * 100
+        startX = event.clientX
+        grid.layout.resize(resizing.value, delta)
+      })
+
+      useEventListener(document, 'pointerup', () => {
+        resizing.value = null
+        table = null
+        resized = true
+        requestAnimationFrame(() => {
+          resized = false
+        })
+      })
+    },
+  )
+
+  function label (key: string) {
+    return columns.find(c => c.key === key)?.title ?? key
+  }
+
+  function canResize (key: string) {
+    const cols = grid.layout.columns.value
+    const index = cols.findIndex(c => c.key === key)
+    return index !== -1 && index < cols.length - 1
+  }
+
+  function onPin (key: string) {
+    const col = grid.layout.columns.value.find(c => c.key === key)
+    if (!col) return
+    if (col.pinned === 'left') grid.layout.pin(key, 'right')
+    else if (col.pinned === 'right') grid.layout.pin(key, false)
+    else grid.layout.pin(key, 'left')
+  }
+
+  function pinTitle (pinned: 'left' | 'right' | false) {
+    if (pinned === 'left') return 'Pinned left — click to pin right'
+    if (pinned === 'right') return 'Pinned right — click to unpin'
+    return 'Click to pin left'
+  }
+
+  function volume (value: number) {
+    if (value >= 1_000_000) return `${(value / 1_000_000).toFixed(1)}M`
+    if (value >= 1000) return `${(value / 1000).toFixed(0)}K`
+    return String(value)
+  }
+
+  function cap (value: number) {
+    if (value >= 1_000_000) return `$${(value / 1_000_000).toFixed(1)}T`
+    if (value >= 1000) return `$${(value / 1000).toFixed(1)}B`
+    return `$${value}M`
+  }
+
+  const numeric = new Set(['price', 'change', 'volume', 'cap', 'pe', 'eps', 'dividend'])
+
+  function isNumeric (key: string) {
+    return numeric.has(key)
+  }
+
+  const stats = computed(() => {
+    const items = grid.items.value
+    const up = items.filter(s => s.change > 0).length
+    const down = items.filter(s => s.change < 0).length
+    const vol = items.reduce((sum, s) => sum + s.volume, 0)
+    return { up, down, vol }
+  })
+
+  const summary = computed(() => {
+    const { left, scrollable, right } = grid.layout.pinned.value
+    return { left: left.length, scrollable: scrollable.length, right: right.length }
+  })
+</script>
+
+<template>
+  <div class="flex flex-col gap-3">
+    <div class="flex items-center justify-between flex-wrap gap-2">
+      <div class="flex items-center gap-2 text-sm">
+        <svg class="w-4 h-4 text-on-surface-variant" viewBox="0 0 24 24">
+          <path :d="mdiChartLine" fill="currentColor" />
+        </svg>
+
+        <span class="font-medium">Market overview</span>
+
+        <span class="text-xs text-on-surface-variant ml-2">
+          <span class="tabular-nums text-success">{{ stats.up }}↑</span>
+          ·
+          <span class="tabular-nums text-error">{{ stats.down }}↓</span>
+          · Vol <span class="tabular-nums">{{ volume(stats.vol) }}</span>
+        </span>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <input
+          class="px-3 py-1 text-xs border border-divider rounded bg-surface text-on-surface placeholder:text-on-surface-variant outline-none focus:border-primary w-44"
+          placeholder="Filter ticker or company…"
+          type="text"
+          :value="grid.query.value"
+          @input="grid.search(($event.target as HTMLInputElement).value)"
+        >
+
+        <button
+          class="flex items-center gap-1 px-2 py-1 text-xs border border-divider rounded hover:bg-surface-tint"
+          @click="grid.layout.reset()"
+        >
+          <svg class="w-3 h-3" viewBox="0 0 24 24">
+            <path :d="mdiRefresh" fill="currentColor" />
+          </svg>
+
+          Reset
+        </button>
+      </div>
+    </div>
+
+    <div
+      class="border border-divider rounded-lg overflow-x-auto"
+      data-grid
+    >
+      <table class="w-full text-sm min-w-[1100px] table-fixed" style="overflow: visible">
+        <thead>
+          <tr class="border-b border-divider">
+            <th
+              v-for="col in grid.layout.columns.value"
+              :key="col.key"
+              class="group relative px-3 py-2 font-medium select-none overflow-hidden"
+              :class="[
+                col.pinned ? 'bg-surface-tint' : 'bg-surface',
+                col.pinned === 'left' ? 'border-r border-divider' : '',
+                col.pinned === 'right' ? 'border-l border-divider' : '',
+                isNumeric(col.key) ? 'text-right' : 'text-left',
+              ]"
+              :style="{
+                width: col.size + '%',
+                position: col.pinned ? 'sticky' : undefined,
+                left: col.pinned === 'left' ? col.offset + '%' : undefined,
+                right: col.pinned === 'right' ? col.offset + '%' : undefined,
+                zIndex: col.pinned ? 10 : undefined,
+              }"
+              @click="onSort(col.key)"
+            >
+              <div
+                class="flex items-center gap-1"
+                :class="isNumeric(col.key) ? 'justify-end' : ''"
+              >
+                <button
+                  class="shrink-0 transition-opacity"
+                  :class="col.pinned ? 'opacity-80 text-primary' : 'opacity-0 group-hover:opacity-60 hover:!opacity-100'"
+                  :title="pinTitle(col.pinned)"
+                  @click.stop="onPin(col.key)"
+                >
+                  <svg class="w-3.5 h-3.5" viewBox="0 0 24 24">
+                    <path
+                      :d="col.pinned === 'left' ? mdiPin : col.pinned === 'right' ? mdiPinOffOutline : mdiPinOutline"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </button>
+
+                <span class="truncate">{{ label(col.key) }}</span>
+
+                <svg
+                  v-if="grid.sort.direction(col.key) !== 'none'"
+                  class="w-3.5 h-3.5 shrink-0"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    :d="grid.sort.direction(col.key) === 'asc' ? mdiArrowUp : mdiArrowDown"
+                    fill="currentColor"
+                  />
+                </svg>
+              </div>
+
+              <div
+                v-if="canResize(col.key)"
+                class="absolute top-0 -right-1 w-2 h-full cursor-col-resize z-20 hover:bg-primary/50"
+                @pointerdown.stop="onResizeStart(col.key, $event)"
+              />
+            </th>
+          </tr>
+        </thead>
+
+        <tbody class="divide-y divide-divider">
+          <tr
+            v-for="item in grid.items.value"
+            :key="item.id"
+            class="hover:bg-surface-tint transition-colors"
+          >
+            <td
+              v-for="col in grid.layout.columns.value"
+              :key="col.key"
+              class="px-3 py-1.5 truncate"
+              :class="[
+                col.pinned ? 'bg-surface-tint' : 'bg-surface',
+                col.pinned === 'left' ? 'border-r border-divider' : '',
+                col.pinned === 'right' ? 'border-l border-divider' : '',
+                isNumeric(col.key) ? 'text-right font-mono tabular-nums' : '',
+              ]"
+              :style="{
+                width: col.size + '%',
+                position: col.pinned ? 'sticky' : undefined,
+                left: col.pinned === 'left' ? col.offset + '%' : undefined,
+                right: col.pinned === 'right' ? col.offset + '%' : undefined,
+                zIndex: col.pinned ? 10 : undefined,
+              }"
+            >
+              <template v-if="col.key === 'ticker'">
+                <span class="font-bold uppercase">{{ item.ticker }}</span>
+              </template>
+
+              <template v-else-if="col.key === 'price'">
+                ${{ item.price.toFixed(2) }}
+              </template>
+
+              <template v-else-if="col.key === 'change'">
+                <span :class="item.change >= 0 ? 'text-success' : 'text-error'">
+                  {{ item.change >= 0 ? '+' : '' }}{{ item.change.toFixed(2) }}%
+                </span>
+              </template>
+
+              <template v-else-if="col.key === 'volume'">
+                {{ volume(item.volume) }}
+              </template>
+
+              <template v-else-if="col.key === 'cap'">
+                {{ cap(item.cap) }}
+              </template>
+
+              <template v-else-if="col.key === 'pe'">
+                {{ item.pe.toFixed(1) }}
+              </template>
+
+              <template v-else-if="col.key === 'eps'">
+                ${{ item.eps.toFixed(2) }}
+              </template>
+
+              <template v-else-if="col.key === 'dividend'">
+                {{ item.dividend.toFixed(2) }}%
+              </template>
+
+              <template v-else>
+                {{ item[col.key] }}
+              </template>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <div class="flex items-center gap-3 text-xs text-on-surface-variant">
+      <span class="tabular-nums">{{ grid.items.value.length }} of {{ stocks.length }} stocks</span>
+
+      <span class="text-divider">·</span>
+
+      <span class="flex items-center gap-1">
+        <svg class="w-3 h-3" viewBox="0 0 24 24">
+          <path :d="mdiPin" fill="currentColor" />
+        </svg>
+
+        <span class="tabular-nums">{{ summary.left }} left</span>
+        <span>·</span>
+        <span class="tabular-nums">{{ summary.scrollable }} scrollable</span>
+        <span>·</span>
+        <span class="tabular-nums">{{ summary.right }} right</span>
+      </span>
+
+      <span class="text-divider">·</span>
+
+      <span>Hover headers to pin, drag handles to resize</span>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/examples/composables/create-data-grid/pinned/columns.ts b/apps/docs/src/examples/composables/create-data-grid/pinned/columns.ts
new file mode 100644
index 000000000..55906d86f
--- /dev/null
+++ b/apps/docs/src/examples/composables/create-data-grid/pinned/columns.ts
@@ -0,0 +1,15 @@
+import type { DataGridColumn } from '@vuetify/v0'
+import type { Stock } from './data'
+
+export const columns: DataGridColumn<Stock>[] = [
+  { key: 'ticker', title: 'Ticker', sortable: true, size: 10, minSize: 8, pinned: 'left' },
+  { key: 'company', title: 'Company', sortable: true, filterable: true, size: 17, minSize: 12 },
+  { key: 'price', title: 'Price', sortable: true, size: 10, minSize: 8, sort: (a, b) => Number(a) - Number(b) },
+  { key: 'change', title: 'Change', sortable: true, size: 10, minSize: 8, sort: (a, b) => Number(a) - Number(b) },
+  { key: 'volume', title: 'Volume', sortable: true, size: 10, minSize: 8, sort: (a, b) => Number(a) - Number(b) },
+  { key: 'cap', title: 'Mkt Cap', sortable: true, size: 10, minSize: 8, sort: (a, b) => Number(a) - Number(b) },
+  { key: 'pe', title: 'P/E', sortable: true, size: 8, minSize: 6, sort: (a, b) => Number(a) - Number(b) },
+  { key: 'eps', title: 'EPS', sortable: true, size: 8, minSize: 6, sort: (a, b) => Number(a) - Number(b) },
+  { key: 'dividend', title: 'Div %', sortable: true, size: 7, minSize: 6, sort: (a, b) => Number(a) - Number(b) },
+  { key: 'sector', title: 'Sector', sortable: true, size: 10, minSize: 8, pinned: 'right' },
+]
diff --git a/apps/docs/src/examples/composables/create-data-grid/pinned/data.ts b/apps/docs/src/examples/composables/create-data-grid/pinned/data.ts
new file mode 100644
index 000000000..22268e1a3
--- /dev/null
+++ b/apps/docs/src/examples/composables/create-data-grid/pinned/data.ts
@@ -0,0 +1,28 @@
+export type Stock = {
+  id: number
+  ticker: string
+  company: string
+  price: number
+  change: number
+  volume: number
+  cap: number
+  pe: number
+  eps: number
+  dividend: number
+  sector: string
+}
+
+export const stocks: Stock[] = [
+  { id: 1, ticker: 'AAPL', company: 'Apple Inc.', price: 198.11, change: 1.24, volume: 54_300_000, cap: 3_080_000, pe: 32.4, eps: 6.11, dividend: 0.55, sector: 'Tech' },
+  { id: 2, ticker: 'MSFT', company: 'Microsoft Corp.', price: 452.37, change: -0.38, volume: 22_100_000, cap: 3_360_000, pe: 37.1, eps: 12.2, dividend: 0.72, sector: 'Tech' },
+  { id: 3, ticker: 'GOOGL', company: 'Alphabet Inc.', price: 176.89, change: 2.15, volume: 28_700_000, cap: 2_180_000, pe: 25.6, eps: 6.91, dividend: 0, sector: 'Tech' },
+  { id: 4, ticker: 'JNJ', company: 'Johnson & Johnson', price: 155.42, change: -0.72, volume: 8_400_000, cap: 374_000, pe: 15.8, eps: 9.84, dividend: 2.96, sector: 'Healthcare' },
+  { id: 5, ticker: 'UNH', company: 'UnitedHealth Group', price: 527.63, change: 0.89, volume: 3_200_000, cap: 486_000, pe: 21.3, eps: 24.77, dividend: 1.42, sector: 'Healthcare' },
+  { id: 6, ticker: 'PFE', company: 'Pfizer Inc.', price: 27.14, change: -1.53, volume: 41_600_000, cap: 153_000, pe: 45.2, eps: 0.6, dividend: 5.88, sector: 'Healthcare' },
+  { id: 7, ticker: 'JPM', company: 'JPMorgan Chase', price: 205.88, change: 0.67, volume: 9_800_000, cap: 592_000, pe: 12.1, eps: 17.02, dividend: 2.34, sector: 'Finance' },
+  { id: 8, ticker: 'GS', company: 'Goldman Sachs', price: 478.21, change: -0.14, volume: 2_100_000, cap: 158_000, pe: 16.7, eps: 28.63, dividend: 2.1, sector: 'Finance' },
+  { id: 9, ticker: 'XOM', company: 'Exxon Mobil Corp.', price: 104.56, change: 1.87, volume: 15_900_000, cap: 438_000, pe: 13.4, eps: 7.8, dividend: 3.45, sector: 'Energy' },
+  { id: 10, ticker: 'CVX', company: 'Chevron Corp.', price: 152.73, change: -0.91, volume: 7_300_000, cap: 284_000, pe: 14.9, eps: 10.25, dividend: 4.12, sector: 'Energy' },
+  { id: 11, ticker: 'PG', company: 'Procter & Gamble', price: 165.3, change: 0.33, volume: 6_500_000, cap: 389_000, pe: 27.5, eps: 6.01, dividend: 2.38, sector: 'Consumer' },
+  { id: 12, ticker: 'KO', company: 'Coca-Cola Co.', price: 62.17, change: -0.22, volume: 12_800_000, cap: 268_000, pe: 24.1, eps: 2.58, dividend: 3.07, sector: 'Consumer' },
+]
diff --git a/apps/docs/src/examples/composables/create-data-grid/spanning/SpanningGrid.vue b/apps/docs/src/examples/composables/create-data-grid/spanning/SpanningGrid.vue
new file mode 100644
index 000000000..2701939d4
--- /dev/null
+++ b/apps/docs/src/examples/composables/create-data-grid/spanning/SpanningGrid.vue
@@ -0,0 +1,149 @@
+<script setup lang="ts">
+  import { mdiAccountGroup, mdiCalendarWeek } from '@mdi/js'
+
+  import { createDataGrid } from '@vuetify/v0'
+
+  import { columns } from './columns'
+  import { schedule } from './data'
+
+  const grid = createDataGrid({
+    columns,
+    rowSpanning (item, column) {
+      if (column !== 'department') return 1
+
+      const index = schedule.findIndex(s => s.id === item.id)
+      let count = 1
+
+      while (index + count < schedule.length && schedule[index + count].department === item.department) {
+        count++
+      }
+
+      return count
+    },
+  })
+
+  grid.onboard(schedule.map(value => ({ id: value.id, value })))
+
+  function dot (status: string) {
+    if (status === 'available') return 'bg-success'
+    if (status === 'busy') return 'bg-warning'
+    return 'bg-on-surface-variant/40'
+  }
+
+  function initials (member: string) {
+    return member.split(' ').map(part => part[0]).join('').slice(0, 2)
+  }
+
+  function tint (member: string) {
+    const colors = ['bg-primary/20 text-primary', 'bg-info/20 text-info', 'bg-success/20 text-success', 'bg-warning/20 text-warning', 'bg-error/20 text-error']
+    const sum = [...member].reduce((acc, char) => acc + (char.codePointAt(0) ?? 0), 0)
+    return colors[sum % colors.length]
+  }
+
+  const days = ['mon', 'tue', 'wed', 'thu', 'fri']
+
+  const summary = ['available', 'busy', 'off'].map(status => ({
+    status,
+    count: schedule.reduce((total, item) => {
+      return total + days.filter(day => item[day as 'mon'] === status).length
+    }, 0),
+  }))
+</script>
+
+<template>
+  <div class="flex flex-col gap-3">
+    <div class="flex items-center justify-between flex-wrap gap-2">
+      <div class="flex items-center gap-2 text-sm">
+        <svg class="w-4 h-4 text-on-surface-variant" viewBox="0 0 24 24">
+          <path :d="mdiCalendarWeek" fill="currentColor" />
+        </svg>
+
+        <span class="font-medium">Team availability — this week</span>
+      </div>
+
+      <div class="flex items-center gap-3 text-xs">
+        <div
+          v-for="entry in summary"
+          :key="entry.status"
+          class="flex items-center gap-1.5"
+        >
+          <span class="w-1.5 h-1.5 rounded-full" :class="dot(entry.status)" />
+          <span class="capitalize text-on-surface-variant">{{ entry.status }}</span>
+          <span class="tabular-nums font-medium">{{ entry.count }}</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="border border-divider rounded-lg overflow-x-auto">
+      <table class="w-full text-sm min-w-[720px] table-fixed">
+        <thead>
+          <tr class="border-b border-divider bg-surface-tint">
+            <th
+              v-for="col in grid.layout.columns.value"
+              :key="col.key"
+              class="px-3 py-2.5 text-left font-medium text-xs uppercase tracking-wide text-on-surface-variant"
+              :class="days.includes(col.key) ? 'text-center' : ''"
+              :style="{ width: col.size + '%' }"
+            >
+              {{ columns.find(c => c.key === col.key)?.title }}
+            </th>
+          </tr>
+        </thead>
+
+        <tbody class="divide-y divide-divider">
+          <tr
+            v-for="item in grid.items.value"
+            :key="item.id"
+            class="hover:bg-surface-tint/40 transition-colors"
+          >
+            <template v-for="col in grid.layout.columns.value" :key="col.key">
+              <td
+                v-if="!grid.spans.value.get(item.id as number)?.get(col.key)?.hidden"
+                class="px-3 py-2"
+                :class="{
+                  'bg-surface-tint/60 font-medium align-middle border-r border-divider text-xs uppercase tracking-wide text-on-surface-variant': col.key === 'department' && (grid.spans.value.get(item.id as number)?.get(col.key)?.rowSpan ?? 1) > 1,
+                  'text-center': days.includes(col.key),
+                }"
+                :rowspan="grid.spans.value.get(item.id as number)?.get(col.key)?.rowSpan"
+                :style="{ width: col.size + '%' }"
+              >
+                <template v-if="col.key === 'department'">
+                  {{ item.department }}
+                </template>
+
+                <template v-else-if="col.key === 'member'">
+                  <div class="flex items-center gap-2">
+                    <div
+                      class="w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-semibold shrink-0"
+                      :class="tint(item.member)"
+                    >
+                      {{ initials(item.member) }}
+                    </div>
+
+                    <span>{{ item.member }}</span>
+                  </div>
+                </template>
+
+                <template v-else>
+                  <span
+                    class="inline-flex w-2 h-2 rounded-full"
+                    :class="dot(item[col.key] as string)"
+                    :title="item[col.key] as string"
+                  />
+                </template>
+              </td>
+            </template>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <div class="flex items-center gap-2 text-xs text-on-surface-variant">
+      <svg class="w-3.5 h-3.5" viewBox="0 0 24 24">
+        <path :d="mdiAccountGroup" fill="currentColor" />
+      </svg>
+
+      <span>{{ schedule.length }} members across {{ new Set(schedule.map(s => s.department)).size }} departments — department cells span all members within</span>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/examples/composables/create-data-grid/spanning/columns.ts b/apps/docs/src/examples/composables/create-data-grid/spanning/columns.ts
new file mode 100644
index 000000000..19c130c09
--- /dev/null
+++ b/apps/docs/src/examples/composables/create-data-grid/spanning/columns.ts
@@ -0,0 +1,12 @@
+import type { DataGridColumn } from '@vuetify/v0'
+import type { Schedule } from './data'
+
+export const columns: DataGridColumn<Schedule>[] = [
+  { key: 'department', title: 'Department', size: 18, minSize: 12 },
+  { key: 'member', title: 'Team Member', size: 22, minSize: 14 },
+  { key: 'mon', title: 'Mon', size: 12, minSize: 9 },
+  { key: 'tue', title: 'Tue', size: 12, minSize: 9 },
+  { key: 'wed', title: 'Wed', size: 12, minSize: 9 },
+  { key: 'thu', title: 'Thu', size: 12, minSize: 9 },
+  { key: 'fri', title: 'Fri', size: 12, minSize: 9 },
+]
diff --git a/apps/docs/src/examples/composables/create-data-grid/spanning/data.ts b/apps/docs/src/examples/composables/create-data-grid/spanning/data.ts
new file mode 100644
index 000000000..854406622
--- /dev/null
+++ b/apps/docs/src/examples/composables/create-data-grid/spanning/data.ts
@@ -0,0 +1,23 @@
+export type Schedule = {
+  id: number
+  department: string
+  member: string
+  mon: 'available' | 'busy' | 'off'
+  tue: 'available' | 'busy' | 'off'
+  wed: 'available' | 'busy' | 'off'
+  thu: 'available' | 'busy' | 'off'
+  fri: 'available' | 'busy' | 'off'
+}
+
+export const schedule: Schedule[] = [
+  { id: 1, department: 'Engineering', member: 'Alice Chen', mon: 'available', tue: 'available', wed: 'busy', thu: 'available', fri: 'off' },
+  { id: 2, department: 'Engineering', member: 'Bob Park', mon: 'busy', tue: 'available', wed: 'available', thu: 'available', fri: 'available' },
+  { id: 3, department: 'Engineering', member: 'Carol Wu', mon: 'available', tue: 'busy', wed: 'busy', thu: 'off', fri: 'available' },
+  { id: 4, department: 'Engineering', member: 'Dan Reeves', mon: 'available', tue: 'available', wed: 'available', thu: 'busy', fri: 'busy' },
+  { id: 5, department: 'Design', member: 'Eva Santos', mon: 'off', tue: 'available', wed: 'available', thu: 'available', fri: 'busy' },
+  { id: 6, department: 'Design', member: 'Frank Liu', mon: 'available', tue: 'busy', wed: 'off', thu: 'available', fri: 'available' },
+  { id: 7, department: 'Design', member: 'Grace Kim', mon: 'busy', tue: 'available', wed: 'available', thu: 'busy', fri: 'off' },
+  { id: 8, department: 'Marketing', member: 'Hiro Tanaka', mon: 'available', tue: 'available', wed: 'busy', thu: 'available', fri: 'available' },
+  { id: 9, department: 'Marketing', member: 'Iris Novak', mon: 'busy', tue: 'off', wed: 'available', thu: 'available', fri: 'busy' },
+  { id: 10, department: 'Marketing', member: 'Jake Morris', mon: 'available', tue: 'available', wed: 'available', thu: 'off', fri: 'available' },
+]
diff --git a/apps/docs/src/examples/composables/create-data-table/basic/BasicTable.vue b/apps/docs/src/examples/composables/create-data-table/basic/BasicTable.vue
index cb0a6563c..ef01002ea 100644
--- a/apps/docs/src/examples/composables/create-data-table/basic/BasicTable.vue
+++ b/apps/docs/src/examples/composables/create-data-table/basic/BasicTable.vue
@@ -4,11 +4,12 @@
   import { users } from './data'
 
   const table = createDataTable({
-    items: users,
     columns,
     pagination: { itemsPerPage: 5 },
   })
 
+  table.onboard(users.map(value => ({ id: value.id, value })))
+
   function sortIcon (key: string) {
     const dir = table.sort.direction(key)
     if (dir === 'asc') return '↑'
diff --git a/apps/docs/src/examples/composables/create-data-table/features/FeaturesTable.vue b/apps/docs/src/examples/composables/create-data-table/features/FeaturesTable.vue
index 8274a804d..3f2172e7a 100644
--- a/apps/docs/src/examples/composables/create-data-table/features/FeaturesTable.vue
+++ b/apps/docs/src/examples/composables/create-data-table/features/FeaturesTable.vue
@@ -4,7 +4,6 @@
   import { employees } from './data'
 
   const table = createDataTable({
-    items: employees,
     columns,
     groupBy: 'department',
     openAll: true,
@@ -15,6 +14,8 @@
     pagination: { itemsPerPage: 20 },
   })
 
+  table.onboard(employees.map(value => ({ id: value.id, value })))
+
   function sortIcon (key: string) {
     const dir = table.sort.direction(key)
     if (dir === 'asc') return '↑'
diff --git a/apps/docs/src/examples/composables/create-data-table/server/ServerTable.vue b/apps/docs/src/examples/composables/create-data-table/server/ServerTable.vue
index aa0e4b446..e9cfb782a 100644
--- a/apps/docs/src/examples/composables/create-data-table/server/ServerTable.vue
+++ b/apps/docs/src/examples/composables/create-data-table/server/ServerTable.vue
@@ -4,14 +4,10 @@
   import { fetchUsers } from './api'
   import { columns } from './columns'
 
-  import type { User } from './api'
-
-  const serverItems = shallowRef<User[]>([])
   const totalCount = shallowRef(0)
   const isLoading = shallowRef(false)
 
   const table = createDataTable({
-    items: serverItems,
     columns,
     pagination: { itemsPerPage: 5 },
     adapter: new ServerDataTableAdapter({
@@ -31,7 +27,8 @@
     )
 
     totalCount.value = result.total
-    serverItems.value = result.items
+    table.clear()
+    table.onboard(result.items.map(value => ({ id: value.id, value })))
     isLoading.value = false
   }
 
diff --git a/apps/docs/src/examples/composables/create-data-table/virtual/VirtualTable.vue b/apps/docs/src/examples/composables/create-data-table/virtual/VirtualTable.vue
index 09cf190e4..319f17a1e 100644
--- a/apps/docs/src/examples/composables/create-data-table/virtual/VirtualTable.vue
+++ b/apps/docs/src/examples/composables/create-data-table/virtual/VirtualTable.vue
@@ -7,11 +7,12 @@
   const items = generateUsers(1000)
 
   const table = createDataTable({
-    items,
     columns,
     adapter: new VirtualDataTableAdapter(),
   })
 
+  table.onboard(items.map(value => ({ id: value.id, value })))
+
   const virtual = createVirtual(table.items, { itemHeight: 40 })
   const {
     element,
diff --git a/apps/docs/src/pages/components/primitives/aspect-ratio.md b/apps/docs/src/pages/components/primitives/aspect-ratio.md
index e0e2caa4f..47d1321a5 100644
--- a/apps/docs/src/pages/components/primitives/aspect-ratio.md
+++ b/apps/docs/src/pages/components/primitives/aspect-ratio.md
@@ -143,7 +143,7 @@ inline style and no semantics of its own. Any ARIA attributes belong on the
 content inside. Pass `as` to change the element when a different semantic
 wrapper is needed (e.g. `as="figure"`).
 
-## Questions
+## FAQ
 
 ::: faq
 
diff --git a/apps/docs/src/pages/components/primitives/atom.md b/apps/docs/src/pages/components/primitives/atom.md
index 8404d020b..033804d24 100644
--- a/apps/docs/src/pages/components/primitives/atom.md
+++ b/apps/docs/src/pages/components/primitives/atom.md
@@ -317,7 +317,7 @@ In renderless mode, you're responsible for applying attrs to your custom element
 > [!WARNING]
 > When using renderless mode, ensure your custom element is accessible. A `<div>` needs explicit `role`, `tabindex`, and keyboard event handlers to match what a native `<button>` provides for free.
 
-## Questions
+## FAQ
 
 ::: faq
 ??? When would I use Atom directly vs just using a v0 component?
diff --git a/apps/docs/src/pages/components/primitives/portal.md b/apps/docs/src/pages/components/primitives/portal.md
index 62272f169..9497c1977 100644
--- a/apps/docs/src/pages/components/primitives/portal.md
+++ b/apps/docs/src/pages/components/primitives/portal.md
@@ -87,7 +87,7 @@ Portal is transparent — it adds no DOM elements, ARIA attributes, or keyboard
 > [!TIP]
 > When teleporting interactive content (modals, menus, notifications), ensure it has proper ARIA roles, keyboard handling, and focus management. Portal handles *where* content renders, not *how* it behaves.
 
-## Questions
+## FAQ
 
 ::: faq
 ??? When should I use Portal vs native Teleport?
diff --git a/apps/docs/src/pages/components/primitives/presence.md b/apps/docs/src/pages/components/primitives/presence.md
index beba6fc6d..fd917e0bf 100644
--- a/apps/docs/src/pages/components/primitives/presence.md
+++ b/apps/docs/src/pages/components/primitives/presence.md
@@ -99,7 +99,7 @@ Presence is transparent — it adds no DOM elements, ARIA attributes, or keyboar
 > [!TIP]
 > Ensure animated content respects `prefers-reduced-motion`. Presence doesn't enforce motion preferences — your CSS should handle `@media (prefers-reduced-motion: reduce)`.
 
-## Questions
+## FAQ
 
 ::: faq
 ??? Why not use Vue's Transition component?
diff --git a/apps/docs/src/pages/composables/data/create-data-grid.md b/apps/docs/src/pages/composables/data/create-data-grid.md
new file mode 100644
index 000000000..5c046fecb
--- /dev/null
+++ b/apps/docs/src/pages/composables/data/create-data-grid.md
@@ -0,0 +1,392 @@
+---
+title: createDataGrid - Composable Data Grid for Vue 3
+meta:
+- name: description
+  content: Full-featured data grid composable with column layout, cell editing, row ordering, and row spanning. Extends createDataTable with grid-specific features.
+- name: keywords
+  content: createDataGrid, data grid, column pinning, cell editing, row spanning, row ordering, resizing, composable, Vue 3
+features:
+  category: Composable
+  label: 'E: createDataGrid'
+  github: /composables/createDataGrid/
+  level: 3
+related:
+  - /composables/data/create-data-table
+  - /composables/data/create-filter
+  - /composables/data/create-pagination
+  - /composables/data/create-virtual
+---
+
+# createDataGrid
+
+A data grid composable that layers column layout, cell editing, row ordering, and row spanning on top of the [createDataTable](/composables/data/create-data-table) pipeline.
+
+<DocsPageFeatures :frontmatter />
+
+## Usage
+
+Pass `columns` with `size` percentages to construct a grid, then register rows via the inherited registry surface to get column layout management, search, sort, and pagination.
+
+> [!TIP]
+> Rows are registered, not passed as an option. Call `grid.onboard(rows.map(value => ({ id: value.id, value })))` (or `grid.register({ id, value })` per row) after construction — the grid owns row identity and order through the registry inherited from [createDataTable](/composables/data/create-data-table).
+
+```ts collapse
+import { createDataGrid } from '@vuetify/v0'
+
+const grid = createDataGrid({
+  columns: [
+    { key: 'name', title: 'Project', sortable: true, filterable: true, size: 22 },
+    { key: 'status', title: 'Status', sortable: true, size: 12 },
+    { key: 'assignee', title: 'Assignee', sortable: true, size: 16 },
+    { key: 'progress', title: 'Progress', sortable: true, size: 14 },
+    { key: 'budget', title: 'Budget', sortable: true, size: 10 },
+  ],
+})
+
+// Register rows through the inherited registry surface
+grid.onboard(projects.map(value => ({ id: value.id, value })))
+
+// Inherited from createDataTable
+grid.search('alice')
+grid.sort.toggle('name')
+grid.pagination.next()
+
+// Grid-specific: column layout
+grid.layout.columns.value    // ResolvedColumn[] with size, offset, pinned
+grid.layout.pin('name', 'left')
+grid.layout.resize('name', 5) // grow by 5%, neighbor shrinks
+grid.layout.reorder(0, 2)     // move column 0 to position 2
+grid.layout.reset()            // restore initial layout
+```
+
+::: example
+/composables/create-data-grid/basic/BasicGrid.vue
+/composables/create-data-grid/basic/columns.ts
+/composables/create-data-grid/basic/data.ts
+:::
+
+## Architecture
+
+`createDataGrid` is a composition of [createDataTable](/composables/data/create-data-table) plus four grid-specific modules. The table owns the data pipeline (filter, sort, paginate); the grid layers column layout, cell editing, row ordering, and row spanning on top. Row ordering is inserted between sort and pagination via a grid adapter so reorders survive sort changes when `preserveRowOrder` is set.
+
+```mermaid "createDataGrid Architecture"
+flowchart TD
+  createDataGrid:::primary --> table["createDataTable (pipeline)"]
+  createDataGrid --> layout["layout (createRegistry + createGroup)"]
+  createDataGrid --> editing["editing (createCellEditing)"]
+  createDataGrid --> ordering["rows (createRowOrdering)"]
+  createDataGrid --> spanning["spans (createRowSpanning)"]
+  table --> adapter["GridAdapter (Client / Server / Virtual)"]
+  ordering -. "ShallowRef&lt;ID[]&gt;" .-> adapter
+  layout --> pin["pin / resize / reorder"]
+  editing --> edit["edit / commit / cancel + validate"]
+  spanning --> span["computed span map (hidden cell tracking)"]
+```
+
+| Module | Built on | Purpose |
+| - | - | - |
+| `table` (spread) | `createDataTable` | Search, sort, filter, paginate, total — all v-modeled through |
+| `layout` | `createRegistry` + `createGroup` | Column ordering, tri-region pinning, percentage sizing, delta-based resize |
+| `editing` | internal factory | Click-to-edit lifecycle, per-column validation, dirty tracking |
+| `rows` | `shallowRef<ID[]>` | Post-sort row reordering, inserted by the grid adapter pre-pagination |
+| `spans` | computed map | Row span resolution and hidden-cell tracking |
+
+## Reactivity
+
+| Property | Reactive | Notes |
+| - | :-: | - |
+| `items` | <AppSuccessIcon /> | Final visible items (paginated) |
+| `allItems` | <AppSuccessIcon /> | Raw unprocessed items (projected from registered tickets) |
+| `filteredItems` | <AppSuccessIcon /> | Items after filtering |
+| `sortedItems` | <AppSuccessIcon /> | Items after filter + sort + order |
+| `layout.columns` | <AppSuccessIcon /> | Resolved columns with size/offset |
+| `layout.pinned` | <AppSuccessIcon /> | Pin region breakdown |
+| `editing.active` | <AppSuccessIcon /> | Currently edited cell |
+| `editing.error` | <AppSuccessIcon /> | Validation error string |
+| `editing.dirty` | <AppSuccessIcon /> | Uncommitted edits map |
+| `rows.order` | <AppSuccessIcon /> | Current row ordering |
+| `spans` | <AppSuccessIcon /> | Row span map |
+| `headers` | <AppSuccessIcon /> | 2D header grid |
+| `sort.columns` | <AppSuccessIcon /> | Current sort entries |
+| `pagination.page` | <AppSuccessIcon /> | Current page |
+| `total` | <AppSuccessIcon /> | Total row count |
+
+## Adapters
+
+Grid adapters extend the data table adapters with row ordering inserted between sort and pagination.
+
+| Adapter | Pipeline | Use Case |
+| - | - | - |
+| [ClientGridAdapter](#clientgridadapter-default) | filter → sort → order → paginate | Default. All processing client-side |
+| [ServerGridAdapter](#servergridadapter) | pass-through | API-driven. Server handles everything |
+| [VirtualGridAdapter](#virtualgridadapter) | filter → sort → order → (no paginate) | Large lists with createVirtual |
+
+### ClientGridAdapter (default)
+
+Extends the client adapter with row ordering applied post-sort, pre-pagination.
+
+```mermaid
+graph LR
+  A[Raw Items] --> B[Filter] --> C[Sort] --> D[Row Order] --> E[Paginate] --> F[Visible Items]
+```
+
+```ts
+import { createDataGrid } from '@vuetify/v0'
+
+const grid = createDataGrid({
+  columns,
+  // ClientGridAdapter is the default — not required
+})
+
+grid.onboard(employees.map(value => ({ id: value.id, value })))
+
+// Row ordering
+grid.rows.move(0, 3)  // move row 0 to position 3
+grid.rows.reset()      // clear custom ordering
+```
+
+### ServerGridAdapter
+
+Pass-through adapter for API-driven grids. Re-exports the data table's `ServerAdapter`.
+
+```ts
+import { createDataGrid, ServerGridAdapter } from '@vuetify/v0'
+
+const grid = createDataGrid({
+  columns,
+  adapter: new ServerGridAdapter({ total: totalCount, loading: isLoading }),
+})
+
+// Push server-returned rows into the grid as they arrive
+grid.onboard(serverItems.map(value => ({ id: value.id, value })))
+```
+
+### VirtualGridAdapter
+
+Client-side filter/sort/order without pagination slicing. All items are passed to `createVirtual`.
+
+```ts
+import { createDataGrid, VirtualGridAdapter } from '@vuetify/v0'
+
+const grid = createDataGrid({
+  columns,
+  adapter: new VirtualGridAdapter(grid.rows.order),
+})
+
+grid.onboard(largeDataset.map(value => ({ id: value.id, value })))
+```
+
+## Examples
+
+::: example
+/composables/create-data-grid/pinned/PinnedGrid.vue
+/composables/create-data-grid/pinned/columns.ts
+/composables/create-data-grid/pinned/data.ts
+
+### Column Pinning & Resizing
+
+A financial data grid with 10 columns that requires horizontal scrolling. Ticker is pinned left, sector pinned right — the center columns scroll independently with drag-to-resize handles.
+
+**File breakdown:**
+
+| File | Role |
+|------|------|
+| `PinnedGrid.vue` | Financial spreadsheet with sticky pinned columns, resize handles, and formatted numbers |
+| `columns.ts` | 10 columns with ticker pinned left, sector pinned right |
+| `data.ts` | 12 stocks across Tech, Healthcare, Finance, Energy, and Consumer sectors |
+
+**Key patterns:**
+
+- `layout.pinned` splits columns into `left`, `scrollable`, and `right` regions with independent offsets
+- `layout.resize(key, delta)` adjusts a column and its neighbor to maintain total width
+- `layout.pin(key, position)` moves columns between regions dynamically
+- `layout.reset()` restores initial sizes, order, and pins
+
+:::
+
+::: example
+/composables/create-data-grid/editing/EditableGrid.vue
+/composables/create-data-grid/editing/columns.ts
+/composables/create-data-grid/editing/data.ts
+
+### Cell Editing
+
+An inventory management grid where editing is the primary workflow. Product name, price, and quantity are editable — invalid values show inline errors and block commit.
+
+**File breakdown:**
+
+| File | Role |
+|------|------|
+| `EditableGrid.vue` | Click-to-edit cells with focus ring, Enter/Escape keyboard handling, and edit history log |
+| `columns.ts` | Columns with `editable: true` and `validate` functions for name, price, and quantity |
+| `data.ts` | 8 products across electronics, accessories, and peripherals |
+
+**Key patterns:**
+
+- `editing.edit(row, column)` activates a cell for editing
+- `editing.commit(value)` validates first — only `true` from the validator allows the edit through
+- `editing.error` persists until the value passes validation or the user cancels
+- `onEdit` callback receives the full item for context-aware updates
+
+:::
+
+::: example
+/composables/create-data-grid/spanning/SpanningGrid.vue
+/composables/create-data-grid/spanning/columns.ts
+/composables/create-data-grid/spanning/data.ts
+
+### Row Spanning
+
+A team schedule grid where department cells span all members in that department. Day columns show availability status with color-coded indicators.
+
+**File breakdown:**
+
+| File | Role |
+|------|------|
+| `SpanningGrid.vue` | Schedule grid with department spanning and color-coded day cells |
+| `columns.ts` | Department, member, and Mon–Fri day columns |
+| `data.ts` | 10 team members across 3 departments with weekly availability |
+
+**Key patterns:**
+
+- `rowSpanning(item, column)` returns the number of rows a cell should span
+- `spans.value` provides a Map of `rowID → column → { rowSpan, hidden }`
+- Cells with `hidden: true` are skipped in rendering — the cell above covers them
+- Spans are clamped to remaining visible rows and never cross page boundaries
+
+:::
+
+## Recipes
+
+### Column Layout
+
+Columns are sized as percentages (0–100) and can be pinned, resized, and reordered.
+
+```ts
+const grid = createDataGrid({
+  columns: [
+    { key: 'name', size: 30, pinned: 'left', minSize: 15, maxSize: 50 },
+    { key: 'email', size: 40 },
+    { key: 'status', size: 30, pinned: 'right' },
+  ],
+})
+
+grid.onboard(rows.map(value => ({ id: value.id, value })))
+
+// Pin regions
+grid.layout.pinned.value      // { left: [...], scrollable: [...], right: [...] }
+
+// Resize — delta-based, neighbor absorbs inverse
+grid.layout.resize('name', 5)  // name grows 5%, email shrinks 5%
+
+// Reorder by display index
+grid.layout.reorder(0, 2)
+
+// Replace all sizes at once
+grid.layout.distribute([40, 35, 25])
+
+// Restore initial state
+grid.layout.reset()
+```
+
+### Cell Editing
+
+Click-to-edit with validation. Does not mutate source data — commit fires a callback.
+
+```ts
+const grid = createDataGrid({
+  columns: [
+    {
+      key: 'email',
+      editable: true,
+      validate: (value, item) => {
+        if (typeof value !== 'string' || !value.includes('@')) return 'Invalid email'
+        return true
+      },
+    },
+  ],
+  editing: {
+    onEdit: (row, column, value, item) => {
+      console.log(`Updated ${column} on row ${row} to ${value}`)
+    },
+  },
+})
+
+grid.onboard(rows.map(value => ({ id: value.id, value })))
+
+grid.editing.edit(1, 'email')     // Activate cell
+grid.editing.commit('new@email')  // Validate and save
+grid.editing.cancel()             // Discard
+grid.editing.active.value         // { row: 1, column: 'email' } | null
+grid.editing.error.value          // 'Invalid email' | null
+grid.editing.dirty.value          // Map of uncommitted edits
+```
+
+### Row Ordering
+
+Post-sort row ordering for drag-and-drop reordering.
+
+```ts
+const grid = createDataGrid({ columns })
+
+grid.onboard(rows.map(value => ({ id: value.id, value })))
+
+grid.rows.move(0, 3)           // Move row from index 0 to 3
+grid.rows.order.value          // Current ID-based order
+grid.rows.reset()              // Clear custom ordering
+
+// Ordering resets on sort change by default
+// Set preserveRowOrder: true to keep ordering across sorts
+```
+
+### Row Spanning
+
+Merge cells vertically using a spanning function.
+
+```ts
+const grid = createDataGrid({
+  columns,
+  rowSpanning: (item, column) => {
+    if (column === 'department') return 3  // span 3 rows
+    return 1
+  },
+})
+
+grid.onboard(rows.map(value => ({ id: value.id, value })))
+
+// Span map: item ID → column key → { rowSpan, hidden }
+grid.spans.value.get(1)?.get('department')
+// { rowSpan: 3, hidden: false }  — render with rowspan="3"
+
+grid.spans.value.get(2)?.get('department')
+// { rowSpan: 1, hidden: true }   — skip rendering (covered by row above)
+```
+
+### Nested Columns
+
+Column definitions support nesting for grouped headers. Layout and data pipeline use leaf columns only.
+
+```ts
+const grid = createDataGrid({
+  columns: [
+    { key: 'name', title: 'Name', size: 30 },
+    {
+      key: 'contact',
+      title: 'Contact',
+      children: [
+        { key: 'email', title: 'Email', size: 40 },
+        { key: 'phone', title: 'Phone', size: 30 },
+      ],
+    },
+  ],
+})
+
+grid.onboard(rows.map(value => ({ id: value.id, value })))
+
+// headers: 2D array with colspan/rowspan for <thead> rendering
+grid.headers.value
+// [[{ key: 'name', rowspan: 2 }, { key: 'contact', colspan: 2 }],
+//  [{ key: 'email' }, { key: 'phone' }]]
+```
+
+<DocsApi />
diff --git a/apps/docs/src/pages/composables/data/create-data-table.md b/apps/docs/src/pages/composables/data/create-data-table.md
index fb0a0d765..f530cceb5 100644
--- a/apps/docs/src/pages/composables/data/create-data-table.md
+++ b/apps/docs/src/pages/composables/data/create-data-table.md
@@ -22,15 +22,17 @@ Composable data table built on v0 primitives. Composes sorting, filtering, pagin
 
 <DocsPageFeatures :frontmatter />
 
+> [!TIP]
+> Rows are registered through the registry surface, not passed as an `items` option. Call `table.onboard(rows.map(value => ({ id: value.id, value })))` after construction, or register rows one at a time with `table.register({ id, value })`. The ticket id IS the row identifier — selection, expansion, and grouping all key off it.
+
 ## Usage
 
-Pass `items` and `columns` to get a fully reactive data table with search, sort, and pagination ready to use.
+Construct the table with `columns`, then register rows via `onboard` (bulk) or `register` (one at a time). Each row becomes a ticket keyed by the `id` you supply — that id is what `selection.toggle`, `expansion.toggle`, and `unregister` accept.
 
 ```ts collapse
 import { createDataTable } from '@vuetify/v0'
 
 const table = createDataTable({
-  items: users,
   columns: [
     { key: 'name', title: 'Name', sortable: true, filterable: true },
     { key: 'email', title: 'Email', sortable: true, filterable: true },
@@ -38,6 +40,8 @@ const table = createDataTable({
   ],
 })
 
+table.onboard(users.map(value => ({ id: value.id, value })))
+
 // Search
 table.search('john')
 console.log(table.query.value) // 'john'
@@ -50,6 +54,12 @@ table.pagination.next()
 
 // Select rows
 table.selection.toggle('user-1')
+
+// Add / remove rows after setup
+const ticket = table.register({ id: 'user-99', value: newUser })
+ticket.unregister()           // remove via returned ticket
+table.unregister('user-1')    // remove by id
+table.clear()                 // wipe all rows
 ```
 
 ::: example
@@ -73,19 +83,20 @@ import { createDataTableContext } from '@vuetify/v0'
 const [useUsersTable, provideUsersTable, usersTable] =
   createDataTableContext({
     namespace: 'app:users',
-    items: users,
     columns: [
       { key: 'name', title: 'Name', sortable: true },
       { key: 'email', title: 'Email' },
     ],
   })
 
+usersTable.onboard(users.map(value => ({ id: value.id, value })))
+
 // In parent component
 provideUsersTable()
 
 // In child component (e.g., a toolbar or pagination control)
 const table = useUsersTable()
-table.sort('name', 'asc')
+table.sort.toggle('name')
 ```
 
 ## Adapters
@@ -117,10 +128,11 @@ import { createDataTable } from '@vuetify/v0'
 import { ClientDataTableAdapter } from '@vuetify/v0/data-table/adapters/client'
 
 const table = createDataTable({
-  items: users,
   columns,
   adapter: new ClientDataTableAdapter(), // default — not required
 })
+
+table.onboard(users.map(value => ({ id: value.id, value })))
 ```
 
 ### ServerDataTableAdapter
@@ -146,12 +158,17 @@ graph LR
 - `allItems`, `filteredItems`, `sortedItems`, and `items` all point to the same source (no client-side processing)
 - Exposes `loading` and `error` via `table.loading` and `table.error`
 
+Server-backed tables don't hold a long-lived `items` ref — instead, the fetch handler calls `table.clear()` and `table.onboard(...)` whenever a new page of results comes back. The registry becomes the single source of truth for what the table renders, and the adapter's `total` / `loading` / `error` refs drive pagination and UI state.
+
 ```ts
 import { createDataTable } from '@vuetify/v0'
 import { ServerDataTableAdapter } from '@vuetify/v0/data-table/adapters/server'
 
+const totalCount = shallowRef(0)
+const isLoading = shallowRef(false)
+const fetchError = shallowRef<Error | null>(null)
+
 const table = createDataTable({
-  items: serverItems,
   columns,
   adapter: new ServerDataTableAdapter({
     total: totalCount,
@@ -160,10 +177,20 @@ const table = createDataTable({
   }),
 })
 
+async function fetchData () {
+  isLoading.value = true
+  const result = await fetchUsers(/* query, sorts, page */)
+  totalCount.value = result.total
+  table.clear()
+  table.onboard(result.items.map(value => ({ id: value.id, value })))
+  isLoading.value = false
+}
+
 // Watch query/sort/page to trigger API calls
 watch(
   [table.query, table.sort.columns, table.pagination.page],
-  () => fetchData()
+  () => fetchData(),
+  { immediate: true },
 )
 ```
 
@@ -186,11 +213,12 @@ import { createDataTable, createVirtual } from '@vuetify/v0'
 import { VirtualDataTableAdapter } from '@vuetify/v0/data-table/adapters/virtual'
 
 const table = createDataTable({
-  items: largeDataset,
   columns,
   adapter: new VirtualDataTableAdapter(),
 })
 
+table.onboard(largeDataset.map(value => ({ id: value.id, value })))
+
 // Wrap table.items with createVirtual for rendering
 const virtual = createVirtual(table.items, { itemHeight: 40 })
 ```
@@ -203,7 +231,6 @@ Toggle sort cycles through directions. Configure with `mandate` and `firstSortOr
 
 ```ts
 const table = createDataTable({
-  items,
   columns: [
     { key: 'name', sortable: true },
     { key: 'age', sortable: true, sort: (a, b) => Number(a) - Number(b) },
@@ -213,6 +240,8 @@ const table = createDataTable({
   sortMultiple: true,        // Enable multi-column sort
 })
 
+table.onboard(items.map(value => ({ id: value.id, value })))
+
 table.sort.toggle('name')
 table.sort.direction('name')     // 'asc' | 'desc' | 'none'
 table.sort.priority('name')      // 0-based index, or -1
@@ -227,7 +256,6 @@ Search filters across all `filterable` columns. Use per-column `filter` for cust
 
 ```ts
 const table = createDataTable({
-  items,
   columns: [
     { key: 'name', filterable: true },
     { key: 'status', filterable: true, filter: (value, query) => {
@@ -236,6 +264,8 @@ const table = createDataTable({
   ],
 })
 
+table.onboard(items.map(value => ({ id: value.id, value })))
+
 table.search('active')
 ```
 
@@ -251,12 +281,13 @@ Control row selection with the `selectStrategy` option.
 
 ```ts
 const table = createDataTable({
-  items,
   columns,
   selectStrategy: 'page',
   itemSelectable: 'canSelect',  // Disable selection for rows where canSelect is falsy
 })
 
+table.onboard(items.map(value => ({ id: value.id, value })))
+
 table.selection.toggle('row-1')
 table.selection.isSelected('row-1')     // true
 table.selection.isSelectable('row-1')   // true (based on itemSelectable)
@@ -271,11 +302,12 @@ Expand rows to reveal detail content.
 
 ```ts
 const table = createDataTable({
-  items,
   columns,
   expandMultiple: false,  // Only one row expanded at a time
 })
 
+table.onboard(items.map(value => ({ id: value.id, value })))
+
 table.expansion.toggle('row-1')
 table.expansion.isExpanded('row-1')  // true
 table.expansion.expandAll()
@@ -288,12 +320,13 @@ Group rows by a column value.
 
 ```ts
 const table = createDataTable({
-  items,
   columns,
   groupBy: 'department',
   openAll: true,  // Auto-open all groups
 })
 
+table.onboard(items.map(value => ({ id: value.id, value })))
+
 table.grouping.groups.value  // [{ key: 'Engineering', value: 'Engineering', items: [...] }]
 table.grouping.toggle('Engineering')
 table.grouping.isOpen('Engineering')
@@ -303,10 +336,10 @@ table.grouping.closeAll()
 
 ## Reactivity
 
-| Property | Reactive | Notes |
+| Property / Method | Reactive | Notes |
 | - | :-: | - |
-| `items` | <AppSuccessIcon /> | Computed — final visible items |
-| `allItems` | <AppSuccessIcon /> | Computed — raw unprocessed items |
+| `items` | <AppSuccessIcon /> | Computed — final visible items (projected from registry tickets) |
+| `allItems` | <AppSuccessIcon /> | Computed — every registered row, unfiltered/unsorted |
 | `filteredItems` | <AppSuccessIcon /> | Computed — items after filtering |
 | `sortedItems` | <AppSuccessIcon /> | Computed — items after filter + sort |
 | `query` | <AppSuccessIcon /> | ShallowRef — current search query (readonly) |
@@ -321,6 +354,10 @@ table.grouping.closeAll()
 | `total` | <AppSuccessIcon /> | Computed — total row count |
 | `loading` | <AppSuccessIcon /> | Computed — adapter loading state |
 | `error` | <AppSuccessIcon /> | Computed — adapter error state |
+| `register(input)` | — | Method — adds a single ticket, mutates the registry (downstream refs recompute) |
+| `onboard(inputs)` | — | Method — bulk register, mutates the registry |
+| `unregister(id)` | — | Method — removes a ticket by id |
+| `clear()` | — | Method — wipes every ticket (useful before re-fetching server data) |
 
 ## Examples
 
diff --git a/apps/docs/src/pages/composables/reactivity/use-proxy-registry.md b/apps/docs/src/pages/composables/reactivity/use-proxy-registry.md
index dd7239ae6..d19111ea6 100644
--- a/apps/docs/src/pages/composables/reactivity/use-proxy-registry.md
+++ b/apps/docs/src/pages/composables/reactivity/use-proxy-registry.md
@@ -65,7 +65,7 @@ flowchart LR
 > [!TIP] Deep vs shallow
 > Pass `{ deep: true }` for `reactive()`, or omit for `shallowReactive()` (default). Shallow is more performant when ticket internals don't need tracking.
 
-## Frequently Asked Questions
+## FAQ
 
 ::: faq
 ??? Why does the registry need `events: true`?
diff --git a/apps/docs/src/pages/composables/registration/create-tokens.md b/apps/docs/src/pages/composables/registration/create-tokens.md
index 5c03d8d48..4efedf432 100644
--- a/apps/docs/src/pages/composables/registration/create-tokens.md
+++ b/apps/docs/src/pages/composables/registration/create-tokens.md
@@ -144,7 +144,7 @@ A design system with four token categories — color palettes, semantic aliases,
 
 :::
 
-## Frequently Asked Questions
+## FAQ
 
 ::: faq
 ??? What's the difference between `depth: Infinity` and `flat: true`?
diff --git a/apps/docs/src/pages/composables/system/use-presence.md b/apps/docs/src/pages/composables/system/use-presence.md
index 357f56f12..30ea41f90 100644
--- a/apps/docs/src/pages/composables/system/use-presence.md
+++ b/apps/docs/src/pages/composables/system/use-presence.md
@@ -84,7 +84,7 @@ Toggle content with a CSS-driven enter/exit animation. `isMounted` drives `v-if`
 
 :::
 
-## Questions
+## FAQ
 
 ::: faq
 ??? How does usePresence relate to useLazy?
diff --git a/apps/docs/src/pages/guide/fundamentals/composables.md b/apps/docs/src/pages/guide/fundamentals/composables.md
index cf02962ea..0832591eb 100644
--- a/apps/docs/src/pages/guide/fundamentals/composables.md
+++ b/apps/docs/src/pages/guide/fundamentals/composables.md
@@ -263,7 +263,7 @@ ticket?.value // MyItem
 
 > [!ASKAI] Which composables should I use for a data table with filtering and pagination?
 
-## Frequently Asked Questions
+## FAQ
 
 ::: faq
 ??? Should I always use context injection or can I call factories directly?
diff --git a/apps/docs/src/pages/guide/fundamentals/core.md b/apps/docs/src/pages/guide/fundamentals/core.md
index be3d4388d..dae5eb2c1 100644
--- a/apps/docs/src/pages/guide/fundamentals/core.md
+++ b/apps/docs/src/pages/guide/fundamentals/core.md
@@ -256,7 +256,7 @@ wizard.last()   // Jump to end
 
 > [!ASKAI] How do I handle scoped contexts for nested components without prop drilling?
 
-## Frequently Asked Questions
+## FAQ
 
 ::: faq
 ??? Why use createContext instead of Vue's provide/inject directly?
diff --git a/apps/docs/src/pages/guide/fundamentals/reactivity.md b/apps/docs/src/pages/guide/fundamentals/reactivity.md
index 55932cfe9..dc3010bda 100644
--- a/apps/docs/src/pages/guide/fundamentals/reactivity.md
+++ b/apps/docs/src/pages/guide/fundamentals/reactivity.md
@@ -423,7 +423,7 @@ See [Benchmarks](/guide/fundamentals/benchmarks) for detailed measurements and m
 
 > [!ASKAI] Should I use useProxyRegistry or events for a list of 500 items that updates every few seconds?
 
-## Frequently Asked Questions
+## FAQ
 
 ::: faq
 ??? Why doesn't v0 just make everything reactive like Vue?
diff --git a/apps/docs/src/typed-router.d.ts b/apps/docs/src/typed-router.d.ts
index f97331bda..a48bcf524 100644
--- a/apps/docs/src/typed-router.d.ts
+++ b/apps/docs/src/typed-router.d.ts
@@ -345,6 +345,13 @@ declare module 'vue-router/auto-routes' {
       Record<never, never>,
       | never
     >,
+    '/composables/data/create-data-grid': RouteRecordInfo<
+      '/composables/data/create-data-grid',
+      '/composables/data/create-data-grid',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
     '/composables/data/create-data-table': RouteRecordInfo<
       '/composables/data/create-data-table',
       '/composables/data/create-data-table',
@@ -1349,6 +1356,12 @@ declare module 'vue-router/auto-routes' {
       views:
         | never
     }
+    'src/pages/composables/data/create-data-grid.md': {
+      routes:
+        | '/composables/data/create-data-grid'
+      views:
+        | never
+    }
     'src/pages/composables/data/create-data-table.md': {
       routes:
         | '/composables/data/create-data-table'
diff --git a/dev/src/components.d.ts b/dev/src/components.d.ts
index 5b3969f93..d9565b966 100644
--- a/dev/src/components.d.ts
+++ b/dev/src/components.d.ts
@@ -11,15 +11,6 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
-    AlertDialogAction: typeof import('./../../packages/0/src/components/AlertDialog/AlertDialogAction.vue')['default']
-    AlertDialogActivator: typeof import('./../../packages/0/src/components/AlertDialog/AlertDialogActivator.vue')['default']
-    AlertDialogCancel: typeof import('./../../packages/0/src/components/AlertDialog/AlertDialogCancel.vue')['default']
-    AlertDialogClose: typeof import('./../../packages/0/src/components/AlertDialog/AlertDialogClose.vue')['default']
-    AlertDialogContent: typeof import('./../../packages/0/src/components/AlertDialog/AlertDialogContent.vue')['default']
-    AlertDialogDescription: typeof import('./../../packages/0/src/components/AlertDialog/AlertDialogDescription.vue')['default']
-    AlertDialogRoot: typeof import('./../../packages/0/src/components/AlertDialog/AlertDialogRoot.vue')['default']
-    AlertDialogTitle: typeof import('./../../packages/0/src/components/AlertDialog/AlertDialogTitle.vue')['default']
-    AspectRatio: typeof import('./../../packages/0/src/components/AspectRatio/AspectRatio.vue')['default']
     Atom: typeof import('./../../packages/0/src/components/Atom/Atom.vue')['default']
     AvatarFallback: typeof import('./../../packages/0/src/components/Avatar/AvatarFallback.vue')['default']
     AvatarImage: typeof import('./../../packages/0/src/components/Avatar/AvatarImage.vue')['default']
@@ -37,33 +28,11 @@ declare module 'vue' {
     ButtonIcon: typeof import('./../../packages/0/src/components/Button/ButtonIcon.vue')['default']
     ButtonLoading: typeof import('./../../packages/0/src/components/Button/ButtonLoading.vue')['default']
     ButtonRoot: typeof import('./../../packages/0/src/components/Button/ButtonRoot.vue')['default']
-    CarouselIndicator: typeof import('./../../packages/0/src/components/Carousel/CarouselIndicator.vue')['default']
-    CarouselItem: typeof import('./../../packages/0/src/components/Carousel/CarouselItem.vue')['default']
-    CarouselLiveRegion: typeof import('./../../packages/0/src/components/Carousel/CarouselLiveRegion.vue')['default']
-    CarouselNext: typeof import('./../../packages/0/src/components/Carousel/CarouselNext.vue')['default']
-    CarouselPrevious: typeof import('./../../packages/0/src/components/Carousel/CarouselPrevious.vue')['default']
-    CarouselProgress: typeof import('./../../packages/0/src/components/Carousel/CarouselProgress.vue')['default']
-    CarouselRoot: typeof import('./../../packages/0/src/components/Carousel/CarouselRoot.vue')['default']
-    CarouselViewport: typeof import('./../../packages/0/src/components/Carousel/CarouselViewport.vue')['default']
     CheckboxGroup: typeof import('./../../packages/0/src/components/Checkbox/CheckboxGroup.vue')['default']
     CheckboxHiddenInput: typeof import('./../../packages/0/src/components/Checkbox/CheckboxHiddenInput.vue')['default']
     CheckboxIndicator: typeof import('./../../packages/0/src/components/Checkbox/CheckboxIndicator.vue')['default']
     CheckboxRoot: typeof import('./../../packages/0/src/components/Checkbox/CheckboxRoot.vue')['default']
     CheckboxSelectAll: typeof import('./../../packages/0/src/components/Checkbox/CheckboxSelectAll.vue')['default']
-    CollapsibleActivator: typeof import('./../../packages/0/src/components/Collapsible/CollapsibleActivator.vue')['default']
-    CollapsibleContent: typeof import('./../../packages/0/src/components/Collapsible/CollapsibleContent.vue')['default']
-    CollapsibleCue: typeof import('./../../packages/0/src/components/Collapsible/CollapsibleCue.vue')['default']
-    CollapsibleRoot: typeof import('./../../packages/0/src/components/Collapsible/CollapsibleRoot.vue')['default']
-    ComboboxActivator: typeof import('./../../packages/0/src/components/Combobox/ComboboxActivator.vue')['default']
-    ComboboxContent: typeof import('./../../packages/0/src/components/Combobox/ComboboxContent.vue')['default']
-    ComboboxControl: typeof import('./../../packages/0/src/components/Combobox/ComboboxControl.vue')['default']
-    ComboboxCue: typeof import('./../../packages/0/src/components/Combobox/ComboboxCue.vue')['default']
-    ComboboxDescription: typeof import('./../../packages/0/src/components/Combobox/ComboboxDescription.vue')['default']
-    ComboboxEmpty: typeof import('./../../packages/0/src/components/Combobox/ComboboxEmpty.vue')['default']
-    ComboboxError: typeof import('./../../packages/0/src/components/Combobox/ComboboxError.vue')['default']
-    ComboboxHiddenInput: typeof import('./../../packages/0/src/components/Combobox/ComboboxHiddenInput.vue')['default']
-    ComboboxItem: typeof import('./../../packages/0/src/components/Combobox/ComboboxItem.vue')['default']
-    ComboboxRoot: typeof import('./../../packages/0/src/components/Combobox/ComboboxRoot.vue')['default']
     DialogActivator: typeof import('./../../packages/0/src/components/Dialog/DialogActivator.vue')['default']
     DialogClose: typeof import('./../../packages/0/src/components/Dialog/DialogClose.vue')['default']
     DialogContent: typeof import('./../../packages/0/src/components/Dialog/DialogContent.vue')['default']
@@ -72,29 +41,17 @@ declare module 'vue' {
     DialogTitle: typeof import('./../../packages/0/src/components/Dialog/DialogTitle.vue')['default']
     ExpansionPanelActivator: typeof import('./../../packages/0/src/components/ExpansionPanel/ExpansionPanelActivator.vue')['default']
     ExpansionPanelContent: typeof import('./../../packages/0/src/components/ExpansionPanel/ExpansionPanelContent.vue')['default']
-    ExpansionPanelCue: typeof import('./../../packages/0/src/components/ExpansionPanel/ExpansionPanelCue.vue')['default']
-    ExpansionPanelGroup: typeof import('./../../packages/0/src/components/ExpansionPanel/ExpansionPanelGroup.vue')['default']
     ExpansionPanelHeader: typeof import('./../../packages/0/src/components/ExpansionPanel/ExpansionPanelHeader.vue')['default']
+    ExpansionPanelItem: typeof import('./../../packages/0/src/components/ExpansionPanel/ExpansionPanelItem.vue')['default']
     ExpansionPanelRoot: typeof import('./../../packages/0/src/components/ExpansionPanel/ExpansionPanelRoot.vue')['default']
     Form: typeof import('./../../packages/0/src/components/Form/Form.vue')['default']
     GroupItem: typeof import('./../../packages/0/src/components/Group/GroupItem.vue')['default']
     GroupRoot: typeof import('./../../packages/0/src/components/Group/GroupRoot.vue')['default']
-    ImageFallback: typeof import('./../../packages/0/src/components/Image/ImageFallback.vue')['default']
-    ImageImg: typeof import('./../../packages/0/src/components/Image/ImageImg.vue')['default']
-    ImagePlaceholder: typeof import('./../../packages/0/src/components/Image/ImagePlaceholder.vue')['default']
-    ImageRoot: typeof import('./../../packages/0/src/components/Image/ImageRoot.vue')['default']
     InputControl: typeof import('./../../packages/0/src/components/Input/InputControl.vue')['default']
     InputDescription: typeof import('./../../packages/0/src/components/Input/InputDescription.vue')['default']
     InputError: typeof import('./../../packages/0/src/components/Input/InputError.vue')['default']
     InputRoot: typeof import('./../../packages/0/src/components/Input/InputRoot.vue')['default']
     Locale: typeof import('./../../packages/0/src/components/Locale/Locale.vue')['default']
-    NumberFieldControl: typeof import('./../../packages/0/src/components/NumberField/NumberFieldControl.vue')['default']
-    NumberFieldDecrement: typeof import('./../../packages/0/src/components/NumberField/NumberFieldDecrement.vue')['default']
-    NumberFieldDescription: typeof import('./../../packages/0/src/components/NumberField/NumberFieldDescription.vue')['default']
-    NumberFieldError: typeof import('./../../packages/0/src/components/NumberField/NumberFieldError.vue')['default']
-    NumberFieldIncrement: typeof import('./../../packages/0/src/components/NumberField/NumberFieldIncrement.vue')['default']
-    NumberFieldRoot: typeof import('./../../packages/0/src/components/NumberField/NumberFieldRoot.vue')['default']
-    NumberFieldScrub: typeof import('./../../packages/0/src/components/NumberField/NumberFieldScrub.vue')['default']
     PaginationEllipsis: typeof import('./../../packages/0/src/components/Pagination/PaginationEllipsis.vue')['default']
     PaginationFirst: typeof import('./../../packages/0/src/components/Pagination/PaginationFirst.vue')['default']
     PaginationItem: typeof import('./../../packages/0/src/components/Pagination/PaginationItem.vue')['default']
@@ -106,22 +63,10 @@ declare module 'vue' {
     PopoverActivator: typeof import('./../../packages/0/src/components/Popover/PopoverActivator.vue')['default']
     PopoverContent: typeof import('./../../packages/0/src/components/Popover/PopoverContent.vue')['default']
     PopoverRoot: typeof import('./../../packages/0/src/components/Popover/PopoverRoot.vue')['default']
-    Portal: typeof import('./../../packages/0/src/components/Portal/Portal.vue')['default']
-    Presence: typeof import('./../../packages/0/src/components/Presence/Presence.vue')['default']
-    ProgressBuffer: typeof import('./../../packages/0/src/components/Progress/ProgressBuffer.vue')['default']
-    ProgressFill: typeof import('./../../packages/0/src/components/Progress/ProgressFill.vue')['default']
-    ProgressHiddenInput: typeof import('./../../packages/0/src/components/Progress/ProgressHiddenInput.vue')['default']
-    ProgressLabel: typeof import('./../../packages/0/src/components/Progress/ProgressLabel.vue')['default']
-    ProgressRoot: typeof import('./../../packages/0/src/components/Progress/ProgressRoot.vue')['default']
-    ProgressTrack: typeof import('./../../packages/0/src/components/Progress/ProgressTrack.vue')['default']
-    ProgressValue: typeof import('./../../packages/0/src/components/Progress/ProgressValue.vue')['default']
     RadioGroup: typeof import('./../../packages/0/src/components/Radio/RadioGroup.vue')['default']
     RadioHiddenInput: typeof import('./../../packages/0/src/components/Radio/RadioHiddenInput.vue')['default']
     RadioIndicator: typeof import('./../../packages/0/src/components/Radio/RadioIndicator.vue')['default']
     RadioRoot: typeof import('./../../packages/0/src/components/Radio/RadioRoot.vue')['default']
-    RatingHiddenInput: typeof import('./../../packages/0/src/components/Rating/RatingHiddenInput.vue')['default']
-    RatingItem: typeof import('./../../packages/0/src/components/Rating/RatingItem.vue')['default']
-    RatingRoot: typeof import('./../../packages/0/src/components/Rating/RatingRoot.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     Scrim: typeof import('./../../packages/0/src/components/Scrim/Scrim.vue')['default']
@@ -164,9 +109,6 @@ declare module 'vue' {
     TabsPanel: typeof import('./../../packages/0/src/components/Tabs/TabsPanel.vue')['default']
     TabsRoot: typeof import('./../../packages/0/src/components/Tabs/TabsRoot.vue')['default']
     Theme: typeof import('./../../packages/0/src/components/Theme/Theme.vue')['default']
-    ToggleGroup: typeof import('./../../packages/0/src/components/Toggle/ToggleGroup.vue')['default']
-    ToggleIndicator: typeof import('./../../packages/0/src/components/Toggle/ToggleIndicator.vue')['default']
-    ToggleRoot: typeof import('./../../packages/0/src/components/Toggle/ToggleRoot.vue')['default']
     TreeviewActivator: typeof import('./../../packages/0/src/components/Treeview/TreeviewActivator.vue')['default']
     TreeviewCheckbox: typeof import('./../../packages/0/src/components/Treeview/TreeviewCheckbox.vue')['default']
     TreeviewContent: typeof import('./../../packages/0/src/components/Treeview/TreeviewContent.vue')['default']
diff --git a/dev/src/composables.d.ts b/dev/src/composables.d.ts
index 674e2484a..07b36e167 100644
--- a/dev/src/composables.d.ts
+++ b/dev/src/composables.d.ts
@@ -8,8 +8,7 @@ export {}
 declare global {
   const COMMON_ELEMENTS: typeof import('../../packages/0/src/constants/htmlElements').COMMON_ELEMENTS
   const ClientAdapter: typeof import('../../packages/0/src/composables/createDataTable/index').ClientAdapter
-  const ComboboxClientAdapter: typeof import('../../packages/0/src/composables/createCombobox/index').ComboboxClientAdapter
-  const ComboboxServerAdapter: typeof import('../../packages/0/src/composables/createCombobox/index').ComboboxServerAdapter
+  const ClientGridAdapter: typeof import('../../packages/0/src/composables/createDataGrid/index').ClientGridAdapter
   const ConsolaLoggerAdapter: typeof import('../../packages/0/src/composables/useLogger/index').ConsolaLoggerAdapter
   const DEFAULT_DARK: typeof import('../../packages/paper/src/composables/useTheme/index').DEFAULT_DARK
   const DEFAULT_LIGHT: typeof import('../../packages/paper/src/composables/useTheme/index').DEFAULT_LIGHT
@@ -30,11 +29,13 @@ declare global {
   const SUPPORTS_OBSERVER: typeof import('../../packages/0/src/constants/globals').SUPPORTS_OBSERVER
   const SUPPORTS_TOUCH: typeof import('../../packages/0/src/constants/globals').SUPPORTS_TOUCH
   const ServerAdapter: typeof import('../../packages/0/src/composables/createDataTable/index').ServerAdapter
+  const ServerGridAdapter: typeof import('../../packages/0/src/composables/createDataGrid/index').ServerGridAdapter
   const TemporalDateAdapter: typeof import('../../packages/0/src/composables/useDate/index').TemporalDateAdapter
   const V0StyleSheetThemeAdapter: typeof import('../../packages/0/src/composables/useTheme/index').V0StyleSheetThemeAdapter
   const V0UnheadThemeAdapter: typeof import('../../packages/0/src/composables/useTheme/index').V0UnheadThemeAdapter
   const V0_ELEVATION_KEY: typeof import('../../packages/paper/src/composables/useElevation/index').V0_ELEVATION_KEY
   const VirtualAdapter: typeof import('../../packages/0/src/composables/createDataTable/index').VirtualAdapter
+  const VirtualGridAdapter: typeof import('../../packages/0/src/composables/createDataGrid/index').VirtualGridAdapter
   const Vuetify0DateAdapter: typeof import('../../packages/0/src/composables/useDate/index').Vuetify0DateAdapter
   const Vuetify0LocaleAdapter: typeof import('../../packages/0/src/composables/useLocale/index').Vuetify0LocaleAdapter
   const Vuetify0LoggerAdapter: typeof import('../../packages/0/src/composables/useLogger/index').Vuetify0LoggerAdapter
@@ -51,9 +52,9 @@ declare global {
   const createBreakpoints: typeof import('../../packages/0/src/composables/useBreakpoints/index').createBreakpoints
   const createBreakpointsContext: typeof import('../../packages/0/src/composables/useBreakpoints/index').createBreakpointsContext
   const createBreakpointsPlugin: typeof import('../../packages/0/src/composables/useBreakpoints/index').createBreakpointsPlugin
-  const createCombobox: typeof import('../../packages/0/src/composables/createCombobox/index').createCombobox
-  const createComboboxContext: typeof import('../../packages/0/src/composables/createCombobox/index').createComboboxContext
   const createContext: typeof import('../../packages/0/src/composables/createContext/index').createContext
+  const createDataGrid: typeof import('../../packages/0/src/composables/createDataGrid/index').createDataGrid
+  const createDataGridContext: typeof import('../../packages/0/src/composables/createDataGrid/index').createDataGridContext
   const createDataTable: typeof import('../../packages/0/src/composables/createDataTable/index').createDataTable
   const createDataTableContext: typeof import('../../packages/0/src/composables/createDataTable/index').createDataTableContext
   const createDate: typeof import('../../packages/0/src/composables/useDate/index').createDate
@@ -74,7 +75,6 @@ declare global {
   const createHydration: typeof import('../../packages/0/src/composables/useHydration/index').createHydration
   const createHydrationContext: typeof import('../../packages/0/src/composables/useHydration/index').createHydrationContext
   const createHydrationPlugin: typeof import('../../packages/0/src/composables/useHydration/index').createHydrationPlugin
-  const createInput: typeof import('../../packages/0/src/composables/createInput/index').createInput
   const createLocale: typeof import('../../packages/0/src/composables/useLocale/index').createLocale
   const createLocaleContext: typeof import('../../packages/0/src/composables/useLocale/index').createLocaleContext
   const createLocaleFallback: typeof import('../../packages/0/src/composables/useLocale/index').createLocaleFallback
@@ -88,8 +88,6 @@ declare global {
   const createNotifications: typeof import('../../packages/0/src/composables/useNotifications/index').createNotifications
   const createNotificationsContext: typeof import('../../packages/0/src/composables/useNotifications/index').createNotificationsContext
   const createNotificationsPlugin: typeof import('../../packages/0/src/composables/useNotifications/index').createNotificationsPlugin
-  const createNumberField: typeof import('../../packages/0/src/composables/createNumberField/index').createNumberField
-  const createNumeric: typeof import('../../packages/0/src/composables/createNumeric/index').createNumeric
   const createOverflow: typeof import('../../packages/0/src/composables/createOverflow/index').createOverflow
   const createOverflowContext: typeof import('../../packages/0/src/composables/createOverflow/index').createOverflowContext
   const createPagination: typeof import('../../packages/0/src/composables/createPagination/index').createPagination
@@ -99,12 +97,8 @@ declare global {
   const createPermissionsPlugin: typeof import('../../packages/0/src/composables/usePermissions/index').createPermissionsPlugin
   const createPlugin: typeof import('../../packages/0/src/composables/createPlugin/index').createPlugin
   const createPluginContext: typeof import('../../packages/0/src/composables/createPlugin/index').createPluginContext
-  const createProgress: typeof import('../../packages/0/src/composables/createProgress/index').createProgress
-  const createProgressContext: typeof import('../../packages/0/src/composables/createProgress/index').createProgressContext
   const createQueue: typeof import('../../packages/0/src/composables/createQueue/index').createQueue
   const createQueueContext: typeof import('../../packages/0/src/composables/createQueue/index').createQueueContext
-  const createRating: typeof import('../../packages/0/src/composables/createRating/index').createRating
-  const createRatingContext: typeof import('../../packages/0/src/composables/createRating/index').createRatingContext
   const createRegistry: typeof import('../../packages/0/src/composables/createRegistry/index').createRegistry
   const createRegistryContext: typeof import('../../packages/0/src/composables/createRegistry/index').createRegistryContext
   const createRtl: typeof import('../../packages/0/src/composables/useRtl/index').createRtl
@@ -207,8 +201,6 @@ declare global {
   const ref: typeof import('vue').ref
   const resolveComponent: typeof import('vue').resolveComponent
   const resolveHeaders: typeof import('../../packages/0/src/composables/createDataTable/index').resolveHeaders
-  const resolveIds: typeof import('../../packages/0/src/utilities/helpers').resolveIds
-  const resolveIndexes: typeof import('../../packages/0/src/utilities/helpers').resolveIndexes
   const rgbToHex: typeof import('../../packages/0/src/utilities/color').rgbToHex
   const rgbToRgba: typeof import('../../packages/paper/src/composables/useColor/index').rgbToRgba
   const rgbaToHexa: typeof import('../../packages/paper/src/composables/useColor/index').rgbaToHexa
@@ -233,11 +225,11 @@ declare global {
   const useBreakpoints: typeof import('../../packages/0/src/composables/useBreakpoints/index').useBreakpoints
   const useClickOutside: typeof import('../../packages/0/src/composables/useClickOutside/index').useClickOutside
   const useColor: typeof import('../../packages/paper/src/composables/useColor/index').useColor
-  const useCombobox: typeof import('../../packages/0/src/composables/createCombobox/index').useCombobox
   const useContext: typeof import('../../packages/0/src/composables/createContext/index').useContext
   const useContrast: typeof import('../../packages/paper/src/composables/useContrast/index').useContrast
   const useCssModule: typeof import('vue').useCssModule
   const useCssVars: typeof import('vue').useCssVars
+  const useDataGrid: typeof import('../../packages/0/src/composables/createDataGrid/index').useDataGrid
   const useDataTable: typeof import('../../packages/0/src/composables/createDataTable/index').useDataTable
   const useDate: typeof import('../../packages/0/src/composables/useDate/index').useDate
   const useDimensions: typeof import('../../packages/paper/src/composables/useDimensions/index').useDimensions
@@ -254,7 +246,6 @@ declare global {
   const useHotkey: typeof import('../../packages/0/src/composables/useHotkey/index').useHotkey
   const useHydration: typeof import('../../packages/0/src/composables/useHydration/index').useHydration
   const useId: typeof import('../../packages/0/src/utilities/helpers').useId
-  const useImage: typeof import('../../packages/0/src/composables/useImage/index').useImage
   const useIntersectionObserver: typeof import('../../packages/0/src/composables/useIntersectionObserver/index').useIntersectionObserver
   const useLazy: typeof import('../../packages/0/src/composables/useLazy/index').useLazy
   const useLocale: typeof import('../../packages/0/src/composables/useLocale/index').useLocale
@@ -271,13 +262,10 @@ declare global {
   const usePrefersContrast: typeof import('../../packages/0/src/composables/useMediaQuery/index').usePrefersContrast
   const usePrefersDark: typeof import('../../packages/0/src/composables/useMediaQuery/index').usePrefersDark
   const usePrefersReducedMotion: typeof import('../../packages/0/src/composables/useMediaQuery/index').usePrefersReducedMotion
-  const usePresence: typeof import('../../packages/0/src/composables/usePresence/index').usePresence
-  const useProgress: typeof import('../../packages/0/src/composables/createProgress/index').useProgress
   const useProxyModel: typeof import('../../packages/0/src/composables/useProxyModel/index').useProxyModel
   const useProxyRegistry: typeof import('../../packages/0/src/composables/useProxyRegistry/index').useProxyRegistry
   const useQueue: typeof import('../../packages/0/src/composables/createQueue/index').useQueue
   const useRaf: typeof import('../../packages/0/src/composables/useRaf/index').useRaf
-  const useRating: typeof import('../../packages/0/src/composables/createRating/index').useRating
   const useRegistry: typeof import('../../packages/0/src/composables/createRegistry/index').useRegistry
   const useResizeObserver: typeof import('../../packages/0/src/composables/useResizeObserver/index').useResizeObserver
   const useRounded: typeof import('../../packages/paper/src/composables/useRounded/index').useRounded
@@ -336,84 +324,21 @@ declare global {
   export type { BreadcrumbTicketInput, BreadcrumbTicket, BreadcrumbsContext, BreadcrumbsOptions, BreadcrumbsContextOptions } from '../../packages/0/src/composables/createBreadcrumbs/index'
   import('../../packages/0/src/composables/createBreadcrumbs/index')
   // @ts-ignore
-  export type { ComboboxOptions, ComboboxContext, ComboboxAdapterContext, ComboboxAdapterInterface, ComboboxAdapterResult, ComboboxClientAdapterOptions } from '../../packages/0/src/composables/createCombobox/index'
-  import('../../packages/0/src/composables/createCombobox/index')
-  // @ts-ignore
   export type { ContextKey, CreateContextOptions } from '../../packages/0/src/composables/createContext/index'
   import('../../packages/0/src/composables/createContext/index')
   // @ts-ignore
-  export type { KeysOfType, SelectStrategy, DataTableColumn, DataTableSort, DataTableSelection, DataTableGroup, DataTableGrouping, DataTableExpansion, DataTableOptions, DataTableContext, DataTableContextOptions, DataTableAdapterContext, DataTableAdapterInterface, DataTableAdapterResult, SortDirection, SortEntry, ServerAdapterOptions, ColumnNode, InternalHeader } from '../../packages/0/src/composables/createDataTable/index'
-  import('../../packages/0/src/composables/createDataTable/index')
-  // @ts-ignore
-  export type { Primitive, FilterQuery, FilterItem, FilterMode, FilterFunction, FilterOptions, FilterResult, FilterContext, FilterContextOptions } from '../../packages/0/src/composables/createFilter/index'
-  import('../../packages/0/src/composables/createFilter/index')
-  // @ts-ignore
-  export type { FormValidationResult, FormValue, FormTicketInput, FormTicket, FormContext, FormOptions, FormContextOptions } from '../../packages/0/src/composables/createForm/index'
-  import('../../packages/0/src/composables/createForm/index')
-  // @ts-ignore
-  export type { GroupTicketInput, GroupTicket, GroupContext, GroupOptions, GroupContextOptions } from '../../packages/0/src/composables/createGroup/index'
-  import('../../packages/0/src/composables/createGroup/index')
+  export type { DataGridColumn, DataGridOptions, DataGridContext, DataGridContextOptions, ColumnLayout, GridColumnDef, PinnedRegion, PinPosition, ResolvedColumn, ActiveCell, CellEditing, CellEditingOptions, EditableColumn, RowOrdering, RowSpanningOptions, SpanEntry, ServerGridAdapterOptions } from '../../packages/0/src/composables/createDataGrid/index'
+  import('../../packages/0/src/composables/createDataGrid/index')
   // @ts-ignore
-  export type { InputState, InputOptions, InputContext } from '../../packages/0/src/composables/createInput/index'
-  import('../../packages/0/src/composables/createInput/index')
-  // @ts-ignore
-  export type { ModelTicketInput, ModelTicket, ModelContext, ModelOptions } from '../../packages/0/src/composables/createModel/index'
-  import('../../packages/0/src/composables/createModel/index')
-  // @ts-ignore
-  export type { NumberFieldOptions, NumberFieldContext } from '../../packages/0/src/composables/createNumberField/index'
-  import('../../packages/0/src/composables/createNumberField/index')
-  // @ts-ignore
-  export type { NumericOptions, NumericContext } from '../../packages/0/src/composables/createNumeric/index'
-  import('../../packages/0/src/composables/createNumeric/index')
-  // @ts-ignore
-  export type { OverflowOptions, OverflowContext, OverflowContextOptions } from '../../packages/0/src/composables/createOverflow/index'
-  import('../../packages/0/src/composables/createOverflow/index')
-  // @ts-ignore
-  export type { PaginationTicket, PaginationContext, PaginationOptions, PaginationContextOptions } from '../../packages/0/src/composables/createPagination/index'
-  import('../../packages/0/src/composables/createPagination/index')
+  export type { SelectStrategy, DataTableColumn, DataTableSort, DataTableSelection, DataTableGroup, DataTableGrouping, DataTableExpansion, DataTableOptions, DataTableContext, DataTableContextOptions, DataTableAdapterContext, DataTableAdapterInterface, DataTableAdapterResult, SortDirection, SortEntry, ServerAdapterOptions, ColumnNode, InternalHeader } from '../../packages/0/src/composables/createDataTable/index'
+  import('../../packages/0/src/composables/createDataTable/index')
   // @ts-ignore
   export type { PluginOptions, Plugin, PluginContextConfig } from '../../packages/0/src/composables/createPlugin/index'
   import('../../packages/0/src/composables/createPlugin/index')
   // @ts-ignore
-  export type { ProgressTicketInput, ProgressTicket, ProgressOptions, ProgressContext, ProgressContextOptions } from '../../packages/0/src/composables/createProgress/index'
-  import('../../packages/0/src/composables/createProgress/index')
-  // @ts-ignore
-  export type { QueueTicketInput, QueueTicket, QueueContext, QueueOptions, QueueContextOptions } from '../../packages/0/src/composables/createQueue/index'
-  import('../../packages/0/src/composables/createQueue/index')
-  // @ts-ignore
-  export type { RatingItemState, RatingItemDescriptor, RatingContext, RatingOptions, RatingContextOptions } from '../../packages/0/src/composables/createRating/index'
-  import('../../packages/0/src/composables/createRating/index')
-  // @ts-ignore
-  export type { RegistryTicketInput, RegistryTicket, RegistryEventName, RegistryEventMap, RegistryEventCallback, RegistryContext, RegistryOptions, RegistryContextOptions } from '../../packages/0/src/composables/createRegistry/index'
-  import('../../packages/0/src/composables/createRegistry/index')
-  // @ts-ignore
-  export type { SelectionTicketInput, SelectionTicket, SelectionContext, SelectionOptions, SelectionContextOptions } from '../../packages/0/src/composables/createSelection/index'
-  import('../../packages/0/src/composables/createSelection/index')
-  // @ts-ignore
-  export type { SingleTicketInput, SingleTicket, SingleContext, SingleOptions, SingleContextOptions } from '../../packages/0/src/composables/createSingle/index'
-  import('../../packages/0/src/composables/createSingle/index')
-  // @ts-ignore
-  export type { SliderTicketInput, SliderOptions, SliderContext } from '../../packages/0/src/composables/createSlider/index'
-  import('../../packages/0/src/composables/createSlider/index')
-  // @ts-ignore
-  export type { StepTicketInput, StepTicket, StepContext, StepOptions, StepContextOptions } from '../../packages/0/src/composables/createStep/index'
-  import('../../packages/0/src/composables/createStep/index')
-  // @ts-ignore
-  export type { TimelineContext, TimelineTicket, TimelineOptions, TimelineContextOptions } from '../../packages/0/src/composables/createTimeline/index'
-  import('../../packages/0/src/composables/createTimeline/index')
-  // @ts-ignore
-  export type { TokenAlias, TokenPrimitive, TokenValue, TokenCollection, FlatTokenCollection, TokenTicket, TokenContext, TokenOptions, TokenContextOptions } from '../../packages/0/src/composables/createTokens/index'
-  import('../../packages/0/src/composables/createTokens/index')
-  // @ts-ignore
   export type { ContextTrinity } from '../../packages/0/src/composables/createTrinity/index'
   import('../../packages/0/src/composables/createTrinity/index')
   // @ts-ignore
-  export type { ValidationTicketInput, ValidationTicket, ValidationContext, ValidationOptions } from '../../packages/0/src/composables/createValidation/index'
-  import('../../packages/0/src/composables/createValidation/index')
-  // @ts-ignore
-  export type { VirtualDirection, VirtualState, VirtualAnchor, ScrollToOptions, VirtualOptions, VirtualItem, VirtualContext, VirtualContextOptions } from '../../packages/0/src/composables/createVirtual/index'
-  import('../../packages/0/src/composables/createVirtual/index')
-  // @ts-ignore
   export type { MaybeElementRef } from '../../packages/0/src/composables/toElement/index'
   import('../../packages/0/src/composables/toElement/index')
   // @ts-ignore
@@ -432,15 +357,24 @@ declare global {
   export type { FeatureTicketInput, FeatureTicket, FeatureContext, FeatureOptions, FeatureContextOptions, FeaturePluginOptions, FeaturesAdapterFlags, FeaturesAdapterInterface, FeaturesAdapterValue } from '../../packages/0/src/composables/useFeatures/index'
   import('../../packages/0/src/composables/useFeatures/index')
   // @ts-ignore
+  export type { Primitive, FilterQuery, FilterItem, FilterMode, FilterFunction, FilterOptions, FilterResult, FilterContext, FilterContextOptions } from '../../packages/0/src/composables/createFilter/index'
+  import('../../packages/0/src/composables/createFilter/index')
+  // @ts-ignore
+  export type { FormValidationResult, FormValue, FormTicketInput, FormTicket, FormContext, FormOptions, FormContextOptions } from '../../packages/0/src/composables/createForm/index'
+  import('../../packages/0/src/composables/createForm/index')
+  // @ts-ignore
+  export type { GroupTicketInput, GroupTicket, GroupContext, GroupOptions, GroupContextOptions } from '../../packages/0/src/composables/createGroup/index'
+  import('../../packages/0/src/composables/createGroup/index')
+  // @ts-ignore
+  export type { ModelTicketInput, ModelTicket, ModelContext, ModelOptions } from '../../packages/0/src/composables/createModel/index'
+  import('../../packages/0/src/composables/createModel/index')
+  // @ts-ignore
   export type { UseHotkeyOptions, UseHotkeyReturn, PlatformContext } from '../../packages/0/src/composables/useHotkey/index'
   import('../../packages/0/src/composables/useHotkey/index')
   // @ts-ignore
   export type { HydrationContext, HydrationOptions, HydrationContextOptions, HydrationPluginOptions } from '../../packages/0/src/composables/useHydration/index'
   import('../../packages/0/src/composables/useHydration/index')
   // @ts-ignore
-  export type { ImageStatus, UseImageOptions, UseImageReturn } from '../../packages/0/src/composables/useImage/index'
-  import('../../packages/0/src/composables/useImage/index')
-  // @ts-ignore
   export type { IntersectionObserverEntry, IntersectionObserverOptions, UseIntersectionObserverReturn, UseElementIntersectionReturn } from '../../packages/0/src/composables/useIntersectionObserver/index'
   import('../../packages/0/src/composables/useIntersectionObserver/index')
   // @ts-ignore
@@ -462,15 +396,18 @@ declare global {
   export type { NotificationSeverity, NotificationInput, NotificationTicket, NotificationsAdapterContext, NotificationsAdapterInterface, NotificationsOptions, NotificationsContext, NotificationsPluginOptions } from '../../packages/0/src/composables/useNotifications/index'
   import('../../packages/0/src/composables/useNotifications/index')
   // @ts-ignore
+  export type { OverflowOptions, OverflowContext, OverflowContextOptions } from '../../packages/0/src/composables/createOverflow/index'
+  import('../../packages/0/src/composables/createOverflow/index')
+  // @ts-ignore
+  export type { PaginationTicket, PaginationContext, PaginationOptions, PaginationContextOptions } from '../../packages/0/src/composables/createPagination/index'
+  import('../../packages/0/src/composables/createPagination/index')
+  // @ts-ignore
   export type { PermissionTicket, PermissionContext, PermissionOptions, PermissionContextOptions, PermissionPluginOptions, PermissionAdapterInterface } from '../../packages/0/src/composables/usePermissions/index'
   import('../../packages/0/src/composables/usePermissions/index')
   // @ts-ignore
   export type { PopoverOptions, PopoverReturn } from '../../packages/0/src/composables/usePopover/index'
   import('../../packages/0/src/composables/usePopover/index')
   // @ts-ignore
-  export type { PresenceState, UsePresenceOptions, UsePresenceReturn } from '../../packages/0/src/composables/usePresence/index'
-  import('../../packages/0/src/composables/usePresence/index')
-  // @ts-ignore
   export type { ProxyModelOptions, ProxyModelTarget } from '../../packages/0/src/composables/useProxyModel/index'
   import('../../packages/0/src/composables/useProxyModel/index')
   // @ts-ignore
@@ -480,6 +417,15 @@ declare global {
   export type { UseRafReturn } from '../../packages/0/src/composables/useRaf/index'
   import('../../packages/0/src/composables/useRaf/index')
   // @ts-ignore
+  export type { QueueTicketInput, QueueTicket, QueueContext, QueueOptions, QueueContextOptions } from '../../packages/0/src/composables/createQueue/index'
+  import('../../packages/0/src/composables/createQueue/index')
+  // @ts-ignore
+  export type { RegistryTicketInput, RegistryTicket, RegistryEventName, RegistryEventMap, RegistryEventCallback, RegistryContext, RegistryOptions, RegistryContextOptions } from '../../packages/0/src/composables/createRegistry/index'
+  import('../../packages/0/src/composables/createRegistry/index')
+  // @ts-ignore
+  export type { RuleAlias, RuleInput, RuleAliases, RulesContext, RulesOptions, RulesContextOptions, StandardSchemaV1 } from '../../packages/0/src/composables/useRules/index'
+  import('../../packages/0/src/composables/useRules/index')
+  // @ts-ignore
   export type { ResizeObserverEntry, ResizeObserverOptions, UseResizeObserverReturn, UseElementSizeReturn } from '../../packages/0/src/composables/useResizeObserver/index'
   import('../../packages/0/src/composables/useResizeObserver/index')
   // @ts-ignore
@@ -489,12 +435,21 @@ declare global {
   export type { RtlContext, RtlOptions, RtlContextOptions, RtlPluginOptions, RtlAdapter, RtlAdapterSetupContext } from '../../packages/0/src/composables/useRtl/index'
   import('../../packages/0/src/composables/useRtl/index')
   // @ts-ignore
-  export type { RuleAlias, RuleInput, RuleAliases, RulesContext, RulesOptions, RulesContextOptions, FormValidationRule, StandardSchemaV1 } from '../../packages/0/src/composables/useRules/index'
-  import('../../packages/0/src/composables/useRules/index')
+  export type { SelectionTicketInput, SelectionTicket, SelectionContext, SelectionOptions, SelectionContextOptions } from '../../packages/0/src/composables/createSelection/index'
+  import('../../packages/0/src/composables/createSelection/index')
+  // @ts-ignore
+  export type { SliderTicketInput, SliderOptions, SliderContext } from '../../packages/0/src/composables/createSlider/index'
+  import('../../packages/0/src/composables/createSlider/index')
+  // @ts-ignore
+  export type { SingleTicketInput, SingleTicket, SingleContext, SingleOptions, SingleContextOptions } from '../../packages/0/src/composables/createSingle/index'
+  import('../../packages/0/src/composables/createSingle/index')
   // @ts-ignore
   export type { StackTicketInput, StackTicket, StackContext, StackOptions, StackContextOptions, StackPluginOptions } from '../../packages/0/src/composables/useStack/index'
   import('../../packages/0/src/composables/useStack/index')
   // @ts-ignore
+  export type { StepTicketInput, StepTicket, StepContext, StepOptions, StepContextOptions } from '../../packages/0/src/composables/createStep/index'
+  import('../../packages/0/src/composables/createStep/index')
+  // @ts-ignore
   export type { StorageContext, StorageOptions, StorageContextOptions, StoragePluginOptions, StorageAdapter, StorageType } from '../../packages/0/src/composables/useStorage/index'
   import('../../packages/0/src/composables/useStorage/index')
   // @ts-ignore
@@ -504,9 +459,21 @@ declare global {
   export type { TimerOptions, TimerContext } from '../../packages/0/src/composables/useTimer/index'
   import('../../packages/0/src/composables/useTimer/index')
   // @ts-ignore
+  export type { TimelineContext, TimelineTicket, TimelineOptions, TimelineContextOptions } from '../../packages/0/src/composables/createTimeline/index'
+  import('../../packages/0/src/composables/createTimeline/index')
+  // @ts-ignore
+  export type { ValidationTicketInput, ValidationTicket, ValidationContext, ValidationOptions, FormValidationRule } from '../../packages/0/src/composables/createValidation/index'
+  import('../../packages/0/src/composables/createValidation/index')
+  // @ts-ignore
   export type { ToggleScopeControls } from '../../packages/0/src/composables/useToggleScope/index'
   import('../../packages/0/src/composables/useToggleScope/index')
   // @ts-ignore
+  export type { TokenAlias, TokenPrimitive, TokenValue, TokenCollection, FlatTokenCollection, TokenTicket, TokenContext, TokenOptions, TokenContextOptions } from '../../packages/0/src/composables/createTokens/index'
+  import('../../packages/0/src/composables/createTokens/index')
+  // @ts-ignore
+  export type { VirtualDirection, VirtualState, VirtualAnchor, ScrollToOptions, VirtualOptions, VirtualItem, VirtualContext, VirtualContextOptions } from '../../packages/0/src/composables/createVirtual/index'
+  import('../../packages/0/src/composables/createVirtual/index')
+  // @ts-ignore
   export type { VirtualFocusItem, VirtualFocusOptions, VirtualFocusReturn } from '../../packages/0/src/composables/useVirtualFocus/index'
   import('../../packages/0/src/composables/useVirtualFocus/index')
   // @ts-ignore
@@ -524,8 +491,7 @@ declare module 'vue' {
   interface ComponentCustomProperties {
     readonly COMMON_ELEMENTS: UnwrapRef<typeof import('../../packages/0/src/constants/htmlElements')['COMMON_ELEMENTS']>
     readonly ClientAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/createDataTable/index')['ClientAdapter']>
-    readonly ComboboxClientAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/createCombobox/index')['ComboboxClientAdapter']>
-    readonly ComboboxServerAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/createCombobox/index')['ComboboxServerAdapter']>
+    readonly ClientGridAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/createDataGrid/index')['ClientGridAdapter']>
     readonly ConsolaLoggerAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/useLogger/index')['ConsolaLoggerAdapter']>
     readonly DEFAULT_DARK: UnwrapRef<typeof import('../../packages/paper/src/composables/useTheme/index')['DEFAULT_DARK']>
     readonly DEFAULT_LIGHT: UnwrapRef<typeof import('../../packages/paper/src/composables/useTheme/index')['DEFAULT_LIGHT']>
@@ -543,10 +509,12 @@ declare module 'vue' {
     readonly SUPPORTS_OBSERVER: UnwrapRef<typeof import('../../packages/0/src/constants/globals')['SUPPORTS_OBSERVER']>
     readonly SUPPORTS_TOUCH: UnwrapRef<typeof import('../../packages/0/src/constants/globals')['SUPPORTS_TOUCH']>
     readonly ServerAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/createDataTable/index')['ServerAdapter']>
+    readonly ServerGridAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/createDataGrid/index')['ServerGridAdapter']>
     readonly V0StyleSheetThemeAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/useTheme/index')['V0StyleSheetThemeAdapter']>
     readonly V0UnheadThemeAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/useTheme/index')['V0UnheadThemeAdapter']>
     readonly V0_ELEVATION_KEY: UnwrapRef<typeof import('../../packages/paper/src/composables/useElevation/index')['V0_ELEVATION_KEY']>
     readonly VirtualAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/createDataTable/index')['VirtualAdapter']>
+    readonly VirtualGridAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/createDataGrid/index')['VirtualGridAdapter']>
     readonly Vuetify0LocaleAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/useLocale/index')['Vuetify0LocaleAdapter']>
     readonly Vuetify0LoggerAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/useLogger/index')['Vuetify0LoggerAdapter']>
     readonly Vuetify0RtlAdapter: UnwrapRef<typeof import('../../packages/0/src/composables/useRtl/index')['Vuetify0RtlAdapter']>
@@ -561,9 +529,9 @@ declare module 'vue' {
     readonly createBreakpoints: UnwrapRef<typeof import('../../packages/0/src/composables/useBreakpoints/index')['createBreakpoints']>
     readonly createBreakpointsContext: UnwrapRef<typeof import('../../packages/0/src/composables/useBreakpoints/index')['createBreakpointsContext']>
     readonly createBreakpointsPlugin: UnwrapRef<typeof import('../../packages/0/src/composables/useBreakpoints/index')['createBreakpointsPlugin']>
-    readonly createCombobox: UnwrapRef<typeof import('../../packages/0/src/composables/createCombobox/index')['createCombobox']>
-    readonly createComboboxContext: UnwrapRef<typeof import('../../packages/0/src/composables/createCombobox/index')['createComboboxContext']>
     readonly createContext: UnwrapRef<typeof import('../../packages/0/src/composables/createContext/index')['createContext']>
+    readonly createDataGrid: UnwrapRef<typeof import('../../packages/0/src/composables/createDataGrid/index')['createDataGrid']>
+    readonly createDataGridContext: UnwrapRef<typeof import('../../packages/0/src/composables/createDataGrid/index')['createDataGridContext']>
     readonly createDataTable: UnwrapRef<typeof import('../../packages/0/src/composables/createDataTable/index')['createDataTable']>
     readonly createDataTableContext: UnwrapRef<typeof import('../../packages/0/src/composables/createDataTable/index')['createDataTableContext']>
     readonly createDate: UnwrapRef<typeof import('../../packages/0/src/composables/useDate/index')['createDate']>
@@ -583,7 +551,6 @@ declare module 'vue' {
     readonly createHydration: UnwrapRef<typeof import('../../packages/0/src/composables/useHydration/index')['createHydration']>
     readonly createHydrationContext: UnwrapRef<typeof import('../../packages/0/src/composables/useHydration/index')['createHydrationContext']>
     readonly createHydrationPlugin: UnwrapRef<typeof import('../../packages/0/src/composables/useHydration/index')['createHydrationPlugin']>
-    readonly createInput: UnwrapRef<typeof import('../../packages/0/src/composables/createInput/index')['createInput']>
     readonly createLocale: UnwrapRef<typeof import('../../packages/0/src/composables/useLocale/index')['createLocale']>
     readonly createLocaleContext: UnwrapRef<typeof import('../../packages/0/src/composables/useLocale/index')['createLocaleContext']>
     readonly createLocaleFallback: UnwrapRef<typeof import('../../packages/0/src/composables/useLocale/index')['createLocaleFallback']>
@@ -597,8 +564,6 @@ declare module 'vue' {
     readonly createNotifications: UnwrapRef<typeof import('../../packages/0/src/composables/useNotifications/index')['createNotifications']>
     readonly createNotificationsContext: UnwrapRef<typeof import('../../packages/0/src/composables/useNotifications/index')['createNotificationsContext']>
     readonly createNotificationsPlugin: UnwrapRef<typeof import('../../packages/0/src/composables/useNotifications/index')['createNotificationsPlugin']>
-    readonly createNumberField: UnwrapRef<typeof import('../../packages/0/src/composables/createNumberField/index')['createNumberField']>
-    readonly createNumeric: UnwrapRef<typeof import('../../packages/0/src/composables/createNumeric/index')['createNumeric']>
     readonly createOverflow: UnwrapRef<typeof import('../../packages/0/src/composables/createOverflow/index')['createOverflow']>
     readonly createOverflowContext: UnwrapRef<typeof import('../../packages/0/src/composables/createOverflow/index')['createOverflowContext']>
     readonly createPagination: UnwrapRef<typeof import('../../packages/0/src/composables/createPagination/index')['createPagination']>
@@ -608,12 +573,8 @@ declare module 'vue' {
     readonly createPermissionsPlugin: UnwrapRef<typeof import('../../packages/0/src/composables/usePermissions/index')['createPermissionsPlugin']>
     readonly createPlugin: UnwrapRef<typeof import('../../packages/0/src/composables/createPlugin/index')['createPlugin']>
     readonly createPluginContext: UnwrapRef<typeof import('../../packages/0/src/composables/createPlugin/index')['createPluginContext']>
-    readonly createProgress: UnwrapRef<typeof import('../../packages/0/src/composables/createProgress/index')['createProgress']>
-    readonly createProgressContext: UnwrapRef<typeof import('../../packages/0/src/composables/createProgress/index')['createProgressContext']>
     readonly createQueue: UnwrapRef<typeof import('../../packages/0/src/composables/createQueue/index')['createQueue']>
     readonly createQueueContext: UnwrapRef<typeof import('../../packages/0/src/composables/createQueue/index')['createQueueContext']>
-    readonly createRating: UnwrapRef<typeof import('../../packages/0/src/composables/createRating/index')['createRating']>
-    readonly createRatingContext: UnwrapRef<typeof import('../../packages/0/src/composables/createRating/index')['createRatingContext']>
     readonly createRegistry: UnwrapRef<typeof import('../../packages/0/src/composables/createRegistry/index')['createRegistry']>
     readonly createRegistryContext: UnwrapRef<typeof import('../../packages/0/src/composables/createRegistry/index')['createRegistryContext']>
     readonly createRtl: UnwrapRef<typeof import('../../packages/0/src/composables/useRtl/index')['createRtl']>
@@ -689,6 +650,7 @@ declare module 'vue' {
     readonly isUndefined: UnwrapRef<typeof import('../../packages/0/src/utilities/helpers')['isUndefined']>
     readonly markRaw: UnwrapRef<typeof import('vue')['markRaw']>
     readonly mergeDeep: UnwrapRef<typeof import('../../packages/0/src/utilities/helpers')['mergeDeep']>
+    readonly multipleOpenStrategy: UnwrapRef<typeof import('../../packages/0/src/composables/createNested/index')['multipleOpenStrategy']>
     readonly nextTick: UnwrapRef<typeof import('vue')['nextTick']>
     readonly onActivated: UnwrapRef<typeof import('vue')['onActivated']>
     readonly onBeforeMount: UnwrapRef<typeof import('vue')['onBeforeMount']>
@@ -713,14 +675,13 @@ declare module 'vue' {
     readonly ref: UnwrapRef<typeof import('vue')['ref']>
     readonly resolveComponent: UnwrapRef<typeof import('vue')['resolveComponent']>
     readonly resolveHeaders: UnwrapRef<typeof import('../../packages/0/src/composables/createDataTable/index')['resolveHeaders']>
-    readonly resolveIds: UnwrapRef<typeof import('../../packages/0/src/utilities/helpers')['resolveIds']>
-    readonly resolveIndexes: UnwrapRef<typeof import('../../packages/0/src/utilities/helpers')['resolveIndexes']>
     readonly rgbToHex: UnwrapRef<typeof import('../../packages/0/src/utilities/color')['rgbToHex']>
     readonly rgbToRgba: UnwrapRef<typeof import('../../packages/paper/src/composables/useColor/index')['rgbToRgba']>
     readonly rgbaToHexa: UnwrapRef<typeof import('../../packages/paper/src/composables/useColor/index')['rgbaToHexa']>
     readonly shallowReactive: UnwrapRef<typeof import('vue')['shallowReactive']>
     readonly shallowReadonly: UnwrapRef<typeof import('vue')['shallowReadonly']>
     readonly shallowRef: UnwrapRef<typeof import('vue')['shallowRef']>
+    readonly singleOpenStrategy: UnwrapRef<typeof import('../../packages/0/src/composables/createNested/index')['singleOpenStrategy']>
     readonly toArray: UnwrapRef<typeof import('../../packages/0/src/composables/toArray/index')['toArray']>
     readonly toCamelCase: UnwrapRef<typeof import('../../packages/paper/src/utilities/helpers')['toCamelCase']>
     readonly toElement: UnwrapRef<typeof import('../../packages/0/src/composables/toElement/index')['toElement']>
@@ -738,11 +699,11 @@ declare module 'vue' {
     readonly useBreakpoints: UnwrapRef<typeof import('../../packages/0/src/composables/useBreakpoints/index')['useBreakpoints']>
     readonly useClickOutside: UnwrapRef<typeof import('../../packages/0/src/composables/useClickOutside/index')['useClickOutside']>
     readonly useColor: UnwrapRef<typeof import('../../packages/paper/src/composables/useColor/index')['useColor']>
-    readonly useCombobox: UnwrapRef<typeof import('../../packages/0/src/composables/createCombobox/index')['useCombobox']>
     readonly useContext: UnwrapRef<typeof import('../../packages/0/src/composables/createContext/index')['useContext']>
     readonly useContrast: UnwrapRef<typeof import('../../packages/paper/src/composables/useContrast/index')['useContrast']>
     readonly useCssModule: UnwrapRef<typeof import('vue')['useCssModule']>
     readonly useCssVars: UnwrapRef<typeof import('vue')['useCssVars']>
+    readonly useDataGrid: UnwrapRef<typeof import('../../packages/0/src/composables/createDataGrid/index')['useDataGrid']>
     readonly useDataTable: UnwrapRef<typeof import('../../packages/0/src/composables/createDataTable/index')['useDataTable']>
     readonly useDate: UnwrapRef<typeof import('../../packages/0/src/composables/useDate/index')['useDate']>
     readonly useDimensions: UnwrapRef<typeof import('../../packages/paper/src/composables/useDimensions/index')['useDimensions']>
@@ -758,7 +719,6 @@ declare module 'vue' {
     readonly useHotkey: UnwrapRef<typeof import('../../packages/0/src/composables/useHotkey/index')['useHotkey']>
     readonly useHydration: UnwrapRef<typeof import('../../packages/0/src/composables/useHydration/index')['useHydration']>
     readonly useId: UnwrapRef<typeof import('../../packages/0/src/utilities/helpers')['useId']>
-    readonly useImage: UnwrapRef<typeof import('../../packages/0/src/composables/useImage/index')['useImage']>
     readonly useIntersectionObserver: UnwrapRef<typeof import('../../packages/0/src/composables/useIntersectionObserver/index')['useIntersectionObserver']>
     readonly useLazy: UnwrapRef<typeof import('../../packages/0/src/composables/useLazy/index')['useLazy']>
     readonly useLocale: UnwrapRef<typeof import('../../packages/0/src/composables/useLocale/index')['useLocale']>
@@ -775,13 +735,10 @@ declare module 'vue' {
     readonly usePrefersContrast: UnwrapRef<typeof import('../../packages/0/src/composables/useMediaQuery/index')['usePrefersContrast']>
     readonly usePrefersDark: UnwrapRef<typeof import('../../packages/0/src/composables/useMediaQuery/index')['usePrefersDark']>
     readonly usePrefersReducedMotion: UnwrapRef<typeof import('../../packages/0/src/composables/useMediaQuery/index')['usePrefersReducedMotion']>
-    readonly usePresence: UnwrapRef<typeof import('../../packages/0/src/composables/usePresence/index')['usePresence']>
-    readonly useProgress: UnwrapRef<typeof import('../../packages/0/src/composables/createProgress/index')['useProgress']>
     readonly useProxyModel: UnwrapRef<typeof import('../../packages/0/src/composables/useProxyModel/index')['useProxyModel']>
     readonly useProxyRegistry: UnwrapRef<typeof import('../../packages/0/src/composables/useProxyRegistry/index')['useProxyRegistry']>
     readonly useQueue: UnwrapRef<typeof import('../../packages/0/src/composables/createQueue/index')['useQueue']>
     readonly useRaf: UnwrapRef<typeof import('../../packages/0/src/composables/useRaf/index')['useRaf']>
-    readonly useRating: UnwrapRef<typeof import('../../packages/0/src/composables/createRating/index')['useRating']>
     readonly useRegistry: UnwrapRef<typeof import('../../packages/0/src/composables/createRegistry/index')['useRegistry']>
     readonly useResizeObserver: UnwrapRef<typeof import('../../packages/0/src/composables/useResizeObserver/index')['useResizeObserver']>
     readonly useRounded: UnwrapRef<typeof import('../../packages/paper/src/composables/useRounded/index')['useRounded']>
diff --git a/packages/0/PHILOSOPHY.md b/packages/0/PHILOSOPHY.md
index aaea7963a..b5fe9af34 100644
--- a/packages/0/PHILOSOPHY.md
+++ b/packages/0/PHILOSOPHY.md
@@ -717,6 +717,43 @@ onBeforeUnmount(() => {
 
 Used in `Progress*`, `Splitter*`, and any compound whose sub-components need to coexist with consumer-supplied attributes. The outer `Atom` is where these are ultimately bound — sub-components do not forward `attrs` onto their own children, which is why the "never spread `attrs` on a non-renderless child" rule (§3.5) holds.
 
+### 6.10 Collection composables: no `items` option
+
+**Rule.** A composable that owns a collection of values exposes `register` / `onboard` / `unregister`. It does not accept an `items` option in its factory. Row identity, order, and per-row state live in the registry — never on a parallel array threaded in through options. [intent:351]
+
+**Why.** A single source of truth: the registry owns the rows. An `items` option splits ownership between the consumer's array and the composable's internal state, which forces every pipeline stage to re-derive identity. Registry-based composables also dodge `MaybeRefOrGetter<T[]>` plumbing — tickets are reactive by construction, so the composable does not have to `toValue()` an external ref on every recompute. Composition stays uniform: components and composables built on top get the same `register` / `onboard` surface they already use for `createSortable` and the selection chain. Tickets emitted by `unregister` / `offboard` can be moved between registries without re-deriving identity. [intent:352]
+
+**Before (wrong).**
+
+```ts
+const table = createDataTable({
+  items: users,
+  columns: [...],
+  itemValue: 'id',
+})
+```
+
+**After (right).**
+
+```ts
+const table = createDataTable({ columns: [...] })
+
+// Bulk register at setup
+table.onboard(users.map(value => ({ id: value.id, value })))
+
+// Or one at a time
+const ticket = table.register({ id: user.id, value: user })
+
+// Remove rows
+ticket.unregister()
+table.unregister(user.id)
+table.clear()
+```
+
+Callers who want domain-stable identity pass `id` explicitly — same pattern as `createSortable`. Omit `id` and the registry auto-generates one via `useId()`. Consumers with a reactive items source watch it themselves and call `clear()` + `onboard()` (or maintain `register` / `unregister` incrementally); the composable does not auto-sync from an external ref.
+
+**Composables that follow this rule.** `createRegistry`, `createModel`, `createSelection`, `createSingle`, `createGroup`, `createStep`, `createNested`, `createSortable`, `createKanban`, `createQueue`, `createTimeline`, `createTokens`. `createDataTable` and `createDataGrid` predate the convention and have been brought in line — `items` and `itemValue` are gone; consumers `onboard` rows on the returned context. [intent:353]
+
 ---
 
 ## 7. Events & lifecycle
@@ -1328,7 +1365,7 @@ Reason: §2.8, [intent:151]. Auto-increment breaks SSR hydration.
 | 3 API shape | returns, args, names, slots, comments | 22 |
 | 4 Reactivity | primitives, readonly, options, scope | 22 |
 | 5 Headless | operational definition | 10 |
-| 6 Registries | context, tickets, useProxyModel, useProxyRegistry, mergeProps | 14 |
+| 6 Registries | context, tickets, useProxyModel, useProxyRegistry, mergeProps, collection composables | 17 |
 | 7 Events & lifecycle | binding, mounting, cleanup, toggle scope | 7 |
 | 8 Types | any, readonly-ref, MRG, generics, slot guards | 8 |
 | 9 Errors | throw/warn/return, logger, SSR | 9 |
diff --git a/packages/0/src/composables/createDataGrid/adapters/adapter.ts b/packages/0/src/composables/createDataGrid/adapters/adapter.ts
new file mode 100644
index 000000000..b0b03beba
--- /dev/null
+++ b/packages/0/src/composables/createDataGrid/adapters/adapter.ts
@@ -0,0 +1,15 @@
+/**
+ * @module createDataGrid/adapters
+ *
+ * @remarks
+ * Grid adapter types. Each grid adapter extends the corresponding
+ * DataTable adapter to insert row ordering between sort and pagination.
+ */
+
+export type {
+  DataTableAdapter,
+  DataTableAdapterContext,
+  DataTableAdapterResult,
+  SortDirection,
+  SortEntry,
+} from '#v0/composables/createDataTable'
diff --git a/packages/0/src/composables/createDataGrid/adapters/client.ts b/packages/0/src/composables/createDataGrid/adapters/client.ts
new file mode 100644
index 000000000..5eae9c8e5
--- /dev/null
+++ b/packages/0/src/composables/createDataGrid/adapters/client.ts
@@ -0,0 +1,66 @@
+/**
+ * @module createDataGrid/adapters/client
+ *
+ * @remarks
+ * Client-side grid adapter. Extends DataTableAdapter with row ordering
+ * inserted between sort and pagination stages.
+ */
+
+// Composables
+import { DataTableAdapter } from '#v0/composables/createDataTable'
+import { createPagination } from '#v0/composables/createPagination'
+
+import { applyOrder } from './order'
+
+// Utilities
+import { computed, toRef, watch } from 'vue'
+
+// Types
+import type { DataTableAdapterContext, DataTableAdapterResult } from '#v0/composables/createDataTable'
+import type { ID } from '#v0/types'
+import type { ShallowRef } from 'vue'
+
+export class ClientGridAdapter<T extends Record<string, unknown>> extends DataTableAdapter<T> {
+  private rowOrder: ShallowRef<ID[]>
+  private itemKey: string
+
+  constructor (rowOrder: ShallowRef<ID[]>, itemKey = 'id') {
+    super()
+    this.rowOrder = rowOrder
+    this.itemKey = itemKey
+  }
+
+  setup (context: DataTableAdapterContext<T>): DataTableAdapterResult<T> {
+    const { search, sortBy, locale, paginationOptions, customSorts } = context
+
+    const { allItems, filteredItems } = this.filter(context)
+    const sortedItems = this.sort(filteredItems, sortBy, locale, customSorts)
+
+    // Row ordering: applied post-sort, pre-pagination
+    const ordered = computed(() => {
+      return applyOrder(sortedItems.value, this.rowOrder.value, this.itemKey)
+    })
+
+    const pagination = createPagination({
+      ...paginationOptions,
+      size: toRef(() => ordered.value.length),
+    })
+
+    const items = computed(() => {
+      return ordered.value.slice(pagination.pageStart.value, pagination.pageStop.value)
+    })
+
+    watch([search, sortBy], () => {
+      pagination.first()
+    })
+
+    return {
+      allItems,
+      filteredItems,
+      sortedItems: ordered,
+      items,
+      pagination,
+      total: toRef(() => ordered.value.length),
+    }
+  }
+}
diff --git a/packages/0/src/composables/createDataGrid/adapters/index.ts b/packages/0/src/composables/createDataGrid/adapters/index.ts
new file mode 100644
index 000000000..f8ae55eea
--- /dev/null
+++ b/packages/0/src/composables/createDataGrid/adapters/index.ts
@@ -0,0 +1,14 @@
+/**
+ * @module createDataGrid/adapters
+ *
+ * @remarks
+ * Barrel for grid adapter exports. Each grid adapter extends the
+ * corresponding DataTable adapter to insert row ordering between
+ * sort and pagination.
+ */
+
+export type { DataTableAdapter, DataTableAdapterContext, DataTableAdapterResult, SortDirection, SortEntry } from './adapter'
+export { ClientGridAdapter } from './client'
+export { ServerGridAdapter } from './server'
+export type { ServerGridAdapterOptions } from './server'
+export { VirtualGridAdapter } from './virtual'
diff --git a/packages/0/src/composables/createDataGrid/adapters/order.ts b/packages/0/src/composables/createDataGrid/adapters/order.ts
new file mode 100644
index 000000000..f105452ef
--- /dev/null
+++ b/packages/0/src/composables/createDataGrid/adapters/order.ts
@@ -0,0 +1,47 @@
+/**
+ * @module createDataGrid/adapters/order
+ *
+ * @remarks
+ * Utility for applying an ID-based row ordering to a list of items.
+ * Used by both ClientGridAdapter and VirtualGridAdapter to insert
+ * row ordering between sort and pagination stages.
+ */
+
+// Types
+import type { ID } from '#v0/types'
+
+/**
+ * Reorder items by an ID-based order, appending unmatched items at the end.
+ *
+ * @param items Source items to reorder
+ * @param order ID sequence defining the desired order
+ * @param itemKey Property name used to extract item IDs
+ * @returns Reordered items array
+ */
+export function applyOrder<T extends Record<string, unknown>> (
+  items: readonly T[],
+  order: readonly ID[],
+  itemKey: string,
+): readonly T[] {
+  if (order.length === 0) return items
+
+  const map = new Map<ID, T>()
+  for (const item of items) {
+    map.set(item[itemKey] as ID, item)
+  }
+
+  const result: T[] = []
+  for (const id of order) {
+    const item = map.get(id)
+    if (item) result.push(item)
+  }
+
+  const ordered = new Set(order)
+  for (const item of items) {
+    if (!ordered.has(item[itemKey] as ID)) {
+      result.push(item)
+    }
+  }
+
+  return result
+}
diff --git a/packages/0/src/composables/createDataGrid/adapters/server.ts b/packages/0/src/composables/createDataGrid/adapters/server.ts
new file mode 100644
index 000000000..31d9bb769
--- /dev/null
+++ b/packages/0/src/composables/createDataGrid/adapters/server.ts
@@ -0,0 +1,11 @@
+/**
+ * @module createDataGrid/adapters/server
+ *
+ * @remarks
+ * Server-side grid adapter. Delegates pipeline to the server.
+ * Row ordering emits a callback for the consumer to sync with the server.
+ */
+
+// Types
+
+export { ServerDataTableAdapter as ServerGridAdapter, type ServerDataTableAdapterOptions as ServerGridAdapterOptions } from '#v0/composables/createDataTable'
diff --git a/packages/0/src/composables/createDataGrid/adapters/virtual.ts b/packages/0/src/composables/createDataGrid/adapters/virtual.ts
new file mode 100644
index 000000000..ec8bdb5f7
--- /dev/null
+++ b/packages/0/src/composables/createDataGrid/adapters/virtual.ts
@@ -0,0 +1,63 @@
+/**
+ * @module createDataGrid/adapters/virtual
+ *
+ * @remarks
+ * Virtual scrolling grid adapter. Client-side filter/sort with row
+ * ordering, feeding all sorted items to createVirtual.
+ */
+
+// Composables
+import { DataTableAdapter } from '#v0/composables/createDataTable'
+import { createPagination } from '#v0/composables/createPagination'
+
+import { applyOrder } from './order'
+
+// Utilities
+import { computed, toRef, watch } from 'vue'
+
+// Types
+import type { DataTableAdapterContext, DataTableAdapterResult } from '#v0/composables/createDataTable'
+import type { ID } from '#v0/types'
+import type { ShallowRef } from 'vue'
+
+export class VirtualGridAdapter<T extends Record<string, unknown>> extends DataTableAdapter<T> {
+  private rowOrder: ShallowRef<ID[]>
+  private itemKey: string
+
+  constructor (rowOrder: ShallowRef<ID[]>, itemKey = 'id') {
+    super()
+    this.rowOrder = rowOrder
+    this.itemKey = itemKey
+  }
+
+  setup (context: DataTableAdapterContext<T>): DataTableAdapterResult<T> {
+    const { search, sortBy, locale, customSorts } = context
+
+    const { allItems, filteredItems } = this.filter(context)
+    const sortedItems = this.sort(filteredItems, sortBy, locale, customSorts)
+
+    const ordered = computed(() => {
+      return applyOrder(sortedItems.value, this.rowOrder.value, this.itemKey)
+    })
+
+    const size = toRef(() => ordered.value.length)
+
+    const pagination = createPagination({
+      size,
+      itemsPerPage: size,
+    })
+
+    watch([search, sortBy], () => {
+      pagination.first()
+    })
+
+    return {
+      allItems,
+      filteredItems,
+      sortedItems: ordered,
+      items: ordered,
+      pagination,
+      total: toRef(() => ordered.value.length),
+    }
+  }
+}
diff --git a/packages/0/src/composables/createDataGrid/editing.test.ts b/packages/0/src/composables/createDataGrid/editing.test.ts
new file mode 100644
index 000000000..73c26b5cf
--- /dev/null
+++ b/packages/0/src/composables/createDataGrid/editing.test.ts
@@ -0,0 +1,83 @@
+import { describe, expect, it, vi } from 'vitest'
+
+import { createCellEditing } from './editing'
+
+describe('createCellEditing', () => {
+  const columns = [
+    { key: 'name', editable: true },
+    { key: 'email', editable: true, validate: (v: unknown) => (typeof v === 'string' && v.includes('@')) || 'Invalid email' },
+    { key: 'id', editable: false },
+  ]
+
+  it('starts with no active cell', () => {
+    const editing = createCellEditing({ columns })
+    expect(editing.active.value).toBeNull()
+  })
+
+  it('edit sets active cell', () => {
+    const editing = createCellEditing({ columns })
+    editing.edit(1, 'name')
+    expect(editing.active.value).toEqual({ row: 1, column: 'name' })
+  })
+
+  it('edit rejects non-editable columns', () => {
+    const editing = createCellEditing({ columns })
+    editing.edit(1, 'id')
+    expect(editing.active.value).toBeNull()
+  })
+
+  it('cancel clears active cell', () => {
+    const editing = createCellEditing({ columns })
+    editing.edit(1, 'name')
+    editing.cancel()
+    expect(editing.active.value).toBeNull()
+  })
+
+  it('commit calls onEdit and clears active', () => {
+    const onEdit = vi.fn()
+    const editing = createCellEditing({ columns, onEdit })
+    editing.edit(1, 'name')
+    editing.commit('Alice')
+    expect(onEdit).toHaveBeenCalledWith(1, 'name', 'Alice')
+    expect(editing.active.value).toBeNull()
+  })
+
+  it('commit rejects invalid value and sets error', () => {
+    const onEdit = vi.fn()
+    const editing = createCellEditing({ columns, onEdit })
+    editing.edit(1, 'email')
+    editing.commit('not-an-email')
+    expect(onEdit).not.toHaveBeenCalled()
+    expect(editing.error.value).toBe('Invalid email')
+    expect(editing.active.value).toEqual({ row: 1, column: 'email' })
+  })
+
+  it('commit accepts valid value after previous error', () => {
+    const onEdit = vi.fn()
+    const editing = createCellEditing({ columns, onEdit })
+    editing.edit(1, 'email')
+    editing.commit('not-an-email')
+    expect(editing.error.value).toBe('Invalid email')
+
+    editing.commit('valid@email.com')
+    expect(onEdit).toHaveBeenCalledWith(1, 'email', 'valid@email.com')
+    expect(editing.error.value).toBeNull()
+    expect(editing.active.value).toBeNull()
+  })
+
+  it('tracks dirty cells', () => {
+    const editing = createCellEditing({ columns })
+    editing.edit(1, 'name')
+    editing.dirty.value.get(1)?.set('name', 'pending')
+    expect(editing.dirty.value.get(1)?.get('name')).toBe('pending')
+  })
+
+  it('cancel clears error', () => {
+    const editing = createCellEditing({ columns })
+    editing.edit(1, 'email')
+    editing.commit('bad')
+    expect(editing.error.value).toBe('Invalid email')
+    editing.cancel()
+    expect(editing.error.value).toBeNull()
+  })
+})
diff --git a/packages/0/src/composables/createDataGrid/editing.ts b/packages/0/src/composables/createDataGrid/editing.ts
new file mode 100644
index 000000000..f26704843
--- /dev/null
+++ b/packages/0/src/composables/createDataGrid/editing.ts
@@ -0,0 +1,119 @@
+/**
+ * @module createDataGrid/editing
+ *
+ * @remarks
+ * Cell editing state management. Tracks active cell, validation errors,
+ * and dirty (uncommitted) edits. Does not mutate source data — commit
+ * fires a callback for the consumer to handle.
+ */
+
+// Utilities
+import { isFunction } from '#v0/utilities'
+import { ref, shallowRef } from 'vue'
+
+// Types
+import type { ID } from '#v0/types'
+import type { Ref, ShallowRef } from 'vue'
+
+export interface EditableColumn {
+  readonly key: string
+  readonly editable?: boolean | ((item: unknown) => boolean)
+  readonly validate?: (value: unknown, item?: unknown) => string | true
+}
+
+export interface CellEditingOptions {
+  columns: readonly EditableColumn[]
+  onEdit?: (row: ID, column: string, value: unknown) => void
+  lookup?: (row: ID) => unknown
+}
+
+export interface ActiveCell {
+  row: ID
+  column: string
+}
+
+export interface CellEditing {
+  active: Readonly<ShallowRef<ActiveCell | null>>
+  edit: (row: ID, column: string) => void
+  commit: (value: unknown) => void
+  cancel: () => void
+  error: Readonly<ShallowRef<string | null>>
+  dirty: Readonly<Ref<Map<ID, Map<string, unknown>>>>
+}
+
+/**
+ * Creates cell editing state for a data grid.
+ *
+ * @param options Cell editing configuration including columns and commit callback
+ * @returns Cell editing state and controls
+ */
+export function createCellEditing (options: CellEditingOptions): CellEditing {
+  const { columns, onEdit, lookup } = options
+
+  const columnMap = new Map<string, EditableColumn>()
+  for (const col of columns) {
+    columnMap.set(col.key, col)
+  }
+
+  const active = shallowRef<ActiveCell | null>(null)
+  const error = shallowRef<string | null>(null)
+  const dirty = ref(new Map<ID, Map<string, unknown>>())
+
+  function edit (row: ID, column: string) {
+    const col = columnMap.get(column)
+    if (!col) return
+
+    if (isFunction(col.editable)) {
+      const item = lookup?.(row)
+      if (!col.editable(item)) return
+    } else if (col.editable !== true) {
+      return
+    }
+    error.value = null
+    active.value = { row, column }
+    if (!dirty.value.has(row)) {
+      dirty.value.set(row, new Map())
+    }
+  }
+
+  function commit (value: unknown) {
+    const cell = active.value
+    if (!cell) return
+
+    const col = columnMap.get(cell.column)
+    if (col?.validate) {
+      const item = lookup?.(cell.row)
+      const result = col.validate(value, item)
+      if (result !== true) {
+        error.value = result
+        return
+      }
+    }
+
+    onEdit?.(cell.row, cell.column, value)
+
+    // Clear dirty entry for this cell
+    const entry = dirty.value.get(cell.row)
+    if (entry) {
+      entry.delete(cell.column)
+      if (entry.size === 0) dirty.value.delete(cell.row)
+    }
+
+    error.value = null
+    active.value = null
+  }
+
+  function cancel () {
+    error.value = null
+    active.value = null
+  }
+
+  return {
+    active,
+    edit,
+    commit,
+    cancel,
+    error,
+    dirty,
+  }
+}
diff --git a/packages/0/src/composables/createDataGrid/index.bench.ts b/packages/0/src/composables/createDataGrid/index.bench.ts
new file mode 100644
index 000000000..4c008f117
--- /dev/null
+++ b/packages/0/src/composables/createDataGrid/index.bench.ts
@@ -0,0 +1,395 @@
+/**
+ * createDataGrid Performance Benchmarks
+ *
+ * Structure:
+ * - READ-ONLY operations use shared fixtures (safe - lookups, computed access)
+ * - MUTATION operations create fresh fixtures per iteration
+ * - Tests both 1,000 and 10,000 item datasets
+ * - Categories: initialization, search pipeline, sort pipeline, column layout,
+ *   cell editing, row ordering, row spanning, computed access, full pipeline
+ *
+ * Comparable operations with createDataTable benchmarks:
+ * - initialization: Create grid vs Create table
+ * - search pipeline: Same operations, measures grid overhead
+ * - sort pipeline: Same operations, measures grid overhead
+ * - full pipeline: Search + sort + paginate at both sizes
+ * - computed access: Cached reads at both sizes
+ */
+
+import { bench, describe } from 'vitest'
+
+import { createDataGrid } from './index'
+
+// Types
+import type { DataGridColumn, DataGridOptions } from './index'
+
+// =============================================================================
+// FIXTURES - Created once, reused across read-only benchmarks
+// =============================================================================
+
+interface BenchmarkRow extends Record<string, unknown> {
+  id: number
+  name: string
+  email: string
+  department: string
+  salary: number
+  active: boolean
+}
+
+const DEPARTMENTS = ['Engineering', 'Design', 'Marketing', 'Sales', 'Support', 'Finance', 'Legal', 'HR']
+
+function generateRows (count: number): BenchmarkRow[] {
+  return Array.from({ length: count }, (_, i) => ({
+    id: i,
+    name: `User ${i} ${String(i * 7919).slice(0, 6)}`,
+    email: `user${i}@example.com`,
+    department: DEPARTMENTS[i % DEPARTMENTS.length]!,
+    salary: 50_000 + (i * 137) % 100_000,
+    active: i % 5 !== 0,
+  }))
+}
+
+const ROWS_1K: BenchmarkRow[] = generateRows(1000)
+const ROWS_10K: BenchmarkRow[] = generateRows(10_000)
+
+const COLUMNS: DataGridColumn<BenchmarkRow>[] = [
+  { key: 'name', title: 'Name', sortable: true, filterable: true, size: 25 },
+  { key: 'email', title: 'Email', sortable: true, filterable: true, size: 30 },
+  { key: 'department', title: 'Department', sortable: true, size: 15 },
+  { key: 'salary', title: 'Salary', sortable: true, size: 15, sort: (a, b) => Number(a) - Number(b) },
+  { key: 'active', title: 'Active', size: 15 },
+]
+
+const COLUMNS_PINNED: DataGridColumn<BenchmarkRow>[] = [
+  { key: 'name', title: 'Name', sortable: true, size: 20, pinned: 'left' },
+  { key: 'email', title: 'Email', sortable: true, size: 25 },
+  { key: 'department', title: 'Department', sortable: true, size: 15 },
+  { key: 'salary', title: 'Salary', sortable: true, size: 15 },
+  { key: 'active', title: 'Active', size: 15, pinned: 'right' },
+]
+
+const COLUMNS_EDITABLE: DataGridColumn<BenchmarkRow>[] = [
+  { key: 'name', title: 'Name', size: 25, editable: true, validate: v => (typeof v === 'string' && v.length > 0) || 'Required' },
+  { key: 'email', title: 'Email', size: 25, editable: true, validate: v => (typeof v === 'string' && v.includes('@')) || 'Invalid' },
+  { key: 'department', title: 'Department', size: 20 },
+  { key: 'salary', title: 'Salary', size: 15 },
+  { key: 'active', title: 'Active', size: 15 },
+]
+
+const SEARCH_QUERY_1K = 'User 500'
+const SEARCH_QUERY_10K = 'User 5000'
+
+function createGrid (
+  overrides: Partial<DataGridOptions<BenchmarkRow>> & { items?: BenchmarkRow[] } = {},
+) {
+  const { items: _items, ...rest } = overrides
+  const items = _items ?? ROWS_1K
+  const grid = createDataGrid<BenchmarkRow>({
+    columns: COLUMNS,
+    ...rest,
+  })
+  grid.onboard(items.map(value => ({ id: value.id, value })))
+  return grid
+}
+
+// =============================================================================
+// BENCHMARKS
+// =============================================================================
+
+describe('createDataGrid benchmarks', () => {
+  // ===========================================================================
+  // INITIALIZATION - Measures grid creation cost including layout, editing, etc.
+  // Fresh fixture per iteration (required - we're measuring creation itself)
+  // Comparable: createDataTable initialization
+  // ===========================================================================
+  describe('initialization', () => {
+    bench('Create grid (1,000 items)', () => {
+      createGrid({ items: ROWS_1K })
+    })
+
+    bench('Create grid (10,000 items)', () => {
+      createGrid({ items: ROWS_10K })
+    })
+
+    bench('Create grid with pinned columns (1,000 items)', () => {
+      createGrid({ items: ROWS_1K, columns: COLUMNS_PINNED })
+    })
+
+    bench('Create grid with editable columns (1,000 items)', () => {
+      createGrid({ items: ROWS_1K, columns: COLUMNS_EDITABLE })
+    })
+
+    bench('Create grid with all options (1,000 items)', () => {
+      createGrid({
+        items: ROWS_1K,
+        columns: COLUMNS_PINNED,
+        sortMultiple: true,
+        editing: { onEdit: () => {} },
+        rowSpanning: (_, col) => col === 'department' ? 2 : 1,
+      })
+    })
+  })
+
+  // ===========================================================================
+  // SEARCH PIPELINE - Filter stage via inherited createDataTable pipeline
+  // Fresh fixture per iteration (required - search() mutates query ref)
+  // Comparable: createDataTable search pipeline
+  // ===========================================================================
+  describe('search pipeline', () => {
+    bench('Search then read filtered items (1,000 items)', () => {
+      const grid = createGrid({ items: ROWS_1K })
+      grid.search(SEARCH_QUERY_1K)
+      void grid.filteredItems.value
+    })
+
+    bench('Search then read filtered items (10,000 items)', () => {
+      const grid = createGrid({ items: ROWS_10K })
+      grid.search(SEARCH_QUERY_10K)
+      void grid.filteredItems.value
+    })
+  })
+
+  // ===========================================================================
+  // SORT PIPELINE - Sort stage via inherited createDataTable pipeline
+  // Fresh fixture per iteration (required - toggle() mutates sort state)
+  // Comparable: createDataTable sort pipeline
+  // ===========================================================================
+  describe('sort pipeline', () => {
+    bench('Sort by string column ascending (1,000 items)', () => {
+      const grid = createGrid({ items: ROWS_1K })
+      grid.sort.toggle('name')
+      void grid.sortedItems.value
+    })
+
+    bench('Sort by string column ascending (10,000 items)', () => {
+      const grid = createGrid({ items: ROWS_10K })
+      grid.sort.toggle('name')
+      void grid.sortedItems.value
+    })
+
+    bench('Sort by custom comparator (1,000 items)', () => {
+      const grid = createGrid({ items: ROWS_1K })
+      grid.sort.toggle('salary')
+      void grid.sortedItems.value
+    })
+
+    bench('Sort by custom comparator (10,000 items)', () => {
+      const grid = createGrid({ items: ROWS_10K })
+      grid.sort.toggle('salary')
+      void grid.sortedItems.value
+    })
+  })
+
+  // ===========================================================================
+  // COLUMN LAYOUT - Pin, resize, reorder, distribute, reset
+  // Fresh fixture per iteration (required - mutations modify layout state)
+  // Grid-specific: no createDataTable equivalent
+  // ===========================================================================
+  describe('column layout', () => {
+    bench('Pin column (1,000 items)', () => {
+      const grid = createGrid({ items: ROWS_1K })
+      grid.layout.pin('name', 'left')
+      void grid.layout.pinned.value
+    })
+
+    bench('Resize column (1,000 items)', () => {
+      const grid = createGrid({ items: ROWS_1K })
+      grid.layout.resize('name', 5)
+      void grid.layout.columns.value
+    })
+
+    bench('Resize column 10 times (1,000 items)', () => {
+      const grid = createGrid({ items: ROWS_1K })
+      for (let i = 0; i < 10; i++) {
+        grid.layout.resize('name', 1)
+      }
+      void grid.layout.columns.value
+    })
+
+    bench('Reorder column (1,000 items)', () => {
+      const grid = createGrid({ items: ROWS_1K })
+      grid.layout.reorder(0, 3)
+      void grid.layout.columns.value
+    })
+
+    bench('Reset layout (1,000 items)', () => {
+      const grid = createGrid({ items: ROWS_1K })
+      grid.layout.pin('name', 'left')
+      grid.layout.resize('email', 5)
+      grid.layout.reset()
+      void grid.layout.columns.value
+    })
+  })
+
+  // ===========================================================================
+  // CELL EDITING - Edit, commit, cancel, validation
+  // Fresh fixture per iteration (required - editing mutates active cell state)
+  // Grid-specific: no createDataTable equivalent
+  // ===========================================================================
+  describe('cell editing', () => {
+    bench('Edit cell (1,000 items)', () => {
+      const grid = createGrid({ items: ROWS_1K, columns: COLUMNS_EDITABLE })
+      grid.editing.edit(500, 'name')
+    })
+
+    bench('Edit then commit (1,000 items)', () => {
+      const grid = createGrid({ items: ROWS_1K, columns: COLUMNS_EDITABLE })
+      grid.editing.edit(500, 'name')
+      grid.editing.commit('Updated Name')
+    })
+
+    bench('Edit then cancel (1,000 items)', () => {
+      const grid = createGrid({ items: ROWS_1K, columns: COLUMNS_EDITABLE })
+      grid.editing.edit(500, 'name')
+      grid.editing.cancel()
+    })
+
+    bench('Edit with validation failure (1,000 items)', () => {
+      const grid = createGrid({ items: ROWS_1K, columns: COLUMNS_EDITABLE })
+      grid.editing.edit(500, 'email')
+      grid.editing.commit('no-at-sign')
+      void grid.editing.error.value
+    })
+
+    bench('Edit 10 cells sequentially (1,000 items)', () => {
+      const grid = createGrid({
+        items: ROWS_1K,
+        columns: COLUMNS_EDITABLE,
+        editing: { onEdit: () => {} },
+      })
+      for (let i = 0; i < 10; i++) {
+        grid.editing.edit(i, 'name')
+        grid.editing.commit(`Name ${i}`)
+      }
+    })
+  })
+
+  // ===========================================================================
+  // ROW ORDERING - Move rows post-sort
+  // Fresh fixture per iteration (required - move mutates order state)
+  // Grid-specific: no createDataTable equivalent
+  // ===========================================================================
+  describe('row ordering', () => {
+    bench('Move row (1,000 items)', () => {
+      const grid = createGrid({ items: ROWS_1K })
+      grid.rows.move(0, 500)
+    })
+
+    bench('Move 10 rows (1,000 items)', () => {
+      const grid = createGrid({ items: ROWS_1K })
+      for (let i = 0; i < 10; i++) {
+        grid.rows.move(i, i + 10)
+      }
+    })
+
+    bench('Reset row order (1,000 items)', () => {
+      const grid = createGrid({ items: ROWS_1K })
+      grid.rows.move(0, 500)
+      grid.rows.reset()
+    })
+  })
+
+  // ===========================================================================
+  // ROW SPANNING - Computed span map from visible items
+  // Fresh fixture per iteration
+  // Grid-specific: no createDataTable equivalent
+  // ===========================================================================
+  describe('row spanning', () => {
+    bench('Compute spans (1,000 items, 1 column)', () => {
+      const grid = createGrid({
+        items: ROWS_1K,
+        rowSpanning: (_, col) => col === 'department' ? 2 : 1,
+      })
+      void grid.spans.value
+    })
+
+    bench('Compute spans (10,000 items, 1 column)', () => {
+      const grid = createGrid({
+        items: ROWS_10K,
+        rowSpanning: (_, col) => col === 'department' ? 2 : 1,
+      })
+      void grid.spans.value
+    })
+  })
+
+  // ===========================================================================
+  // COMPUTED ACCESS - Cached reads of derived pipeline stages
+  // Shared fixture (safe - reading .value doesn't mutate state)
+  // Comparable: createDataTable computed access
+  // ===========================================================================
+  describe('computed access', () => {
+    const grid1k = createGrid({ items: ROWS_1K, columns: COLUMNS_PINNED })
+    const grid10k = createGrid({ items: ROWS_10K, columns: COLUMNS_PINNED })
+
+    bench('Access items 100 times (1,000 items, cached)', () => {
+      for (let i = 0; i < 100; i++) {
+        void grid1k.items.value
+      }
+    })
+
+    bench('Access items 100 times (10,000 items, cached)', () => {
+      for (let i = 0; i < 100; i++) {
+        void grid10k.items.value
+      }
+    })
+
+    bench('Access sortedItems 100 times (1,000 items, cached)', () => {
+      for (let i = 0; i < 100; i++) {
+        void grid1k.sortedItems.value
+      }
+    })
+
+    bench('Access layout.columns 100 times (1,000 items, cached)', () => {
+      for (let i = 0; i < 100; i++) {
+        void grid1k.layout.columns.value
+      }
+    })
+
+    bench('Access layout.pinned 100 times (1,000 items, cached)', () => {
+      for (let i = 0; i < 100; i++) {
+        void grid1k.layout.pinned.value
+      }
+    })
+  })
+
+  // ===========================================================================
+  // FULL PIPELINE - End-to-end search → sort → paginate
+  // Fresh fixture per iteration (required - mutates search and sort state)
+  // Comparable: createDataTable full pipeline
+  // ===========================================================================
+  describe('full pipeline', () => {
+    bench('Search + sort + paginate (1,000 items)', () => {
+      const grid = createGrid({ items: ROWS_1K, pagination: { itemsPerPage: 25 } })
+      grid.search('User 5')
+      grid.sort.toggle('name')
+      void grid.items.value
+    })
+
+    bench('Search + sort + paginate (10,000 items)', () => {
+      const grid = createGrid({ items: ROWS_10K, pagination: { itemsPerPage: 25 } })
+      grid.search('User 5')
+      grid.sort.toggle('name')
+      void grid.items.value
+    })
+
+    bench('Search + sort + paginate + layout (1,000 items)', () => {
+      const grid = createGrid({ items: ROWS_1K, pagination: { itemsPerPage: 25 } })
+      grid.search('User 5')
+      grid.sort.toggle('name')
+      grid.layout.pin('name', 'left')
+      grid.layout.resize('email', 5)
+      void grid.items.value
+      void grid.layout.pinned.value
+    })
+
+    bench('Search + sort + paginate + layout (10,000 items)', () => {
+      const grid = createGrid({ items: ROWS_10K, pagination: { itemsPerPage: 25 } })
+      grid.search('User 5')
+      grid.sort.toggle('name')
+      grid.layout.pin('name', 'left')
+      grid.layout.resize('email', 5)
+      void grid.items.value
+      void grid.layout.pinned.value
+    })
+  })
+})
diff --git a/packages/0/src/composables/createDataGrid/index.test.ts b/packages/0/src/composables/createDataGrid/index.test.ts
new file mode 100644
index 000000000..e937d6c4b
--- /dev/null
+++ b/packages/0/src/composables/createDataGrid/index.test.ts
@@ -0,0 +1,232 @@
+import { describe, expect, it, vi } from 'vitest'
+
+import { createDataGrid } from './index'
+
+vi.mock('vue', async () => {
+  const actual = await vi.importActual('vue')
+  return {
+    ...actual,
+    provide: vi.fn(),
+    inject: vi.fn(),
+  }
+})
+
+const items = [
+  { id: 1, name: 'Alice', email: 'alice@test.com', age: 30, dept: 'Eng' },
+  { id: 2, name: 'Bob', email: 'bob@test.com', age: 25, dept: 'Eng' },
+  { id: 3, name: 'Carol', email: 'carol@test.com', age: 35, dept: 'Sales' },
+  { id: 4, name: 'Dave', email: 'dave@test.com', age: 28, dept: 'Sales' },
+]
+
+function onboard<T extends { id: number }> (
+  grid: { onboard: (inputs: { id: number, value: T }[]) => unknown },
+  values: T[],
+) {
+  grid.onboard(values.map(value => ({ id: value.id, value })))
+}
+
+describe('createDataGrid', () => {
+  it('should create a grid with data table pipeline', () => {
+    const grid = createDataGrid({
+      columns: [
+        { key: 'name', title: 'Name', sortable: true, filterable: true, size: 30 },
+        { key: 'email', title: 'Email', filterable: true, size: 40 },
+        { key: 'age', title: 'Age', sortable: true, size: 30 },
+      ],
+    })
+
+    onboard(grid, items)
+
+    expect(grid.items.value).toHaveLength(4)
+    expect(grid.layout.columns.value).toHaveLength(3)
+  })
+
+  it('should filter items via search', () => {
+    const grid = createDataGrid({
+      columns: [
+        { key: 'name', filterable: true, size: 50 },
+        { key: 'email', filterable: true, size: 50 },
+      ],
+    })
+
+    onboard(grid, items)
+
+    grid.search('alice')
+    expect(grid.items.value).toHaveLength(1)
+    expect(grid.items.value[0].name).toBe('Alice')
+  })
+
+  it('should sort through the table pipeline', () => {
+    const grid = createDataGrid({
+      columns: [
+        { key: 'name', sortable: true, size: 50 },
+        { key: 'age', sortable: true, size: 50 },
+      ],
+    })
+
+    onboard(grid, items)
+
+    grid.sort.toggle('age')
+    expect(grid.items.value[0].name).toBe('Bob') // age 25
+    expect(grid.items.value[3].name).toBe('Carol') // age 35
+  })
+
+  describe('row registry', () => {
+    it('should onboard rows via the inherited registry surface', () => {
+      const grid = createDataGrid({
+        columns: [{ key: 'name', size: 100 }],
+      })
+
+      expect(grid.items.value).toHaveLength(0)
+
+      grid.onboard(items.map(value => ({ id: value.id, value })))
+
+      expect(grid.size).toBe(4)
+      expect(grid.items.value).toHaveLength(4)
+    })
+
+    it('should register a single row and expose it through the pipeline', () => {
+      const grid = createDataGrid({
+        columns: [{ key: 'name', size: 100 }],
+      })
+
+      const ticket = grid.register({ id: items[0].id, value: items[0] })
+
+      expect(ticket.id).toBe(items[0].id)
+      expect(grid.size).toBe(1)
+      expect(grid.items.value[0].name).toBe('Alice')
+    })
+
+    it('should remove a row via unregister', () => {
+      const grid = createDataGrid({
+        columns: [{ key: 'name', size: 100 }],
+      })
+
+      onboard(grid, items)
+      grid.unregister(2)
+
+      expect(grid.size).toBe(3)
+      expect(grid.items.value.find(item => item.id === 2)).toBeUndefined()
+    })
+
+    it('should clear all rows', () => {
+      const grid = createDataGrid({
+        columns: [{ key: 'name', size: 100 }],
+      })
+
+      onboard(grid, items)
+      grid.clear()
+
+      expect(grid.size).toBe(0)
+      expect(grid.items.value).toHaveLength(0)
+    })
+  })
+
+  describe('column layout', () => {
+    it('should initialize with correct sizes', () => {
+      const grid = createDataGrid({
+        columns: [
+          { key: 'name', size: 40 },
+          { key: 'email', size: 60 },
+        ],
+      })
+
+      onboard(grid, items)
+
+      expect(grid.layout.columns.value[0].size).toBe(40)
+      expect(grid.layout.columns.value[1].size).toBe(60)
+    })
+
+    it('should support nested columns', () => {
+      const grid = createDataGrid({
+        columns: [
+          { key: 'name', title: 'Name', size: 30 },
+          {
+            key: 'contact',
+            title: 'Contact',
+            children: [
+              { key: 'email', title: 'Email', size: 40 },
+              { key: 'age', title: 'Age', size: 30 },
+            ],
+          },
+        ],
+      })
+
+      onboard(grid, items)
+
+      // Layout should have leaf columns only
+      expect(grid.layout.columns.value).toHaveLength(3)
+
+      // Headers should be 2D
+      expect(grid.headers.value).toHaveLength(2)
+      expect(grid.headers.value[0][0].rowspan).toBe(2) // name spans 2 rows
+      expect(grid.headers.value[0][1].colspan).toBe(2) // contact spans 2 cols
+    })
+  })
+
+  describe('cell editing', () => {
+    it('should commit an edit through the edit lifecycle', () => {
+      const onEdit = vi.fn()
+      const grid = createDataGrid({
+        columns: [
+          { key: 'name', size: 50, editable: true },
+          { key: 'email', size: 50 },
+        ],
+        editing: { onEdit },
+      })
+
+      onboard(grid, items)
+
+      grid.editing.edit(1, 'name')
+      expect(grid.editing.active.value).toEqual({ row: 1, column: 'name' })
+
+      grid.editing.commit('Alicia')
+      expect(onEdit).toHaveBeenCalledWith(1, 'name', 'Alicia', items[0])
+      expect(grid.editing.active.value).toBeNull()
+    })
+
+    it('should reject bad values via validation', () => {
+      const grid = createDataGrid({
+        columns: [
+          {
+            key: 'email',
+            size: 100,
+            editable: true,
+            validate: v => (typeof v === 'string' && v.includes('@')) || 'Invalid email',
+          },
+        ],
+        editing: {},
+      })
+
+      onboard(grid, items)
+
+      grid.editing.edit(1, 'email')
+      grid.editing.commit('not-email')
+      expect(grid.editing.error.value).toBe('Invalid email')
+      expect(grid.editing.active.value).not.toBeNull()
+    })
+  })
+
+  describe('row spanning', () => {
+    it('should compute a span map', () => {
+      const grid = createDataGrid({
+        columns: [
+          { key: 'dept', size: 50 },
+          { key: 'name', size: 50 },
+        ],
+        rowSpanning: (item, column) => {
+          if (column === 'dept' && (item.dept === 'Eng' || item.dept === 'Sales')) return 2
+          return 1
+        },
+      })
+
+      onboard(grid, items)
+
+      const spans = grid.spans.value
+      expect(spans.get(1)?.get('dept')?.rowSpan).toBe(2)
+      expect(spans.get(2)?.get('dept')?.hidden).toBe(true)
+      expect(spans.get(3)?.get('dept')?.rowSpan).toBe(2)
+      expect(spans.get(4)?.get('dept')?.hidden).toBe(true)
+    })
+  })
+})
diff --git a/packages/0/src/composables/createDataGrid/index.ts b/packages/0/src/composables/createDataGrid/index.ts
new file mode 100644
index 000000000..0f1e6d18d
--- /dev/null
+++ b/packages/0/src/composables/createDataGrid/index.ts
@@ -0,0 +1,278 @@
+/**
+ * @module createDataGrid
+ *
+ * @see https://0.vuetifyjs.com/composables/data/create-data-grid
+ *
+ * @remarks
+ * Main factory that wires together column layout, cell editing, row ordering,
+ * and row spanning on top of a createDataTable pipeline. Uses a ClientGridAdapter
+ * so row ordering is applied post-sort, pre-pagination.
+ *
+ * Rows are registered through the inherited registry surface (`register`,
+ * `onboard`, `unregister`, `clear`) — they are not passed as an `items`
+ * option to the factory.
+ *
+ * Follows the trinity pattern for dependency injection.
+ *
+ * @example
+ * ```ts
+ * const grid = createDataGrid({
+ *   columns: [
+ *     { key: 'name', sortable: true },
+ *     { key: 'progress', editable: true },
+ *   ],
+ * })
+ *
+ * grid.onboard(rows.map(value => ({ id: value.id, value })))
+ * grid.layout.pin('name', 'left')
+ * grid.editing.edit(row.id, 'progress')
+ * ```
+ */
+
+// Composables
+import { createContext, useContext } from '#v0/composables/createContext'
+import { createDataTable } from '#v0/composables/createDataTable'
+import { extractLeaves } from '#v0/composables/createDataTable/columns'
+import { createTrinity } from '#v0/composables/createTrinity'
+
+// Adapters
+import { ClientGridAdapter } from './adapters'
+
+// Grid modules
+import { createCellEditing } from './editing'
+import { createColumnLayout } from './layout'
+import { createRowOrdering } from './ordering'
+import { createRowSpanning } from './spanning'
+
+// Utilities
+import { isFunction, isUndefined } from '#v0/utilities'
+import { watch } from 'vue'
+
+// Types
+import type { DataTableAdapter, DataTableContext } from '#v0/composables/createDataTable'
+import type { FilterOptions } from '#v0/composables/createFilter'
+import type { PaginationOptions } from '#v0/composables/createPagination'
+import type { ContextTrinity } from '#v0/composables/createTrinity'
+import type { VirtualOptions } from '#v0/composables/createVirtual'
+import type { ID } from '#v0/types'
+import type { CellEditing } from './editing'
+import type { ColumnLayout, GridColumnDef } from './layout'
+import type { SpanEntry } from './spanning'
+import type { App, ComputedRef, Ref, ShallowRef } from 'vue'
+
+export type { ColumnLayout, GridColumnDef, PinnedRegion, PinPosition, ResolvedColumn } from './layout'
+export type { ActiveCell, CellEditing, CellEditingOptions, EditableColumn } from './editing'
+export type { RowOrdering } from './ordering'
+export type { RowSpanningOptions, SpanEntry } from './spanning'
+export { ClientGridAdapter, ServerGridAdapter, VirtualGridAdapter } from './adapters'
+export type { ServerGridAdapterOptions } from './adapters'
+
+export interface DataGridColumn<T extends Record<string, unknown> = Record<string, unknown>> extends GridColumnDef {
+  readonly key: string
+  readonly title?: string
+  readonly sortable?: boolean
+  readonly filterable?: boolean
+  readonly sort?: (a: unknown, b: unknown) => number
+  readonly filter?: (value: unknown, query: string) => boolean
+  readonly editable?: boolean | ((item: T) => boolean)
+  readonly editor?: 'text' | 'number' | 'boolean'
+  readonly validate?: (value: unknown, item?: T) => string | true
+  readonly span?: (item: T) => number
+  readonly children?: readonly DataGridColumn<T>[]
+}
+
+export interface DataGridOptions<T extends Record<string, unknown>> {
+  columns: readonly DataGridColumn<T>[]
+  adapter?: DataTableAdapter<T>
+  filter?: Omit<FilterOptions, 'keys'>
+  pagination?: Omit<PaginationOptions, 'size'>
+  sortMultiple?: boolean
+  pinning?: { left?: string[], right?: string[] }
+  resizing?: boolean | { min?: number, max?: number }
+  reordering?: boolean
+  editing?: {
+    columns?: string[]
+    onEdit?: (row: ID, column: string, value: unknown, item: T) => void
+  }
+  rowReordering?: boolean
+  preserveRowOrder?: boolean
+  rowSpanning?: (item: T, column: string) => number
+  virtualization?: VirtualOptions
+}
+
+export interface DataGridContext<T extends Record<string, unknown>> extends DataTableContext<T> {
+  layout: ColumnLayout
+  rows: {
+    order: Readonly<ShallowRef<ID[]>>
+    move: (fromIndex: number, toIndex: number) => void
+    reset: () => void
+  }
+  editing: CellEditing
+  spans: ComputedRef<Map<ID, Map<string, SpanEntry>>>
+  virtual: null
+}
+
+export interface DataGridContextOptions<T extends Record<string, unknown>> extends DataGridOptions<T> {
+  namespace?: string
+}
+
+/**
+ * Creates a data grid instance with layout, editing, row ordering, and spanning
+ * layered on top of the createDataTable pipeline.
+ *
+ * Rows live on the inherited registry surface — register them with
+ * `grid.onboard(rows.map(value => ({ id: value.id, value })))` or
+ * `grid.register({ id, value })`.
+ *
+ * @param options Data grid options
+ * @returns Data grid context
+ *
+ * @example
+ * ```ts
+ * const grid = createDataGrid({
+ *   columns: [
+ *     { key: 'name', sortable: true },
+ *     { key: 'progress', editable: true, validate: v => Number(v) >= 0 || 'must be positive' },
+ *   ],
+ *   pagination: { initial: 1 },
+ * })
+ *
+ * grid.onboard(rows.map(value => ({ id: value.id, value })))
+ * grid.layout.pin('name', 'left')
+ * grid.rows.move(2, 0)
+ * grid.editing.edit(row.id, 'progress')
+ * ```
+ */
+export function createDataGrid<T extends Record<string, unknown>> (
+  options: DataGridOptions<T>,
+): DataGridContext<T> {
+  const {
+    columns,
+    adapter: customAdapter,
+    filter,
+    pagination,
+    sortMultiple,
+    editing: editingOptions,
+    preserveRowOrder = false,
+    rowSpanning,
+  } = options
+
+  const leaves = extractLeaves(columns)
+  const ordering = createRowOrdering()
+  const adapter = customAdapter ?? new ClientGridAdapter<T>(ordering.order)
+
+  const table = createDataTable<T>({
+    columns,
+    filter,
+    pagination,
+    sortMultiple,
+    adapter,
+  })
+
+  if (!preserveRowOrder) {
+    watch(table.sort.columns, () => {
+      ordering.reset()
+    })
+  }
+
+  const layout = createColumnLayout(columns)
+
+  const editable = leaves
+    .filter(col => col.editable === true || isFunction(col.editable))
+    .map(col => ({
+      key: col.key,
+      editable: col.editable as boolean | ((item: unknown) => boolean),
+      validate: col.validate as ((value: unknown, item?: unknown) => string | true) | undefined,
+    }))
+
+  function lookup (row: ID): T | undefined {
+    return table.get(row)?.value
+  }
+
+  const editing = createCellEditing({
+    columns: editable,
+    lookup,
+    onEdit: editingOptions?.onEdit
+      ? (row, column, value) => {
+          const item = lookup(row)
+          if (!isUndefined(item)) editingOptions.onEdit!(row, column, value, item)
+        }
+      : undefined,
+  })
+
+  const spans = createRowSpanning<T>({
+    items: table.items as Ref<readonly T[]>,
+    columns: leaves.map(col => col.key),
+    rowSpanning,
+  })
+  return {
+    ...table,
+    layout,
+    rows: {
+      order: ordering.order,
+      move: ordering.move,
+      reset: ordering.reset,
+    },
+    editing,
+    spans,
+    virtual: null,
+    get size () {
+      return table.size
+    },
+  }
+}
+
+/**
+ * Creates a data grid context with dependency injection support.
+ *
+ * @param options Data grid context options including namespace
+ * @returns A trinity tuple: [useDataGridContext, provideDataGridContext, defaultContext]
+ *
+ * @example
+ * ```ts
+ * const [useDataGrid, provideDataGrid, grid] = createDataGridContext({
+ *   columns,
+ *   namespace: 'v0:projects',
+ * })
+ *
+ * grid.onboard(rows.map(value => ({ id: value.id, value })))
+ * provideDataGrid()
+ * const ctx = useDataGrid()
+ * ```
+ */
+export function createDataGridContext<T extends Record<string, unknown>> (
+  _options: DataGridContextOptions<T>,
+): ContextTrinity<DataGridContext<T>> {
+  const { namespace = 'v0:data-grid', ...options } = _options
+  const [useDataGridContext, _provideDataGridContext] = createContext<DataGridContext<T>>(namespace)
+  const context = createDataGrid(options)
+
+  function provideDataGridContext (
+    _context: DataGridContext<T> = context,
+    app?: App,
+  ): DataGridContext<T> {
+    return _provideDataGridContext(_context, app)
+  }
+
+  return createTrinity<DataGridContext<T>>(useDataGridContext, provideDataGridContext, context)
+}
+
+/**
+ * Returns the current data grid context from dependency injection.
+ *
+ * @param namespace The namespace for the data grid context. @default 'v0:data-grid'
+ * @returns The current data grid context
+ *
+ * @example
+ * ```ts
+ * const grid = useDataGrid<Project>()
+ *
+ * grid.layout.pin('id', 'left')
+ * grid.rows.reset()
+ * ```
+ */
+export function useDataGrid<T extends Record<string, unknown>> (
+  namespace = 'v0:data-grid',
+): DataGridContext<T> {
+  return useContext<DataGridContext<T>>(namespace)
+}
diff --git a/packages/0/src/composables/createDataGrid/layout.test.ts b/packages/0/src/composables/createDataGrid/layout.test.ts
new file mode 100644
index 000000000..9876bcc67
--- /dev/null
+++ b/packages/0/src/composables/createDataGrid/layout.test.ts
@@ -0,0 +1,349 @@
+import { describe, expect, it } from 'vitest'
+
+import { createColumnLayout } from './layout'
+
+describe('createColumnLayout', () => {
+  describe('auto-distribute sizes', () => {
+    it('gives 4 equal columns 25% each', () => {
+      const layout = createColumnLayout([
+        { key: 'a' },
+        { key: 'b' },
+        { key: 'c' },
+        { key: 'd' },
+      ])
+
+      const cols = layout.columns.value
+      for (const col of cols) {
+        expect(col.size).toBe(25)
+      }
+    })
+
+    it('splits remainder evenly among unsized columns', () => {
+      // 'a' takes 40, remaining 60 split between b and c
+      const layout = createColumnLayout([
+        { key: 'a', size: 40 },
+        { key: 'b' },
+        { key: 'c' },
+      ])
+
+      const cols = layout.columns.value
+      expect(cols.find(c => c.key === 'a')!.size).toBe(40)
+      expect(cols.find(c => c.key === 'b')!.size).toBe(30)
+      expect(cols.find(c => c.key === 'c')!.size).toBe(30)
+    })
+
+    it('keeps explicit sizes when all specified', () => {
+      const layout = createColumnLayout([
+        { key: 'a', size: 60 },
+        { key: 'b', size: 40 },
+      ])
+
+      const cols = layout.columns.value
+      expect(cols.find(c => c.key === 'a')!.size).toBe(60)
+      expect(cols.find(c => c.key === 'b')!.size).toBe(40)
+    })
+  })
+
+  describe('offset computation', () => {
+    it('computes cumulative offsets within scrollable region', () => {
+      const layout = createColumnLayout([
+        { key: 'a', size: 30 },
+        { key: 'b', size: 40 },
+        { key: 'c', size: 30 },
+      ])
+
+      const cols = layout.columns.value
+      expect(cols.find(c => c.key === 'a')!.offset).toBe(0)
+      expect(cols.find(c => c.key === 'b')!.offset).toBe(30)
+      expect(cols.find(c => c.key === 'c')!.offset).toBe(70)
+    })
+  })
+
+  describe('leaf extraction from nested columns', () => {
+    it('extracts leaves from nested defs', () => {
+      const layout = createColumnLayout([
+        { key: 'name', size: 30 },
+        {
+          key: 'contact',
+          children: [
+            { key: 'email', size: 35 },
+            { key: 'phone', size: 35 },
+          ],
+        },
+      ])
+
+      const cols = layout.columns.value
+      expect(cols).toHaveLength(3)
+      expect(cols.map(c => c.key)).toEqual(['name', 'email', 'phone'])
+    })
+
+    it('auto-distributes remainder across nested leaves', () => {
+      const layout = createColumnLayout([
+        { key: 'name' },
+        {
+          key: 'contact',
+          children: [
+            { key: 'email' },
+            { key: 'phone' },
+          ],
+        },
+      ])
+
+      // 3 leaves, each gets 100/3
+      const cols = layout.columns.value
+      expect(cols).toHaveLength(3)
+      const total = cols.reduce((sum, c) => sum + c.size, 0)
+      expect(total).toBeCloseTo(100)
+    })
+  })
+
+  describe('pinning', () => {
+    it('splits columns into left/scrollable/right regions from options', () => {
+      const layout = createColumnLayout([
+        { key: 'a', size: 20, pinned: 'left' },
+        { key: 'b', size: 60 },
+        { key: 'c', size: 20, pinned: 'right' },
+      ])
+
+      const { left, scrollable, right } = layout.pinned.value
+      expect(left.map(c => c.key)).toEqual(['a'])
+      expect(scrollable.map(c => c.key)).toEqual(['b'])
+      expect(right.map(c => c.key)).toEqual(['c'])
+    })
+
+    it('pin mutation moves a column to the specified region', () => {
+      const layout = createColumnLayout([
+        { key: 'a', size: 30 },
+        { key: 'b', size: 40 },
+        { key: 'c', size: 30 },
+      ])
+
+      layout.pin('a', 'left')
+
+      const { left, scrollable } = layout.pinned.value
+      expect(left.map(c => c.key)).toEqual(['a'])
+      expect(scrollable.map(c => c.key)).toEqual(['b', 'c'])
+    })
+
+    it('unpin moves column back to scrollable', () => {
+      const layout = createColumnLayout([
+        { key: 'a', size: 30, pinned: 'left' },
+        { key: 'b', size: 40 },
+        { key: 'c', size: 30 },
+      ])
+
+      layout.pin('a', false)
+
+      const { left, scrollable } = layout.pinned.value
+      expect(left).toHaveLength(0)
+      expect(scrollable.map(c => c.key)).toEqual(['a', 'b', 'c'])
+    })
+
+    it('computes offsets independently per region', () => {
+      const layout = createColumnLayout([
+        { key: 'a', size: 20, pinned: 'left' },
+        { key: 'b', size: 20, pinned: 'left' },
+        { key: 'c', size: 30 },
+        { key: 'd', size: 30 },
+      ])
+
+      const { left, scrollable } = layout.pinned.value
+
+      // Left region offsets start at 0
+      expect(left.find(c => c.key === 'a')!.offset).toBe(0)
+      expect(left.find(c => c.key === 'b')!.offset).toBe(20)
+
+      // Scrollable region offsets start at 0 independently
+      expect(scrollable.find(c => c.key === 'c')!.offset).toBe(0)
+      expect(scrollable.find(c => c.key === 'd')!.offset).toBe(30)
+    })
+  })
+
+  describe('resize', () => {
+    it('adjusts target and neighbor by delta', () => {
+      const layout = createColumnLayout([
+        { key: 'a', size: 50 },
+        { key: 'b', size: 50 },
+      ])
+
+      layout.resize('a', 10)
+
+      const cols = layout.columns.value
+      expect(cols.find(c => c.key === 'a')!.size).toBe(60)
+      expect(cols.find(c => c.key === 'b')!.size).toBe(40)
+    })
+
+    it('clamps at minSize', () => {
+      const layout = createColumnLayout([
+        { key: 'a', size: 50, minSize: 20 },
+        { key: 'b', size: 50, minSize: 20 },
+      ])
+
+      // Try to shrink 'a' below its min
+      layout.resize('a', -40)
+
+      const cols = layout.columns.value
+      expect(cols.find(c => c.key === 'a')!.size).toBe(20)
+      expect(cols.find(c => c.key === 'b')!.size).toBe(80)
+    })
+
+    it('clamps at maxSize', () => {
+      const layout = createColumnLayout([
+        { key: 'a', size: 50, maxSize: 60 },
+        { key: 'b', size: 50, minSize: 20 },
+      ])
+
+      layout.resize('a', 30)
+
+      const cols = layout.columns.value
+      expect(cols.find(c => c.key === 'a')!.size).toBe(60)
+      expect(cols.find(c => c.key === 'b')!.size).toBe(40)
+    })
+
+    it('no-op on last column in its region', () => {
+      const layout = createColumnLayout([
+        { key: 'a', size: 50 },
+        { key: 'b', size: 50 },
+      ])
+
+      layout.resize('b', 10)
+
+      const cols = layout.columns.value
+      expect(cols.find(c => c.key === 'a')!.size).toBe(50)
+      expect(cols.find(c => c.key === 'b')!.size).toBe(50)
+    })
+
+    it('resizes within pin region only', () => {
+      const layout = createColumnLayout([
+        { key: 'a', size: 20, pinned: 'left' },
+        { key: 'b', size: 20, pinned: 'left' },
+        { key: 'c', size: 30 },
+        { key: 'd', size: 30 },
+      ])
+
+      layout.resize('a', 5)
+
+      const cols = layout.columns.value
+      // a grows, b shrinks (left region)
+      expect(cols.find(c => c.key === 'a')!.size).toBe(25)
+      expect(cols.find(c => c.key === 'b')!.size).toBe(15)
+      // scrollable region unchanged
+      expect(cols.find(c => c.key === 'c')!.size).toBe(30)
+      expect(cols.find(c => c.key === 'd')!.size).toBe(30)
+    })
+  })
+
+  describe('reorder', () => {
+    it('moves a column from one position to another', () => {
+      const layout = createColumnLayout([
+        { key: 'a' },
+        { key: 'b' },
+        { key: 'c' },
+      ])
+
+      // Move 'a' (index 0) to index 2
+      layout.reorder(0, 2)
+
+      expect(layout.columns.value.map(c => c.key)).toEqual(['b', 'c', 'a'])
+    })
+
+    it('no-op for out-of-bounds from index', () => {
+      const layout = createColumnLayout([
+        { key: 'a' },
+        { key: 'b' },
+      ])
+
+      layout.reorder(5, 0)
+
+      expect(layout.columns.value.map(c => c.key)).toEqual(['a', 'b'])
+    })
+  })
+
+  describe('reset', () => {
+    it('restores initial sizes', () => {
+      const layout = createColumnLayout([
+        { key: 'a', size: 60 },
+        { key: 'b', size: 40 },
+      ])
+
+      layout.resize('a', -20)
+      layout.reset()
+
+      const cols = layout.columns.value
+      expect(cols.find(c => c.key === 'a')!.size).toBe(60)
+      expect(cols.find(c => c.key === 'b')!.size).toBe(40)
+    })
+
+    it('restores initial order', () => {
+      const layout = createColumnLayout([
+        { key: 'a' },
+        { key: 'b' },
+        { key: 'c' },
+      ])
+
+      layout.reorder(0, 2)
+      layout.reset()
+
+      expect(layout.columns.value.map(c => c.key)).toEqual(['a', 'b', 'c'])
+    })
+
+    it('restores initial pins', () => {
+      const layout = createColumnLayout([
+        { key: 'a', size: 30, pinned: 'left' },
+        { key: 'b', size: 40 },
+        { key: 'c', size: 30 },
+      ])
+
+      layout.pin('a', false)
+      layout.reset()
+
+      const { left } = layout.pinned.value
+      expect(left.map(c => c.key)).toEqual(['a'])
+    })
+  })
+
+  describe('distribute', () => {
+    it('sets sizes from array and normalizes to 100', () => {
+      const layout = createColumnLayout([
+        { key: 'a' },
+        { key: 'b' },
+        { key: 'c' },
+      ])
+
+      layout.distribute([50, 30, 20])
+
+      const cols = layout.columns.value
+      expect(cols.find(c => c.key === 'a')!.size).toBe(50)
+      expect(cols.find(c => c.key === 'b')!.size).toBe(30)
+      expect(cols.find(c => c.key === 'c')!.size).toBe(20)
+      const total = cols.reduce((sum, c) => sum + c.size, 0)
+      expect(total).toBeCloseTo(100)
+    })
+
+    it('no-op when array length mismatches', () => {
+      const layout = createColumnLayout([
+        { key: 'a', size: 50 },
+        { key: 'b', size: 50 },
+      ])
+
+      layout.distribute([100])
+
+      const cols = layout.columns.value
+      expect(cols.find(c => c.key === 'a')!.size).toBe(50)
+      expect(cols.find(c => c.key === 'b')!.size).toBe(50)
+    })
+
+    it('normalizes values that do not sum to 100', () => {
+      const layout = createColumnLayout([
+        { key: 'a' },
+        { key: 'b' },
+      ])
+
+      layout.distribute([30, 30])
+
+      const cols = layout.columns.value
+      const total = cols.reduce((sum, c) => sum + c.size, 0)
+      expect(total).toBeCloseTo(100)
+    })
+  })
+})
diff --git a/packages/0/src/composables/createDataGrid/layout.ts b/packages/0/src/composables/createDataGrid/layout.ts
new file mode 100644
index 000000000..00f1df016
--- /dev/null
+++ b/packages/0/src/composables/createDataGrid/layout.ts
@@ -0,0 +1,301 @@
+/**
+ * @module createDataGrid/layout
+ *
+ * @remarks
+ * Manages column layout state for data grids: sizing (percentages 0-100),
+ * pinning (left/right/scrollable regions), delta-based resizing compatible
+ * with the Splitter two-panel model, and column reordering.
+ *
+ * Built on v0 primitives:
+ * - createRegistry for column collection and ordering
+ * - createGroup for pin state (tri-state: selected=left, mixed=right, unselected=none)
+ *
+ * Sizing uses percentages so it is compatible with the Splitter component.
+ * Offsets are computed per-region (left, scrollable, right) independently.
+ */
+
+// Composables
+import { extractLeaves } from '#v0/composables/createDataTable/columns'
+import { createGroup } from '#v0/composables/createGroup'
+import { createRegistry } from '#v0/composables/createRegistry'
+
+// Utilities
+import { clamp, isUndefined } from '#v0/utilities'
+import { shallowReactive, toRef } from 'vue'
+
+// Types
+import type { ColumnNode } from '#v0/composables/createDataTable/columns'
+import type { RegistryTicketInput } from '#v0/composables/createRegistry'
+import type { Ref } from 'vue'
+
+export type PinPosition = 'left' | 'right' | false
+
+export interface GridColumnDef extends ColumnNode {
+  /** Width as a percentage (0–100). Unset columns share remaining space equally. */
+  readonly size?: number
+  /** Minimum width as a percentage. @default 2 */
+  readonly minSize?: number
+  /** Maximum width as a percentage. @default 100 */
+  readonly maxSize?: number
+  /** Pin position. @default false */
+  readonly pinned?: PinPosition
+  /** Allow resizing. @default true */
+  readonly resizable?: boolean
+  /** Allow reordering. @default true */
+  readonly reorderable?: boolean
+  readonly children?: readonly GridColumnDef[]
+}
+
+export interface ResolvedColumn {
+  key: string
+  index: number
+  /** Current size as a percentage */
+  size: number
+  /** Cumulative offset within the column's pin region */
+  offset: number
+  pinned: PinPosition
+  resizable: boolean
+  reorderable: boolean
+  minSize: number
+  maxSize: number
+}
+
+export interface PinnedRegion {
+  left: ResolvedColumn[]
+  scrollable: ResolvedColumn[]
+  right: ResolvedColumn[]
+}
+
+export interface ColumnLayout {
+  /** Resolved columns for each pin region */
+  pinned: Readonly<Ref<PinnedRegion>>
+  /** All resolved columns in display order */
+  columns: Readonly<Ref<ResolvedColumn[]>>
+  /** Pin a column to a region (or unpin with false) */
+  pin: (key: string, position: PinPosition) => void
+  /**
+   * Resize a column by delta percentage within its pin region.
+   * The neighbor to the right absorbs the inverse delta.
+   * No-op for the last column in its region or non-resizable columns.
+   */
+  resize: (key: string, delta: number) => void
+  /** Move a column from one display-order index to another */
+  reorder: (from: number, to: number) => void
+  /** Replace all sizes at once and normalize to sum to 100 */
+  distribute: (sizes: number[]) => void
+  /** Restore initial sizes, order, and pins */
+  reset: () => void
+}
+
+interface ColumnTicketInput extends RegistryTicketInput {
+  minSize: number
+  maxSize: number
+  resizable: boolean
+  reorderable: boolean
+}
+
+function distributeEven (leaves: GridColumnDef[]): Map<string, number> {
+  const map = new Map<string, number>()
+  const explicit = leaves.filter(c => !isUndefined(c.size))
+  const implicit = leaves.filter(c => isUndefined(c.size))
+
+  const used = explicit.reduce((sum, c) => sum + c.size!, 0)
+  const remainder = Math.max(0, 100 - used)
+  const share = implicit.length > 0 ? remainder / implicit.length : 0
+
+  for (const col of leaves) {
+    map.set(col.key, isUndefined(col.size) ? share : col.size)
+  }
+
+  return map
+}
+
+function offsets (cols: ResolvedColumn[]): void {
+  let offset = 0
+  for (const col of cols) {
+    col.offset = offset
+    offset += col.size
+  }
+}
+
+/**
+ * Creates a column layout manager for a data grid.
+ *
+ * @param defs Column definitions (may be nested; leaves are extracted)
+ * @returns Column layout state and mutation methods
+ */
+export function createColumnLayout (defs: readonly GridColumnDef[]): ColumnLayout {
+  const leaves = extractLeaves(defs)
+  const initial = distributeEven(leaves)
+
+  // Initial snapshots for reset
+  const snapshot = {
+    sizes: new Map(initial),
+    order: leaves.map(c => c.key),
+    pins: new Map<string, PinPosition>(
+      leaves.map(c => [c.key, c.pinned ?? false]),
+    ),
+  }
+
+  // Registry manages column collection and ordering
+  const registry = createRegistry<ColumnTicketInput>({ reactive: true })
+  registry.onboard(
+    leaves.map(col => ({
+      id: col.key,
+      value: col.key,
+      minSize: col.minSize ?? 2,
+      maxSize: col.maxSize ?? 100,
+      resizable: col.resizable ?? true,
+      reorderable: col.reorderable ?? true,
+    })),
+  )
+
+  // Group manages pin state (selected=left, mixed=right, unselected=none)
+  const group = createGroup({ multiple: true })
+  group.onboard(leaves.map(col => ({ id: col.key, value: col.key })))
+
+  for (const col of leaves) {
+    if (col.pinned === 'left') group.select(col.key)
+    else if (col.pinned === 'right') group.mix(col.key)
+  }
+
+  // Sizes stored separately — they change too frequently for registry tickets
+  const sizes = shallowReactive(new Map(initial))
+
+  function position (key: string): PinPosition {
+    if (group.selectedIds.has(key)) return 'left'
+    if (group.mixed(key)) return 'right'
+    return false
+  }
+
+  function resolve (): ResolvedColumn[] {
+    return registry.values().map((ticket, index) => {
+      const key = String(ticket.id)
+      return {
+        key,
+        index,
+        size: sizes.get(key) ?? 0,
+        offset: 0,
+        pinned: position(key),
+        resizable: ticket.resizable,
+        reorderable: ticket.reorderable,
+        minSize: ticket.minSize,
+        maxSize: ticket.maxSize,
+      }
+    })
+  }
+
+  function split (cols: ResolvedColumn[]): PinnedRegion {
+    const left: ResolvedColumn[] = []
+    const scrollable: ResolvedColumn[] = []
+    const right: ResolvedColumn[] = []
+
+    for (const col of cols) {
+      if (col.pinned === 'left') left.push(col)
+      else if (col.pinned === 'right') right.push(col)
+      else scrollable.push(col)
+    }
+
+    offsets(left)
+    offsets(scrollable)
+    offsets(right)
+
+    return { left, scrollable, right }
+  }
+
+  const pinned = toRef((): PinnedRegion => split(resolve()))
+
+  const columns = toRef((): ResolvedColumn[] => {
+    const { left, scrollable, right } = pinned.value
+    return [...left, ...scrollable, ...right]
+  })
+
+  function pin (key: string, pos: PinPosition) {
+    if (!registry.has(key)) return
+    group.unselect(key)
+    group.unmix(key)
+    if (pos === 'left') group.select(key)
+    else if (pos === 'right') group.mix(key)
+  }
+
+  function resize (key: string, delta: number) {
+    // Read from cached pinned.value instead of resolve() + split()
+    const { left, scrollable, right } = pinned.value
+    const all = [...left, ...scrollable, ...right]
+    const target = all.find(c => c.key === key)
+    if (!target || !target.resizable) return
+
+    // Pick the neighbor in display order. Pinned columns at the trailing edge
+    // of their region fall through to the first column of the next region so
+    // they remain resizable.
+    const allIndex = all.findIndex(c => c.key === key)
+    if (allIndex === -1 || allIndex === all.length - 1) return
+
+    const neighbor = all[allIndex + 1]!
+
+    const total = target.size + neighbor.size
+    const lower = Math.max(target.minSize, total - neighbor.maxSize)
+    const upper = Math.min(target.maxSize, total - neighbor.minSize)
+
+    const clamped = clamp(target.size + delta, lower, upper)
+    sizes.set(key, clamped)
+    sizes.set(neighbor.key, total - clamped)
+  }
+
+  function reorder (from: number, to: number) {
+    if (from === to) return
+    const id = registry.lookup(from)
+    if (!id) return
+    registry.move(id, to)
+  }
+
+  function distribute (incoming: number[]) {
+    const tickets = registry.values()
+    if (incoming.length !== tickets.length) return
+
+    for (const [i, ticket] of tickets.entries()) {
+      const key = String(ticket.id)
+      sizes.set(key, clamp(incoming[i]!, ticket.minSize, ticket.maxSize))
+    }
+
+    let remainder = 100 - tickets.reduce((sum, t) => sum + (sizes.get(String(t.id)) ?? 0), 0)
+    for (const ticket of tickets) {
+      if (remainder === 0) break
+      const key = String(ticket.id)
+      const current = sizes.get(key) ?? 0
+      const room = remainder > 0 ? ticket.maxSize - current : current - ticket.minSize
+      const adjust = remainder > 0 ? Math.min(remainder, room) : Math.max(remainder, -room)
+      sizes.set(key, current + adjust)
+      remainder -= adjust
+    }
+  }
+
+  function reset () {
+    for (const [key, size] of snapshot.sizes) {
+      sizes.set(key, size)
+    }
+
+    for (const [index, key] of snapshot.order.entries()) {
+      registry.move(key, index)
+    }
+
+    for (const ticket of registry.values()) {
+      group.unselect(ticket.id)
+      group.unmix(ticket.id)
+    }
+    for (const [key, pos] of snapshot.pins) {
+      if (pos === 'left') group.select(key)
+      else if (pos === 'right') group.mix(key)
+    }
+  }
+
+  return {
+    pinned,
+    columns,
+    pin,
+    resize,
+    reorder,
+    distribute,
+    reset,
+  }
+}
diff --git a/packages/0/src/composables/createDataGrid/ordering.test.ts b/packages/0/src/composables/createDataGrid/ordering.test.ts
new file mode 100644
index 000000000..d454c0977
--- /dev/null
+++ b/packages/0/src/composables/createDataGrid/ordering.test.ts
@@ -0,0 +1,48 @@
+import { describe, expect, it } from 'vitest'
+
+import { createRowOrdering } from './ordering'
+
+describe('createRowOrdering', () => {
+  it('starts with empty order', () => {
+    const ordering = createRowOrdering()
+    expect(ordering.order.value).toEqual([])
+  })
+
+  it('move sets order', () => {
+    const ordering = createRowOrdering()
+    ordering.initialize([1, 2, 3, 4])
+    ordering.move(0, 2)
+    expect(ordering.order.value).toEqual([2, 3, 1, 4])
+  })
+
+  it('reset clears order', () => {
+    const ordering = createRowOrdering()
+    ordering.initialize([1, 2, 3])
+    ordering.move(0, 2)
+    ordering.reset()
+    expect(ordering.order.value).toEqual([])
+  })
+
+  it('apply reorders items according to order', () => {
+    const ordering = createRowOrdering()
+    const items = [
+      { id: 1, name: 'A' },
+      { id: 2, name: 'B' },
+      { id: 3, name: 'C' },
+    ]
+    ordering.initialize([1, 2, 3])
+    ordering.move(0, 2) // [2, 3, 1]
+
+    const result = ordering.apply(items, 'id')
+    expect(result.map(i => i.id)).toEqual([2, 3, 1])
+  })
+
+  it('apply returns original items when order is empty', () => {
+    const ordering = createRowOrdering()
+    const items = [
+      { id: 1, name: 'A' },
+      { id: 2, name: 'B' },
+    ]
+    expect(ordering.apply(items, 'id')).toEqual(items)
+  })
+})
diff --git a/packages/0/src/composables/createDataGrid/ordering.ts b/packages/0/src/composables/createDataGrid/ordering.ts
new file mode 100644
index 000000000..95c867bd3
--- /dev/null
+++ b/packages/0/src/composables/createDataGrid/ordering.ts
@@ -0,0 +1,69 @@
+/**
+ * @module createDataGrid/ordering
+ *
+ * @remarks
+ * Row ordering state. Maintains an ID-based order that can be applied
+ * as a post-sort transform. The component layer handles drag interaction;
+ * this module only manages ordering state.
+ */
+
+// Adapters
+import { applyOrder } from './adapters/order'
+
+// Utilities
+import { shallowRef } from 'vue'
+
+// Types
+import type { ID } from '#v0/types'
+import type { ShallowRef } from 'vue'
+
+export interface RowOrdering {
+  order: Readonly<ShallowRef<ID[]>>
+  initialize: (ids: ID[]) => void
+  move: (from: number, to: number) => void
+  reset: () => void
+  apply: <T extends Record<string, unknown>>(items: readonly T[], itemKey: string) => readonly T[]
+}
+
+/**
+ * Creates row ordering state for a data grid.
+ *
+ * @returns Row ordering state and mutation methods
+ */
+export function createRowOrdering (): RowOrdering {
+  const order = shallowRef<ID[]>([])
+
+  function initialize (ids: ID[]) {
+    order.value = [...ids]
+  }
+
+  function move (from: number, to: number) {
+    if (from === to) return
+    const arr = [...order.value]
+    if (from < 0 || from >= arr.length) return
+    if (to < 0 || to >= arr.length) return
+
+    const [moved] = arr.splice(from, 1)
+    arr.splice(to, 0, moved)
+    order.value = arr
+  }
+
+  function reset () {
+    order.value = []
+  }
+
+  function apply<T extends Record<string, unknown>> (
+    items: readonly T[],
+    itemKey: string,
+  ): readonly T[] {
+    return applyOrder(items, order.value, itemKey)
+  }
+
+  return {
+    order,
+    initialize,
+    move,
+    reset,
+    apply,
+  }
+}
diff --git a/packages/0/src/composables/createDataGrid/spanning.test.ts b/packages/0/src/composables/createDataGrid/spanning.test.ts
new file mode 100644
index 000000000..b0c98875d
--- /dev/null
+++ b/packages/0/src/composables/createDataGrid/spanning.test.ts
@@ -0,0 +1,58 @@
+import { describe, expect, it } from 'vitest'
+
+import { createRowSpanning } from './spanning'
+
+// Utilities
+import { computed } from 'vue'
+
+describe('createRowSpanning', () => {
+  it('returns empty map when no rowSpanning function', () => {
+    const spans = createRowSpanning({
+      items: computed(() => []),
+      columns: ['a', 'b'],
+    })
+    expect(spans.value.size).toBe(0)
+  })
+
+  it('computes span map for visible items', () => {
+    const items = computed(() => [
+      { id: 1, category: 'A', name: 'X' },
+      { id: 2, category: 'A', name: 'Y' },
+      { id: 3, category: 'B', name: 'Z' },
+    ])
+
+    const spans = createRowSpanning({
+      items,
+      columns: ['category', 'name'],
+      itemKey: 'id',
+      rowSpanning: (item, column) => {
+        if (column === 'category' && item.category === 'A') return 2
+        return 1
+      },
+    })
+
+    expect(spans.value.get(1)?.get('category')).toEqual({ rowSpan: 2, hidden: false })
+    expect(spans.value.get(2)?.get('category')).toEqual({ rowSpan: 1, hidden: true })
+    expect(spans.value.get(3)?.get('category')).toEqual({ rowSpan: 1, hidden: false })
+    expect(spans.value.get(1)?.get('name')).toEqual({ rowSpan: 1, hidden: false })
+  })
+
+  it('does not span beyond visible items', () => {
+    const items = computed(() => [
+      { id: 1, category: 'A' },
+      { id: 2, category: 'A' },
+    ])
+
+    const spans = createRowSpanning({
+      items,
+      columns: ['category'],
+      itemKey: 'id',
+      rowSpanning: (item, column) => {
+        if (column === 'category' && item.category === 'A') return 5
+        return 1
+      },
+    })
+
+    expect(spans.value.get(1)?.get('category')?.rowSpan).toBe(2)
+  })
+})
diff --git a/packages/0/src/composables/createDataGrid/spanning.ts b/packages/0/src/composables/createDataGrid/spanning.ts
new file mode 100644
index 000000000..ba776bd46
--- /dev/null
+++ b/packages/0/src/composables/createDataGrid/spanning.ts
@@ -0,0 +1,77 @@
+/**
+ * @module createDataGrid/spanning
+ *
+ * @remarks
+ * Computes a row span map from visible items. For each cell, determines
+ * rowSpan and whether it's hidden (covered by a span from a previous row).
+ * Spans do not cross page boundaries.
+ */
+
+// Utilities
+import { computed } from 'vue'
+
+// Types
+import type { ID } from '#v0/types'
+import type { ComputedRef, Ref } from 'vue'
+
+export interface SpanEntry {
+  rowSpan: number
+  hidden: boolean
+}
+
+export interface RowSpanningOptions<T = Record<string, unknown>> {
+  items: Ref<readonly T[]> | ComputedRef<readonly T[]>
+  columns: readonly string[]
+  itemKey?: string
+  rowSpanning?: (item: T, column: string) => number
+}
+
+/**
+ * Computes a row span map from visible items.
+ *
+ * @param options Row spanning configuration
+ * @returns A computed map of item ID to column to SpanEntry
+ */
+export function createRowSpanning<T extends Record<string, unknown>> (
+  options: RowSpanningOptions<T>,
+): ComputedRef<Map<ID, Map<string, SpanEntry>>> {
+  const { items, columns, itemKey = 'id', rowSpanning } = options
+
+  return computed(() => {
+    const result = new Map<ID, Map<string, SpanEntry>>()
+
+    if (!rowSpanning) return result
+
+    const list = items.value
+
+    // Track which cells are covered by a span from a previous row
+    // covered[colIndex] = number of remaining rows to skip
+    const covered = Array.from<number>({ length: columns.length }).fill(0)
+
+    for (let row = 0; row < list.length; row++) {
+      const item = list[row]
+      const id = item[itemKey] as ID
+      const cells = new Map<string, SpanEntry>()
+
+      for (const [col, column] of columns.entries()) {
+        if (covered[col] > 0) {
+          cells.set(column, { rowSpan: 1, hidden: true })
+          covered[col]--
+        } else {
+          const span = Math.min(
+            Math.max(1, rowSpanning(item, column)),
+            list.length - row, // clamp to remaining rows
+          )
+          cells.set(column, { rowSpan: span, hidden: false })
+          if (span > 1) {
+            covered[col] = span - 1
+          }
+        }
+      }
+
+      result.set(id, cells)
+    }
+
+    return result
+  })
+}
diff --git a/packages/0/src/composables/createDataTable/index.bench.ts b/packages/0/src/composables/createDataTable/index.bench.ts
index f77c0f6a7..fbb0967a2 100644
--- a/packages/0/src/composables/createDataTable/index.bench.ts
+++ b/packages/0/src/composables/createDataTable/index.bench.ts
@@ -14,7 +14,7 @@ import { bench, describe } from 'vitest'
 import { createDataTable, ClientDataTableAdapter, VirtualDataTableAdapter } from './index'
 
 // Types
-import type { DataTableColumn, DataTableOptions } from './index'
+import type { DataTableColumn, DataTableOptions, DataTableTicketInput } from './index'
 
 // =============================================================================
 // FIXTURES - Created once, reused across read-only benchmarks
@@ -65,12 +65,20 @@ const COLUMNS_WITH_FILTER: DataTableColumn<BenchmarkRow>[] = [
 const SEARCH_QUERY_1K = 'User 500'
 const SEARCH_QUERY_10K = 'User 5000'
 
-function createTable (overrides: Partial<DataTableOptions<BenchmarkRow>> = {}) {
-  return createDataTable<BenchmarkRow>({
-    items: overrides.items ?? ROWS_1K,
-    columns: overrides.columns ?? COLUMNS,
-    ...overrides,
+function toInputs (rows: readonly BenchmarkRow[]): DataTableTicketInput<BenchmarkRow>[] {
+  return rows.map(value => ({ id: value.id, value }))
+}
+
+function createTable (
+  options: Partial<DataTableOptions<BenchmarkRow>> & { items?: readonly BenchmarkRow[] } = {},
+) {
+  const { items: rows = ROWS_1K, columns: cols = COLUMNS, ...rest } = options
+  const table = createDataTable<BenchmarkRow>({
+    columns: cols,
+    ...rest,
   })
+  table.onboard(toInputs(rows))
+  return table
 }
 
 // =============================================================================
diff --git a/packages/0/src/composables/createDataTable/index.test.ts b/packages/0/src/composables/createDataTable/index.test.ts
index d815c09b1..0875d0421 100644
--- a/packages/0/src/composables/createDataTable/index.test.ts
+++ b/packages/0/src/composables/createDataTable/index.test.ts
@@ -6,7 +6,7 @@ import { createDataTable, createDataTableContext, useDataTable, ServerDataTableA
 import { inject, nextTick, provide, ref } from 'vue'
 
 // Types
-import type { DataTableColumn, DataTableOptions } from './index'
+import type { DataTableColumn, DataTableOptions, DataTableTicketInput } from './index'
 
 vi.mock('vue', async () => {
   const actual = await vi.importActual('vue')
@@ -45,15 +45,61 @@ const columns: DataTableColumn<User>[] = [
   { key: 'active', title: 'Status' },
 ]
 
-function createTable (overrides: Partial<DataTableOptions<User>> = {}) {
-  return createDataTable<User>({
-    items: users,
+function toInputs<T extends { id: number }> (rows: readonly T[]): DataTableTicketInput<T & Record<string, unknown>>[] {
+  return rows.map(value => ({ id: value.id, value: value as T & Record<string, unknown> }))
+}
+
+function createTable (overrides: Partial<DataTableOptions<User>> = {}, rows: readonly User[] = users) {
+  const table = createDataTable<User>({
     columns,
     ...overrides,
   })
+  table.onboard(toInputs(rows))
+  return table
 }
 
 describe('createDataTable', () => {
+  describe('registry', () => {
+    it('should populate allItems from onboard', () => {
+      const table = createDataTable<User>({ columns })
+      expect(table.allItems.value.length).toBe(0)
+
+      table.onboard(toInputs(users))
+
+      expect(table.allItems.value.length).toBe(5)
+      expect(table.size).toBe(5)
+    })
+
+    it('should add a single row via register', () => {
+      const table = createDataTable<User>({ columns })
+      const ticket = table.register({ id: 1, value: users[0]! })
+
+      expect(table.allItems.value.length).toBe(1)
+      expect(table.allItems.value[0]).toBe(users[0])
+      expect(ticket.id).toBe(1)
+    })
+
+    it('should remove a row from allItems via unregister', () => {
+      const table = createTable()
+      expect(table.allItems.value.length).toBe(5)
+
+      table.unregister(1)
+
+      expect(table.allItems.value.length).toBe(4)
+      expect(table.allItems.value.find(item => item.id === 1)).toBeUndefined()
+    })
+
+    it('should wipe rows via clear', () => {
+      const table = createTable()
+      expect(table.allItems.value.length).toBe(5)
+
+      table.clear()
+
+      expect(table.allItems.value.length).toBe(0)
+      expect(table.size).toBe(0)
+    })
+  })
+
   describe('search', () => {
     it('should update query ref', () => {
       const table = createTable()
@@ -178,14 +224,14 @@ describe('createDataTable', () => {
     })
 
     it('should sort null and undefined values consistently', () => {
-      const items = [
+      const rows = [
         { id: 1, name: null, email: '', department: '', salary: 0, active: true },
         { id: 2, name: 'Bob', email: '', department: '', salary: 0, active: true },
         { id: 3, name: undefined, email: '', department: '', salary: 0, active: true },
         { id: 4, name: 'Alice', email: '', department: '', salary: 0, active: true },
       ] as unknown as User[]
 
-      const table = createTable({ items })
+      const table = createTable({}, rows)
       table.sort.toggle('name')
       const names = table.sortedItems.value.map(i => (i as User).name)
       // Non-null values sorted first, null/undefined grouped at end
@@ -611,10 +657,9 @@ describe('createDataTable', () => {
 
   describe('openAll with async items', () => {
     it('should auto-open groups when items arrive', async () => {
-      const items = ref<User[]>([])
-      const table = createTable({ items, groupBy: 'department', openAll: true })
+      const table = createDataTable<User>({ columns, groupBy: 'department', openAll: true })
       expect(table.grouping.groups.value.length).toBe(0)
-      items.value = [...users]
+      table.onboard(toInputs(users))
       await nextTick()
       expect(table.grouping.groups.value.length).toBe(3)
       expect(table.grouping.isOpen('Engineering')).toBe(true)
@@ -622,16 +667,14 @@ describe('createDataTable', () => {
     })
 
     it('should ignore empty watcher updates before items arrive', async () => {
-      const items = ref<User[]>([])
-      const table = createTable({ items, groupBy: 'department', openAll: true })
+      const table = createDataTable<User>({ columns, groupBy: 'department', openAll: true })
 
-      // Trigger watch with still-empty items (should be no-op via line 581)
-      items.value = []
+      // No rows yet — watcher should remain quiescent
       await nextTick()
       expect(table.grouping.groups.value.length).toBe(0)
 
       // Now provide actual items
-      items.value = [...users]
+      table.onboard(toInputs(users))
       await nextTick()
       expect(table.grouping.groups.value.length).toBe(3)
       expect(table.grouping.isOpen('Engineering')).toBe(true)
@@ -663,11 +706,13 @@ describe('createDataTable', () => {
 
   describe('selection with empty selectable scope', () => {
     it('should handle isAllSelected and isMixed with no selectable items', () => {
-      const table = createTable({
-        selectStrategy: 'all',
-        items: [{ id: 1, name: 'Alice', email: 'a@t.com', department: 'Eng', salary: 100_000, active: false }],
-        itemSelectable: 'active',
-      })
+      const table = createTable(
+        {
+          selectStrategy: 'all',
+          itemSelectable: 'active',
+        },
+        [{ id: 1, name: 'Alice', email: 'a@t.com', department: 'Eng', salary: 100_000, active: false }],
+      )
       expect(table.selection.isAllSelected.value).toBe(false)
       expect(table.selection.isMixed.value).toBe(false)
     })
@@ -675,11 +720,8 @@ describe('createDataTable', () => {
 
   describe('recursive columns', () => {
     it('should use leaf columns for the data pipeline', () => {
-      const table = createDataTable({
-        items: [
-          { id: 1, name: 'Alice', email: 'a@b.com', phone: '555' },
-          { id: 2, name: 'Bob', email: 'b@b.com', phone: '666' },
-        ],
+      type Row = { id: number, name: string, email: string, phone: string }
+      const table = createDataTable<Row>({
         columns: [
           { key: 'name', title: 'Name', sortable: true, filterable: true },
           {
@@ -692,6 +734,10 @@ describe('createDataTable', () => {
           },
         ],
       })
+      table.onboard([
+        { id: 1, value: { id: 1, name: 'Alice', email: 'a@b.com', phone: '555' } },
+        { id: 2, value: { id: 2, name: 'Bob', email: 'b@b.com', phone: '666' } },
+      ])
 
       expect(table.leaves).toHaveLength(3)
       expect(table.leaves.map(c => c.key)).toEqual(['name', 'email', 'phone'])
@@ -703,7 +749,6 @@ describe('createDataTable', () => {
 
     it('should expose resolved 2D headers', () => {
       const table = createDataTable({
-        items: [],
         columns: [
           { key: 'name', title: 'Name' },
           {
@@ -726,7 +771,6 @@ describe('createDataTable', () => {
 
     it('should produce single header row for flat columns', () => {
       const table = createDataTable({
-        items: [],
         columns: [
           { key: 'name', title: 'Name' },
           { key: 'email', title: 'Email' },
@@ -739,32 +783,17 @@ describe('createDataTable', () => {
   })
 
   describe('edge cases', () => {
-    it('should default itemValue to id', () => {
+    it('should select rows by registered ticket id', () => {
       const table = createTable()
       table.selection.select(1)
       expect(table.selection.isSelected(1)).toBe(true)
     })
 
-    it('should throw from rowId on non-string/number itemValue', () => {
-      type BadItem = { id: number, data: object }
-      const table = createDataTable<BadItem>({
-        items: [{ id: 1, data: { foo: 'bar' } }],
-        columns: [{ key: 'id', title: 'ID' }],
-        itemValue: 'data' as never,
-        selectStrategy: 'all',
-      })
-
-      // rowId is called internally when selectAll iterates items
-      expect(() => table.selection.selectAll()).toThrow('[v0:data-table]')
-    })
-
-    it('should update pipeline when reactive items source changes', () => {
-      const items = ref([...users])
-      const table = createTable({ items })
-
+    it('should update pipeline when rows change', () => {
+      const table = createTable()
       expect(table.allItems.value.length).toBe(5)
 
-      items.value = [...users, { id: 6, name: 'Frank', email: 'frank@test.com', department: 'Sales', salary: 90_000, active: true }]
+      table.register({ id: 6, value: { id: 6, name: 'Frank', email: 'frank@test.com', department: 'Sales', salary: 90_000, active: true } })
       expect(table.allItems.value.length).toBe(6)
     })
 
@@ -800,10 +829,7 @@ describe('createDataTableContext', () => {
   })
 
   it('should return trinity tuple', () => {
-    const trinity = createDataTableContext({
-      items: users,
-      columns,
-    })
+    const trinity = createDataTableContext<User>({ columns })
 
     expect(trinity).toHaveLength(3)
     const [use, prov, ctx] = trinity
@@ -812,13 +838,12 @@ describe('createDataTableContext', () => {
     expect(ctx).toBeDefined()
     expect(ctx.items).toBeDefined()
     expect(ctx.sort).toBeDefined()
+    expect(typeof ctx.register).toBe('function')
+    expect(typeof ctx.onboard).toBe('function')
   })
 
   it('should call Vue provide from provideDataTable', () => {
-    const [, provideDataTable, context] = createDataTableContext({
-      items: users,
-      columns,
-    })
+    const [, provideDataTable, context] = createDataTableContext<User>({ columns })
 
     provideDataTable()
     expect(mockProvide).toHaveBeenCalledWith('v0:data-table', context)
@@ -834,9 +859,8 @@ describe('createDataTableContext', () => {
   })
 
   it('should support custom namespace', () => {
-    const [, provideDataTable, context] = createDataTableContext({
+    const [, provideDataTable, context] = createDataTableContext<User>({
       namespace: 'custom:table',
-      items: users,
       columns,
     })
 
diff --git a/packages/0/src/composables/createDataTable/index.ts b/packages/0/src/composables/createDataTable/index.ts
index 4647a3f89..df326e31b 100644
--- a/packages/0/src/composables/createDataTable/index.ts
+++ b/packages/0/src/composables/createDataTable/index.ts
@@ -8,6 +8,10 @@
  * reimplementing their logic. Uses createGroup's tri-state for sort direction
  * and delegates the data pipeline (filter, sort, paginate) to an adapter.
  *
+ * Rows are managed via an internal registry — register / onboard / unregister.
+ * Row identity is the ticket id (caller-supplied or auto-generated). The
+ * factory no longer accepts an `items` option.
+ *
  * Key features:
  * - Adapter pattern for pipeline strategy (client, server, virtual)
  * - Sort via createGroup tri-state: selected=asc, mixed=desc, unselected=none
@@ -23,9 +27,12 @@
  * import { createDataTable } from '@vuetify/v0'
  *
  * const table = createDataTable({
- *   items: [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }],
  *   columns: [{ key: 'name', title: 'Name', sortable: true }],
  * })
+ * table.onboard([
+ *   { id: 1, value: { id: 1, name: 'Alice' } },
+ *   { id: 2, value: { id: 2, name: 'Bob' } },
+ * ])
  * table.sort.toggle('name')
  * ```
  */
@@ -33,6 +40,7 @@
 // Composables
 import { useContext } from '#v0/composables/createContext'
 import { createGroup } from '#v0/composables/createGroup'
+import { createRegistry } from '#v0/composables/createRegistry'
 import { createTrinity } from '#v0/composables/createTrinity'
 import { useLocale } from '#v0/composables/useLocale'
 
@@ -43,17 +51,18 @@ import { ClientDataTableAdapter } from './adapters/v0'
 import { extractLeaves, resolveHeaders } from './columns'
 
 // Utilities
-import { isNumber, isNullOrUndefined, isString } from '#v0/utilities'
+import { isNullOrUndefined } from '#v0/utilities'
 import { computed, shallowReactive, shallowReadonly, shallowRef, toRef, watch } from 'vue'
 
 // Types
 import type { FilterOptions } from '#v0/composables/createFilter'
 import type { PaginationContext, PaginationOptions } from '#v0/composables/createPagination'
+import type { RegistryContext, RegistryTicket, RegistryTicketInput } from '#v0/composables/createRegistry'
 import type { ContextTrinity } from '#v0/composables/createTrinity'
 import type { ID } from '#v0/types'
 import type { DataTableAdapter, SortDirection, SortEntry } from './adapters/adapter'
 import type { InternalHeader } from './columns'
-import type { MaybeRefOrGetter, Ref, ShallowRef } from 'vue'
+import type { Ref, ShallowRef } from 'vue'
 
 // Re-export adapter types
 export { DataTableAdapter } from './adapters'
@@ -70,6 +79,26 @@ export type KeysOfType<T, V> = { [K in keyof T]: T[K] extends V ? K : never }[ke
 
 export type SelectStrategy = 'single' | 'page' | 'all'
 
+/**
+ * Input shape passed to `register` / `onboard` on a data table.
+ *
+ * @template T Row value type.
+ *
+ * @example
+ * ```ts
+ * const table = createDataTable<User>({ columns })
+ * table.register({ id: user.id, value: user })
+ * ```
+ */
+export type DataTableTicketInput<T extends Record<string, unknown>> = RegistryTicketInput<T>
+
+/**
+ * Output ticket returned by `register` / `onboard` / `get`.
+ *
+ * @template T Row value type.
+ */
+export type DataTableTicket<T extends Record<string, unknown>> = RegistryTicket<T> & DataTableTicketInput<T>
+
 export interface DataTableColumn<T extends Record<string, unknown> = Record<string, unknown>> {
   readonly key: string
   readonly title?: string
@@ -166,12 +195,8 @@ export interface DataTableExpansion {
 }
 
 export interface DataTableOptions<T extends Record<string, unknown>> {
-  /** Source items */
-  items: MaybeRefOrGetter<T[]>
   /** Column definitions */
   columns: readonly DataTableColumn<T>[]
-  /** Property used as row identifier. Must resolve to a string or number value. @default 'id' */
-  itemValue?: KeysOfType<T, ID>
   /** Filter options (keys derived from columns) */
   filter?: Omit<FilterOptions, 'keys'>
   /** Pagination options (size derived from pipeline) */
@@ -198,7 +223,8 @@ export interface DataTableOptions<T extends Record<string, unknown>> {
   adapter?: DataTableAdapter<T>
 }
 
-export interface DataTableContext<T extends Record<string, unknown>> {
+export interface DataTableContext<T extends Record<string, unknown>>
+  extends RegistryContext<DataTableTicketInput<T>, DataTableTicket<T>> {
   /** Final paginated items for rendering */
   items: Readonly<Ref<readonly T[]>>
   /** Raw unprocessed items */
@@ -243,18 +269,22 @@ export interface DataTableContextOptions<T extends Record<string, unknown>> exte
  * Creates a data table instance with sort controls, selection, and an
  * adapter-driven data pipeline.
  *
+ * Rows are managed via the embedded registry: `register({ id, value })` for
+ * a single row, `onboard([...])` for bulk, `unregister(id)` / `clear()` for
+ * removal. Row identity is the ticket id; pass it explicitly when the caller
+ * wants to address rows by a domain identifier (e.g. selection toggles).
+ *
  * Must be called inside a component `setup()` or a Vue effect scope.
  * Calling at module scope in SSR environments causes request state leakage.
  *
  * @param options Data table options
- * @returns Data table context with pipeline stages and controls
+ * @returns Data table context with pipeline stages, controls, and registry surface
  *
  * @example
  * ```ts
  * import { createDataTable } from '@vuetify/v0'
  *
- * const table = createDataTable({
- *   items: users,
+ * const table = createDataTable<User>({
  *   columns: [
  *     { key: 'name', title: 'Name', sortable: true, filterable: true },
  *     { key: 'email', title: 'Email', sortable: true, filterable: true },
@@ -262,6 +292,9 @@ export interface DataTableContextOptions<T extends Record<string, unknown>> exte
  *   ],
  * })
  *
+ * // Register rows (id is the row identifier)
+ * table.onboard(users.map(value => ({ id: value.id, value })))
+ *
  * // Search
  * table.search('john')
  *
@@ -269,22 +302,19 @@ export interface DataTableContextOptions<T extends Record<string, unknown>> exte
  * table.sort.toggle('name')          // asc
  * table.sort.toggle('name')          // desc
  * table.sort.toggle('name')          // none
- * console.log(table.sort.columns.value) // [{ key: 'name', direction: 'asc' }]
  *
  * // Paginate
  * table.pagination.next()
  *
- * // Select rows
- * table.selection.toggle('user-1')
+ * // Select rows by ticket id
+ * table.selection.toggle(1)
  * ```
  */
 export function createDataTable<T extends Record<string, unknown>> (
   options: DataTableOptions<T>,
 ): DataTableContext<T> {
   const {
-    items: _items,
     columns,
-    itemValue = 'id' as KeysOfType<T, ID>,
     filter: filterOptions = {},
     pagination: paginationOptions = {},
     sortMultiple = false,
@@ -299,6 +329,11 @@ export function createDataTable<T extends Record<string, unknown>> (
     adapter = new ClientDataTableAdapter<T>(),
   } = options
 
+  const registry = createRegistry<DataTableTicketInput<T>, DataTableTicket<T>>({
+    events: true,
+    reactive: true,
+  })
+
   const _query = shallowRef('')
 
   function search (value: string) {
@@ -433,6 +468,11 @@ export function createDataTable<T extends Record<string, unknown>> (
     if (col.filter) filters[col.key] = col.filter
   }
 
+  // Pipeline source: row values projected from the registry's tickets in
+  // registration order. Adapters still read this as `context.items` and the
+  // existing pipeline (filter → sort → paginate) is unchanged.
+  const registryItems = toRef(() => registry.values().map(t => t.value as T))
+
   const {
     allItems,
     filteredItems,
@@ -443,7 +483,7 @@ export function createDataTable<T extends Record<string, unknown>> (
     loading = toRef(() => false) as Readonly<Ref<boolean>>,
     error = toRef(() => null) as Readonly<Ref<Error | null>>,
   } = adapter.setup({
-    items: _items,
+    items: registryItems,
     search: _query,
     filterableKeys: filterable,
     sortBy,
@@ -456,17 +496,21 @@ export function createDataTable<T extends Record<string, unknown>> (
 
   const selectedIds = shallowReactive(new Set<ID>())
 
+  // Reverse lookup: row → ticket id. Uses the registry's catalog (O(1)) so
+  // selection/expansion can derive ids from items returned by the pipeline.
   function rowId (item: T): ID {
-    const value = item[itemValue]
-    if (isString(value) || isNumber(value)) return value
-    throw new Error(`[v0:data-table] itemValue "${itemValue}" must resolve to a string or number`)
+    const ids = registry.browse(item)
+    if (isNullOrUndefined(ids) || ids.length === 0) {
+      throw new Error('[v0:data-table] item is not registered')
+    }
+    return ids[0]!
   }
 
   const selectableIds = computed(() => {
     if (!itemSelectable) return null
     const ids = new Set<ID>()
-    for (const item of allItems.value) {
-      if (item[itemSelectable]) ids.add(rowId(item))
+    for (const ticket of registry.values()) {
+      if (ticket.value[itemSelectable]) ids.add(ticket.id)
     }
     return ids
   })
@@ -602,16 +646,14 @@ export function createDataTable<T extends Record<string, unknown>> (
       opened.add(group.key)
     }
 
-    // Async items may not be available yet — watch for first non-empty groups
-    if (groups.value.length === 0) {
-      const stop = watch(groups, newGroups => {
-        if (newGroups.length === 0) return
-        for (const group of newGroups) {
-          opened.add(group.key)
-        }
-        stop()
-      })
-    }
+    // Rows may be registered after construction — watch for new groups and
+    // auto-open them as they appear. `flush: 'sync'` keeps openAll
+    // synchronous from the consumer's perspective.
+    watch(groups, newGroups => {
+      for (const group of newGroups) {
+        opened.add(group.key)
+      }
+    }, { flush: 'sync' })
   }
 
   const grouping: DataTableGrouping<T> = {
@@ -643,6 +685,7 @@ export function createDataTable<T extends Record<string, unknown>> (
   }
 
   return {
+    ...registry,
     items: visible,
     allItems,
     filteredItems,
@@ -660,6 +703,9 @@ export function createDataTable<T extends Record<string, unknown>> (
     total,
     loading,
     error,
+    get size () {
+      return registry.size
+    },
   }
 }
 
@@ -675,7 +721,6 @@ export function createDataTable<T extends Record<string, unknown>> (
  *
  * const [useDataTable, provideDataTable, context] = createDataTableContext({
  *   namespace: 'app:users',
- *   items: users,
  *   columns: [
  *     { key: 'name', title: 'Name', sortable: true },
  *   ],
@@ -683,6 +728,7 @@ export function createDataTable<T extends Record<string, unknown>> (
  *
  * // Parent component
  * provideDataTable()
+ * context.onboard(users.map(value => ({ id: value.id, value })))
  *
  * // Child component
  * const table = useDataTable()
diff --git a/packages/0/src/composables/index.ts b/packages/0/src/composables/index.ts
index 0f1363371..8fbf0c986 100644
--- a/packages/0/src/composables/index.ts
+++ b/packages/0/src/composables/index.ts
@@ -2,6 +2,7 @@
 export * from './createBreadcrumbs'
 export * from './createCombobox'
 export * from './createContext'
+export * from './createDataGrid'
 export * from './createDataTable'
 export * from './createFilter'
 export * from './createForm'