Focused Row

<script setup lang="ts">
const focusedRowId = ref<string | null>(null)
</script>

<template>
  <NuGrid
    v-model:focused-row-id="focusedRowId"
    :data="data"
    :columns="columns"
    :focus="{ mode: 'cell' }"
  />

  <p>Currently focused: {{ focusedRowId ?? 'None' }}</p>
</template>

<script setup lang="ts">
const gridRef = useTemplateRef('grid')

function focusRow(id: string) {
  gridRef.value?.focusRowById(id)
}

function focusWithScroll(id: string) {
  gridRef.value?.focusRowById(id, { align: 'top' })
}
</script>

<template>
  <UButton @click="focusRow('5')">Focus Row 5</UButton>

  <NuGrid
    ref="grid"
    v-model:focused-row-id="focusedRowId"
    :data="data"
    :columns="columns"
  />
</template>

// Scroll to bring row into view with minimum movement
gridRef.value?.focusRowById(id, { align: 'nearest' })

// Scroll row to top of viewport
gridRef.value?.focusRowById(id, { align: 'top' })

// Center row in viewport
gridRef.value?.focusRowById(id, { align: 'center' })

<template>
  <NuGrid
    v-model:focused-row-id="focusedRowId"
    :data="data"
    :columns="columns"
    :focus="{
      mode: 'cell',           // 'cell' or 'row'
      retain: true,           // Keep focus when clicking outside
      alignOnModel: 'top',    // Scroll alignment when focusedRowId changes
    }"
  />
</template>

<script setup lang="ts">
const focusedRowId = ref<string | null>(null)
const focusedColumnId = ref<string | null>(null)

function onFocusedCellChanged(event: { rowId: string | null, columnId: string | null }) {
  focusedColumnId.value = event.columnId
}
</script>

<template>
  <NuGrid
    v-model:focused-row-id="focusedRowId"
    :data="data"
    :columns="columns"
    :focus="{ mode: 'cell' }"
    @focused-cell-changed="onFocusedCellChanged"
  />

  <p>Row: {{ focusedRowId }}, Column: {{ focusedColumnId }}</p>
</template>

<script setup lang="ts">
import type { NuGridColumn } from '#nu-grid/types'

const gridRef = useTemplateRef('grid')
const focusedRowId = ref<string | null>(null)

const data = ref([
  { id: 1, name: 'Alice', department: 'Engineering' },
  { id: 2, name: 'Bob', department: 'Marketing' },
  // ... more rows
])

const columns: NuGridColumn<User>[] = [
  { accessorKey: 'id', header: 'ID' },
  { accessorKey: 'name', header: 'Name' },
  { accessorKey: 'department', header: 'Department' },
]

function focusFirst() {
  gridRef.value?.focusRowById('1', { align: 'top' })
}

function focusLast() {
  const lastId = String(data.value[data.value.length - 1]?.id)
  gridRef.value?.focusRowById(lastId, { align: 'top' })
}

function clearFocus() {
  focusedRowId.value = null
}
</script>

<template>
  <div class="flex gap-2 mb-4">
    <UButton @click="focusFirst">Focus First</UButton>
    <UButton @click="focusLast">Focus Last</UButton>
    <UButton @click="clearFocus">Clear Focus</UButton>
  </div>

  <NuGrid
    ref="grid"
    v-model:focused-row-id="focusedRowId"
    :data="data"
    :columns="columns"
    :focus="{ mode: 'cell', alignOnModel: 'top' }"
  />
</template>