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

<Meta title="pv-grid/Components/ListGrid/Columns/ListGridColumnCellConfig" />

# ListGridColumnCellConfig\<TDataModel, TMetaModel\>

Inside a [ListGridColumn definition](?path=/docs/pv-grid-components-listgrid-columns-listgridcolumn--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-1-cell-rendering--docs) for an introduction to customizing data and cell display.

```tsx
import { ListGridColumn, GridCellButton } from '@planview/pv-grid'
import { Cancel } from '@planview/pv-icons'
type User = {
    id: string
    name: string
}
const columns: ListGridColumn<User>[] = [
    {
        id: 'name',
        label: 'Name',
    },
    {
        id: 'actions',
        label: 'Actions',
        width: 36,

        cell: {
            Renderer({ tabIndex }) {
                return (
                    <GridCellButton
                        tabIndex={tabIndex}
                        icon={<Cancel />}
                        tooltip="Remove user"
                    />
                )
            },
        },
    },
]
```

### Type Definition

<ArgTypes of={ColumnCellStories} />