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

<Meta of={ColumnStories} />

# Column configuration

Most configuration of the grid 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 { Column, GridCellDefault } from '@planview/pv-grid'
type User = {
    id: string
    name: string
    email: string
    donation: number
}
const columns: Column<User>[] = [
    {
        id: 'name',
        label: 'Name',
    },
    {
        id: 'email',
        label: 'Email',
    },
    {
        id: 'donation',
        header: {
            align: 'right',
        },
        cell: {
            Renderer({ tabIndex, value }) {
                return (
                    <GridCellDefault
                        numeric
                        tabIndex={tabIndex}
                        label={value}
                    />
                )
            },
        },
    },
]
```

### Demo

<Canvas of={ColumnStories.Default} />

### With Border

<Warning>
    Use sparingly when needed to separate a few columns. Do not apply enough
    borders to make the grid appear like a SpreadsheetGrid which adds vertical
    grid lines to indicate a different set of expectations for the user like
    range cell selection and copy/paste.
</Warning>

<Canvas of={ColumnStories.WithBorder} />

### Type Definitions

- [Column\<TDataModel, TMetaModel>](?path=/docs/pv-grid-components-grid-columns-column--docs)
- [ColumnHeaderConfig\<TDataModel>](?path=/docs/pv-grid-components-grid-columns-columnheaderconfig--docs)
- [ColumnFooterConfig\<TDataModel, TMetaModel>](?path=/docs/pv-grid-components-grid-columns-columnfooterconfig--docs)
- [ColumnCellConfig\<TDataModel, TMetaModel>](?path=/docs/pv-grid-components-grid-columns-columncellconfig--docs)