Tree Grid

Organize and edit nested resources without losing two-dimensional grid navigation.

Usage

Expanded rows

Inspect a project inventory whose nested applications and features remain visibly connected to their parents.

Project inventoryProduction workspace

4 resources

Commerce platformWorkspace

Platform team

Healthy

StorefrontApplication

Mina Kim

Modified

Checkout flowFeature

Alex Chen

In review

DocumentationContent

Technical writing

Published

<!-- Tree Grid / Expanded -->
<script setup lang="ts">
import { reactive } from 'vue'
import { TreeGridCell, TreeGridDisclosure, TreeGridEditor, TreeGridRoot, TreeGridRow } from '@sectile/vue/tree-grid'

const rows = [
  { id: 'platform', parentID: null, cells: ['platform-name', 'platform-owner', 'platform-status'] },
  { id: 'storefront', parentID: 'platform', cells: ['storefront-name', 'storefront-owner', 'storefront-status'] },
  { id: 'checkout', parentID: 'storefront', cells: ['checkout-name', 'checkout-owner', 'checkout-status'] },
]
const values = reactive(new Map([
  ['platform-name', 'Commerce platform'], ['platform-owner', 'Platform team'], ['platform-status', 'Healthy'],
  ['storefront-name', 'Storefront'], ['storefront-owner', 'Mina Kim'], ['storefront-status', 'Modified'],
  ['checkout-name', 'Checkout flow'], ['checkout-owner', 'Alex Chen'], ['checkout-status', 'In review'],
]))
const valueFor = (id: string) => values.get(id) ?? ''
const updateValue = (id: string, value: string) => values.set(id, value)
</script>

<template>
  <TreeGridRoot
    :rows="rows"
    :get-cell-value="valueFor"
    :set-cell-value="updateValue"
    :default-expanded-value="['platform', 'storefront']"
    aria-label="Project inventory"
    v-slot="{ expandedValue }"
  >
    <div role="row"><span role="columnheader">Resource</span><span role="columnheader">Owner</span><span role="columnheader">Status</span></div>
    <TreeGridRow value="platform" :row-index="1" :expandable="true">
      <TreeGridCell value="platform-name" :column-index="1">
        <TreeGridDisclosure for="platform">Toggle</TreeGridDisclosure>
        {{ valueFor('platform-name') }}
      </TreeGridCell>
      <TreeGridCell value="platform-owner" :column-index="2" v-slot="{ editing }">
        <span v-if="!editing">{{ valueFor('platform-owner') }}</span>
        <TreeGridEditor for="platform-owner" label="Commerce platform owner" />
      </TreeGridCell>
      <TreeGridCell value="platform-status" :column-index="3">{{ valueFor('platform-status') }}</TreeGridCell>
    </TreeGridRow>
    <TreeGridRow v-if="expandedValue.includes('platform')" value="storefront" :row-index="2" :level="2" :expandable="true">
      <TreeGridCell value="storefront-name" :column-index="1">
        <TreeGridDisclosure for="storefront">Toggle</TreeGridDisclosure>
        {{ valueFor('storefront-name') }}
      </TreeGridCell>
      <TreeGridCell value="storefront-owner" :column-index="2" v-slot="{ editing }">
        <span v-if="!editing">{{ valueFor('storefront-owner') }}</span>
        <TreeGridEditor for="storefront-owner" label="Storefront owner" />
      </TreeGridCell>
      <TreeGridCell value="storefront-status" :column-index="3">{{ valueFor('storefront-status') }}</TreeGridCell>
    </TreeGridRow>
    <TreeGridRow v-if="expandedValue.includes('storefront')" value="checkout" :row-index="3" :level="3">
      <TreeGridCell value="checkout-name" :column-index="1">{{ valueFor('checkout-name') }}</TreeGridCell>
      <TreeGridCell value="checkout-owner" :column-index="2" v-slot="{ editing }">
        <span v-if="!editing">{{ valueFor('checkout-owner') }}</span>
        <TreeGridEditor for="checkout-owner" label="Checkout owner" />
      </TreeGridCell>
      <TreeGridCell value="checkout-status" :column-index="3">{{ valueFor('checkout-status') }}</TreeGridCell>
    </TreeGridRow>
  </TreeGridRoot>
</template>

Editable cells

Edit the owner of a nested resource without leaving keyboard-based row and column navigation.

Project inventoryProduction workspace

4 resources

Commerce platformWorkspace

Platform team

Healthy

StorefrontApplication

Modified

Checkout flowFeature

Alex Chen

In review

DocumentationContent

Technical writing

Published

<!-- Tree Grid / Editable -->
<script setup lang="ts">
import { reactive } from 'vue'
import { TreeGridCell, TreeGridDisclosure, TreeGridEditor, TreeGridRoot, TreeGridRow } from '@sectile/vue/tree-grid'

const rows = [
  { id: 'platform', parentID: null, cells: ['platform-name', 'platform-owner', 'platform-status'] },
  { id: 'storefront', parentID: 'platform', cells: ['storefront-name', 'storefront-owner', 'storefront-status'] },
  { id: 'checkout', parentID: 'storefront', cells: ['checkout-name', 'checkout-owner', 'checkout-status'] },
]
const values = reactive(new Map([
  ['platform-name', 'Commerce platform'], ['platform-owner', 'Platform team'], ['platform-status', 'Healthy'],
  ['storefront-name', 'Storefront'], ['storefront-owner', 'Mina Kim'], ['storefront-status', 'Modified'],
  ['checkout-name', 'Checkout flow'], ['checkout-owner', 'Alex Chen'], ['checkout-status', 'In review'],
]))
const valueFor = (id: string) => values.get(id) ?? ''
const updateValue = (id: string, value: string) => values.set(id, value)
</script>

<template>
  <TreeGridRoot
    :rows="rows"
    :get-cell-value="valueFor"
    :set-cell-value="updateValue"
    :default-expanded-value="['platform', 'storefront']"
    default-highlighted-value="storefront-owner"
    default-edit-mode="editing"
    aria-label="Project inventory"
    v-slot="{ expandedValue }"
  >
    <div role="row"><span role="columnheader">Resource</span><span role="columnheader">Owner</span><span role="columnheader">Status</span></div>
    <TreeGridRow value="platform" :row-index="1" :expandable="true">
      <TreeGridCell value="platform-name" :column-index="1">
        <TreeGridDisclosure for="platform">Toggle</TreeGridDisclosure>
        {{ valueFor('platform-name') }}
      </TreeGridCell>
      <TreeGridCell value="platform-owner" :column-index="2" v-slot="{ editing }">
        <span v-if="!editing">{{ valueFor('platform-owner') }}</span>
        <TreeGridEditor for="platform-owner" label="Commerce platform owner" />
      </TreeGridCell>
      <TreeGridCell value="platform-status" :column-index="3">{{ valueFor('platform-status') }}</TreeGridCell>
    </TreeGridRow>
    <TreeGridRow v-if="expandedValue.includes('platform')" value="storefront" :row-index="2" :level="2" :expandable="true">
      <TreeGridCell value="storefront-name" :column-index="1">
        <TreeGridDisclosure for="storefront">Toggle</TreeGridDisclosure>
        {{ valueFor('storefront-name') }}
      </TreeGridCell>
      <TreeGridCell value="storefront-owner" :column-index="2" v-slot="{ editing }">
        <span v-if="!editing">{{ valueFor('storefront-owner') }}</span>
        <TreeGridEditor for="storefront-owner" label="Storefront owner" />
      </TreeGridCell>
      <TreeGridCell value="storefront-status" :column-index="3">{{ valueFor('storefront-status') }}</TreeGridCell>
    </TreeGridRow>
    <TreeGridRow v-if="expandedValue.includes('storefront')" value="checkout" :row-index="3" :level="3">
      <TreeGridCell value="checkout-name" :column-index="1">{{ valueFor('checkout-name') }}</TreeGridCell>
      <TreeGridCell value="checkout-owner" :column-index="2" v-slot="{ editing }">
        <span v-if="!editing">{{ valueFor('checkout-owner') }}</span>
        <TreeGridEditor for="checkout-owner" label="Checkout owner" />
      </TreeGridCell>
      <TreeGridCell value="checkout-status" :column-index="3">{{ valueFor('checkout-status') }}</TreeGridCell>
    </TreeGridRow>
  </TreeGridRoot>
</template>

Controlled

Let the parent own the current value and apply accepted changes back to the component.

Project inventoryProduction workspace

4 resources

Commerce platformWorkspace

Platform team

Healthy

StorefrontApplication

Mina Kim

Modified

Checkout flowFeature

Alex Chen

In review

DocumentationContent

Technical writing

Published

<!-- Tree Grid / Controlled -->
<script setup lang="ts">
import { reactive } from 'vue'
import { TreeGridCell, TreeGridDisclosure, TreeGridEditor, TreeGridRoot, TreeGridRow } from '@sectile/vue/tree-grid'

const rows = [
  { id: 'platform', parentID: null, cells: ['platform-name', 'platform-owner', 'platform-status'] },
  { id: 'storefront', parentID: 'platform', cells: ['storefront-name', 'storefront-owner', 'storefront-status'] },
  { id: 'checkout', parentID: 'storefront', cells: ['checkout-name', 'checkout-owner', 'checkout-status'] },
]
const values = reactive(new Map([
  ['platform-name', 'Commerce platform'], ['platform-owner', 'Platform team'], ['platform-status', 'Healthy'],
  ['storefront-name', 'Storefront'], ['storefront-owner', 'Mina Kim'], ['storefront-status', 'Modified'],
  ['checkout-name', 'Checkout flow'], ['checkout-owner', 'Alex Chen'], ['checkout-status', 'In review'],
]))
const valueFor = (id: string) => values.get(id) ?? ''
const updateValue = (id: string, value: string) => values.set(id, value)
</script>

<template>
  <TreeGridRoot
    :rows="rows"
    :get-cell-value="valueFor"
    :set-cell-value="updateValue"
    :default-expanded-value="['platform', 'storefront']"
    aria-label="Project inventory"
    v-slot="{ expandedValue }"
  >
    <div role="row"><span role="columnheader">Resource</span><span role="columnheader">Owner</span><span role="columnheader">Status</span></div>
    <TreeGridRow value="platform" :row-index="1" :expandable="true">
      <TreeGridCell value="platform-name" :column-index="1">
        <TreeGridDisclosure for="platform">Toggle</TreeGridDisclosure>
        {{ valueFor('platform-name') }}
      </TreeGridCell>
      <TreeGridCell value="platform-owner" :column-index="2" v-slot="{ editing }">
        <span v-if="!editing">{{ valueFor('platform-owner') }}</span>
        <TreeGridEditor for="platform-owner" label="Commerce platform owner" />
      </TreeGridCell>
      <TreeGridCell value="platform-status" :column-index="3">{{ valueFor('platform-status') }}</TreeGridCell>
    </TreeGridRow>
    <TreeGridRow v-if="expandedValue.includes('platform')" value="storefront" :row-index="2" :level="2" :expandable="true">
      <TreeGridCell value="storefront-name" :column-index="1">
        <TreeGridDisclosure for="storefront">Toggle</TreeGridDisclosure>
        {{ valueFor('storefront-name') }}
      </TreeGridCell>
      <TreeGridCell value="storefront-owner" :column-index="2" v-slot="{ editing }">
        <span v-if="!editing">{{ valueFor('storefront-owner') }}</span>
        <TreeGridEditor for="storefront-owner" label="Storefront owner" />
      </TreeGridCell>
      <TreeGridCell value="storefront-status" :column-index="3">{{ valueFor('storefront-status') }}</TreeGridCell>
    </TreeGridRow>
    <TreeGridRow v-if="expandedValue.includes('storefront')" value="checkout" :row-index="3" :level="3">
      <TreeGridCell value="checkout-name" :column-index="1">{{ valueFor('checkout-name') }}</TreeGridCell>
      <TreeGridCell value="checkout-owner" :column-index="2" v-slot="{ editing }">
        <span v-if="!editing">{{ valueFor('checkout-owner') }}</span>
        <TreeGridEditor for="checkout-owner" label="Checkout owner" />
      </TreeGridCell>
      <TreeGridCell value="checkout-status" :column-index="3">{{ valueFor('checkout-status') }}</TreeGridCell>
    </TreeGridRow>
  </TreeGridRoot>
</template>

API

Vue package: @sectile/vue/tree-grid

Components

TreeGridRoot
TreeGridRow
TreeGridCell
TreeGridDisclosure
TreeGridEditor

Props

`TreeGridRootProps`

as: TypePrimitiveAsDefault'div'
Element or component rendered for this part.
asChild: TypebooleanDefaultfalse
Whether to merge this part into its single child instead of rendering a wrapper.
defaultEditMode: TypeTreeGridEditModeDefault'navigation'
Initial uncontrolled editing mode.
defaultExpandedValue: Typereadonly string[]Default[]
Initially expanded values for uncontrolled state.
defaultHighlightedValue: Typestring | nullDefaultnull
Initially highlighted value for uncontrolled state.
defaultValue: Typestring | nullDefaultnull
Initial value used when the component owns its state.
disabled: TypebooleanDefaultfalse
Whether interaction is unavailable.
editMode: TypeTreeGridEditModeDefaultundefined
Controlled editing mode.
expandedValue: Typereadonly string[]Defaultundefined
Controlled values whose descendants are visible.
getCellValue: Type(id: string) => stringDefaultRequired
Reads the editable value represented by a grid cell.
highlightedValue: Typestring | nullDefaultundefined
Value currently highlighted for keyboard interaction.
modelValue: Typestring | nullDefaultundefined
Current value when state is controlled by the parent.
policies: TypeTreeGridPolicies<string>Defaultundefined
Behavior policies that customize validation, movement, or selection.
readonly: TypebooleanDefaultfalse
Whether the value can be inspected but not changed.
rows: Typereadonly TreeGridRowInput<string, string>[]DefaultRequired
Two-dimensional item structure managed by the component.
setCellValue: Type(id: string, value: string) => voidDefaultRequired
Commits a new editable value for a grid cell.

`TreeGridPartProps`

as: TypePrimitiveAsDefaultVaries by part
Element or component rendered for this part.
asChild: TypebooleanDefaultfalse
Whether to merge this part into its single child instead of rendering a wrapper.

Slots

`TreeGridRootSlotProps`

disabled: Typeboolean
Whether interaction is unavailable.
editMode: TypeTreeGridEditMode
Current editing mode.
expandedValue: Typereadonly string[]
Values whose descendants are visible.
highlightedValue: Typestring | null
Value currently highlighted for interaction.
readonly: Typeboolean
Whether the value can be inspected but not changed.
value: Typestring | null
Current value exposed by this contract.

`TreeGridRowSlotProps`

disabled: Typeboolean
Whether interaction is unavailable.
editMode: TypeTreeGridEditMode
Current editing mode.
expanded: Typeboolean
Whether descendants are visible.
expandedValue: Typereadonly string[]
Values whose descendants are visible.
highlightedValue: Typestring | null
Value currently highlighted for interaction.
readonly: Typeboolean
Whether the value can be inspected but not changed.
value: Typestring
Current value exposed by this contract.

`TreeGridCellSlotProps`

disabled: Typeboolean
Whether interaction is unavailable.
editing: Typeboolean
Whether editing is active.
editMode: TypeTreeGridEditMode
Current editing mode.
expandedValue: Typereadonly string[]
Values whose descendants are visible.
highlighted: Typeboolean
Whether this item is highlighted for interaction.
highlightedValue: Typestring | null
Value currently highlighted for interaction.
readonly: Typeboolean
Whether the value can be inspected but not changed.
selected: Typeboolean
Whether this item is selected.
value: Typestring
Current value exposed by this contract.

Events

`TreeGridRoot`

update:editMode: PayloadTreeGridEditMode
Emitted when the requested edit mode changes.
update:expandedValue: Payloadreadonly string[]
Emitted when the requested expanded values change.
update:highlightedValue: Payloadstring | null
Emitted when the requested highlighted value changes.
update:modelValue: Payloadstring | null
Emitted when the component requests a new controlled value.

Other types

`TreeGridCellValueResolver`

type TreeGridCellValueResolver = NonNullable<TreeGridRootProps['getCellValue']>

`TreeGridCellValueSetter`

type TreeGridCellValueSetter = NonNullable<TreeGridRootProps['setCellValue']>

`TreeGridValueChangeHandler`

type TreeGridValueChangeHandler = (value: string | null) => void

`TreeGridExpandedValueChangeHandler`

type TreeGridExpandedValueChangeHandler = (value: readonly string[]) => void

`TreeGridHighlightedValueChangeHandler`

type TreeGridHighlightedValueChangeHandler = (value: string | null) => void

`TreeGridEditModeChangeHandler`

type TreeGridEditModeChangeHandler = (value: TreeGridEditMode) => void

`TreeGridEditMode`

type TreeGridEditMode = 'navigation' | 'editing'

`TreeGridPolicies`

Name	Type	Required
`eligible`	`(id: CellID) => boolean`	—
`boundary`	`AxisBoundaryPolicy`	—
`maxScan`	`number`	—

`TreeGridRowInput`

Name	Type	Required
`id`	`RowID`	Yes
`parentID`	`RowID \| null`	Yes
`cells`	`readonly (CellID \| null)[]`	Yes

Parts

Shared scope: [data-scope="tree-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.	—
`disclosure`	`[data-part="disclosure"]`	Expands or collapses child content.	—
`editor`	`[data-part="editor"]`	Edits the active grid or tree-grid cell.	—

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

Rows and cells expose hierarchy, position, expansion, selection, and edit state inside a labeled grid.

See the corresponding WAI-ARIA pattern for the host accessibility contract.

Tree Grid ​

Usage ​

Expanded rows ​

Editable cells ​

Controlled ​

API ​

Props ​

TreeGridRootProps ​

TreeGridPartProps ​

Slots ​

TreeGridRootSlotProps ​

TreeGridRowSlotProps ​

TreeGridCellSlotProps ​

Events ​

TreeGridRoot ​

Other types ​

TreeGridCellValueResolver ​

TreeGridCellValueSetter ​

TreeGridValueChangeHandler ​

TreeGridExpandedValueChangeHandler ​

TreeGridHighlightedValueChangeHandler ​

TreeGridEditModeChangeHandler ​

TreeGridEditMode ​

TreeGridPolicies ​

TreeGridRowInput ​

Parts ​

Keyboard interaction ​

Accessibility ​

Tree Grid

Usage

Expanded rows

Editable cells

Controlled

API

Props

`TreeGridRootProps`

`TreeGridPartProps`

Slots

`TreeGridRootSlotProps`

`TreeGridRowSlotProps`

`TreeGridCellSlotProps`

Events

`TreeGridRoot`

Other types

`TreeGridCellValueResolver`

`TreeGridCellValueSetter`

`TreeGridValueChangeHandler`

`TreeGridExpandedValueChangeHandler`

`TreeGridHighlightedValueChangeHandler`

`TreeGridEditModeChangeHandler`

`TreeGridEditMode`

`TreeGridPolicies`

`TreeGridRowInput`

Parts

Keyboard interaction

Accessibility