Grid
Move through two-dimensional cells, select values, and enter edit mode.
Usage
Selectable
Move through a grid and select the active cell.
Move through a grid and select the active cell.
<!-- Grid / Selectable -->
<script setup lang="ts">
import { GridRoot, GridRow, GridCell } from '@sectile/vue/grid'
const rows = [['name', 'status'], ['Sectile', 'Ready']]
</script>
<template>
<GridRoot :rows="rows">
<GridRow v-for="row in rows" :key="row[0]">
<GridCell v-for="cell in row" :key="cell" :value="cell">{{ cell }}</GridCell>
</GridRow>
</GridRoot>
</template>Disabled wrap
Skip unavailable cells when movement wraps across a grid boundary.
Skip unavailable cells when movement wraps across a grid boundary.
<!-- Grid / Disabled Wrap -->
<script setup lang="ts">
import { GridRoot, GridRow, GridCell } from '@sectile/vue/grid'
const rows = [['name', 'status'], ['Sectile', 'Ready']]
</script>
<template>
<GridRoot :rows="rows">
<GridRow v-for="row in rows" :key="row[0]">
<GridCell v-for="cell in row" :key="cell" :value="cell">{{ cell }}</GridCell>
</GridRow>
</GridRoot>
</template>Editable
Move through grid cells and edit the active value without losing two-dimensional navigation.
Move through grid cells and edit the active value without losing two-dimensional navigation.
<!-- Grid / Editable -->
<script setup lang="ts">
import { GridRoot, GridRow, GridCell } from '@sectile/vue/grid'
const rows = [['name', 'status'], ['Sectile', 'Ready']]
</script>
<template>
<GridRoot :rows="rows">
<GridRow v-for="row in rows" :key="row[0]">
<GridCell v-for="cell in row" :key="cell" :value="cell">{{ cell }}</GridCell>
</GridRow>
</GridRoot>
</template>Controlled
Let the parent own the current value and apply accepted changes back to the component.
Let the parent own the current value and apply accepted changes back to the component.
<!-- Grid / Controlled -->
<script setup lang="ts">
import { GridRoot, GridRow, GridCell } from '@sectile/vue/grid'
const rows = [['name', 'status'], ['Sectile', 'Ready']]
</script>
<template>
<GridRoot :rows="rows">
<GridRow v-for="row in rows" :key="row[0]">
<GridCell v-for="cell in row" :key="cell" :value="cell">{{ cell }}</GridCell>
</GridRow>
</GridRoot>
</template>API
Vue package: @sectile/vue/grid
GridRootGridRowGridCell
Props
GridRootProps
asElement or component rendered for this part.
asChildWhether to merge this part into its single child instead of rendering a wrapper.
defaultEditModeInitial uncontrolled editing mode.
defaultHighlightedValueInitially highlighted value for uncontrolled state.
defaultValueInitial value used when the component owns its state.
disabledWhether interaction is unavailable.
disabledItemsItem values excluded from focus and selection.
editModeControlled editing mode.
highlightedValueValue currently highlighted for keyboard interaction.
labelAccessible name announced for the control.
modelValueCurrent value when state is controlled by the parent.
policiesBehavior policies that customize validation, movement, or selection.
readonlyWhether the value can be inspected but not changed.
rowsTwo-dimensional item structure managed by the component.
GridPartProps
asElement or component rendered for this part.
asChildWhether to merge this part into its single child instead of rendering a wrapper.
Slots
GridRootSlotProps
disabledWhether interaction is unavailable.
editModeCurrent editing mode.
highlightedValueValue currently highlighted for interaction.
readonlyWhether the value can be inspected but not changed.
valueCurrent value exposed by this contract.
GridCellSlotProps
disabledWhether interaction is unavailable.
editModeCurrent editing mode.
highlightedWhether this item is highlighted for interaction.
highlightedValueValue currently highlighted for interaction.
readonlyWhether the value can be inspected but not changed.
selectedWhether this item is selected.
valueCurrent value exposed by this contract.
Events
GridRoot
editCancelEmitted when editing is cancelled without committing.
editCommitEmitted when an edited cell value is committed.
editStartEmitted when a cell enters editing mode.
update:editModeEmitted when the requested edit mode changes.
update:highlightedValueEmitted when the requested highlighted value changes.
update:modelValueEmitted when the component requests a new controlled value.
Other types
GridValueChangeHandler
type GridValueChangeHandler = (value: string | null) => voidGridHighlightedValueChangeHandler
type GridHighlightedValueChangeHandler = (value: string | null) => voidGridEditModeChangeHandler
type GridEditModeChangeHandler = (value: GridEditMode) => voidGridEditStartHandler
type GridEditStartHandler = (value: string) => voidGridEditCommitHandler
type GridEditCommitHandler = (value: string) => voidGridEditCancelHandler
type GridEditCancelHandler = (value: string) => voidGridEditMode
type GridEditMode = 'navigation' | 'editing'GridPolicies
| Name | Type | Required |
|---|---|---|
eligible | (id: ID) => boolean | — |
boundary | AxisBoundaryPolicy | — |
maxScan | number | — |
Parts
Shared scope: [data-scope="grid"]. Combine it with a part selector to keep styles local to this component.
| Part | Selector | Role | Extra attributes |
|---|---|---|---|
root | [data-part="root"] | Defines the component boundary and owns its composed parts. | — |
row | [data-part="row"] | Groups cells that belong to one grid row. | — |
cell | [data-part="cell"] | Represents one navigable or selectable grid value. | — |
Keyboard interaction
| Key | Behavior |
|---|---|
| Arrow keys | Move between grid cells. |
| Space | Select the current cell or row. |
| Enter / F2 | Enter edit mode when the current cell supports editing. |
| Escape | Cancel the active edit. |
Accessibility
The labeled grid reports row and column counts while each cell exposes position, selection, and disabled state.
See the corresponding WAI-ARIA pattern for the host accessibility contract.