import { Meta, Canvas, ArgTypes } from '@storybook/addon-docs/blocks'
import * as ColumnCellStories from './columns.cell.stories.tsx'

<Meta title="pv-grid/Components/Grid/Columns/ColumnCellConfig" />

# ColumnCellConfig\<TDataModel, TMetaModel\>

Inside a [Column definition](?path=/docs/pv-grid-components-grid-columns-column--docs), you will control cell specific concerns under the `cell` property. These properties let you configure formatting, renderers and editors.

Please see [the Cell Rendering Guide](?path=/docs/pv-grid-guides-cell-rendering--docs) for an introduction to customizing data and cell display.

```tsx
import { Column } from '@planview/pv-grid'
type User = {
    id: string
    name: string
    email: string
    donationAmount: number
    donationCurrency: string
}
const columns: Column<User>[] = [
    {
        id: 'name',
        label: 'Name',
    },
    {
        id: 'donation',
        header: {
            align: 'right',
        },
        cell: {
            value({ row }) {
                return row.donationAmount
            },
            label({ row }) {
                return `${row.donationCurrency} ${row.donationAmount.toFixed(2)}`
            },
        },
    },
]
```

### Type Definition

<ArgTypes of={ColumnCellStories} />