import { Meta, Canvas, Story } from '@storybook/addon-docs/blocks'
import * as TreeStories from './tree.stories'

<Meta title="pv-grid/Examples/Tree" />

## Tree Grid

A tree grid is just the normal `Grid` component with some extra metadata supplied about rows, and a column configured to show tree details.

To learn more about flat, tree, and grouped rows, read the [Row Structures section](https://design.planview.com/components/grid/grid-row#row-structures) of the [Grid row design specification](https://design.planview.com/components/grid/grid-row).

See the [Tree Grid guide](/docs/pv-grid-guides-3-tree-grids--docs) for technical details on how to configure a Tree Grid (including using `tree` vs `group` shown below).

### Tree behavior

In a tree grid, the parent and child entries are both treated as distinct entities. Selecting a parent does not automatically select its child. Trees default to closed unless behavior is controlled via `expandedRows` and `onExpandedChange` props.

<Canvas of={TreeStories.TreeGrid} />

### Group behavior

A variant of the tree grid uses `group` as the `type` for row metadata. Selecting a group selects all of its children instead treating the group itself as an entity. Groups are expanded by default unless behavior is controlled via `expandedRows` and `onExpandedChange` props.

<Canvas of={TreeStories.TreeGridGroup} />