import { Meta, Story } from '@storybook/addon-docs/blocks'
import { Warning } from '../../../docs/helpers'

<Meta title="pv-grid/Components/Grid/Row Metadata" />

# Row Metadata

For some features of the grid, you will need to provide additional metadata for rows.

## Overview

### GridRowMeta\<TDataModel\>

```ts
{
    type?: 'tree' | 'group' | 'leaf'
    children?: TDataModel['id'][]
    preventDrag?: boolean
}

```

The properties have the following defaults:

- `type` defaults to `'leaf'`
- `children` defaults to an empty array
- `preventDrag` defaults to `true`. If `type: 'group'` is provided, then it defaults to `false`

### Why is this separate from row data?

Keeping metadata for the grid separate from your data should result in fewer clashes with the row's configuration properties and your data. It also assists with keeping individual rows as stable during re-renders as possible (immutable) while giving you a way to provide useful context about each row.

## Tree/Group

The most common reason to pass metadata into the grid is to provide hierarchy relationships between rows. Only rows where the default values are insufficient need to be provided.

```ts
// As an object
const meta: Record<string, GridRowMeta<User | Group>> = {
    admin: { type: 'group', children: ['123', '234'] },
    user: { type: 'group', children: ['345', '456'] },
}

// As a map
const meta: Map<string, GridRowMeta<User | Group>> = new Map([
    ['admin', { type: 'group', children: ['123', '234'] }],
    ['user', { type: 'group', children: ['345', '456'] }],
])
```

You can learn more about using metadata for trees by following the [Tree Grids Guide](/docs/pv-grid-guides-3-tree-grids--docs).

## Drag and Drop

When using [drag and drop](/docs/pv-grid-components-grid-row-drag--docs), if you want to prevent some rows from being dragged at all, you can supply metadata with `preventDrag: true` for those rows. All unspecified rows will be assumed to allow dragging.

```ts
const meta: Record<string, GridRowMeta<User>> = {
    123: { preventDrag: true },
    234: { preventDrag: true },
}
```