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

<Meta of={ColumnStories} />

# Column configuration

Most configuration of the ListGrid will happen in the column definitions.
For the most basic tables, simply define a column with an `id` and `label`
where the `id` is the name of the property on the row where data can be
found.

You can provide a type that represents your data model to help with type safety.

```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"
                    />
                )
            },
        },
    },
]
```

### Demo

<Canvas of={ColumnStories.Default} />

### Type Definitions

- [ListGridColumn\<TDataModel, TMetaModel>](?path=/docs/pv-grid-components-listgrid-columns-listgridcolumn--docs)
- [ListGridColumnCellConfig\<TDataModel, TMetaModel>](?path=/docs/pv-grid-components-listgrid-columns-listgridcolumncellconfig--docs)