import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks'

import * as ColumnHeaderStories from './use-column-header.stories.tsx'

<Meta
    title="pv-grid/Hooks/useColumnHeader"
    parameters={{
        viewMode: 'docs',
    }}

/>

# useColumnHeader

Get column and sorting data for use in custom header Renderer.

`import { useColumnHeader } from '@planview/pv-grid'`

### Definition

```jsx
function useColumnHeader<T extends GridRowData>(columnId: string):
{
    column: Column<T>
    sort: GridColumnSort | undefined
    sortNumber: number
}
```

### Usage

```jsx
import { Grid, useColumnHeader } from '@planview/pv-grid'

type User = {
    id: number
    firstName: string
    lastName: string
    email: string
}


const MyComponent = () => {

    const rows = React.useMemo<User[]>(
        () => [
            {
                id: 9030,
                firstName: 'Carmela',
                lastName: 'Lubowitz',
                email: 'carmela.lubowitz@planview.com',
            },
            {
                id: 9031,
                firstName: 'Hailee',
                lastName: 'Homenick',
                email: 'hailee.homenick@planview.com',
            },
            {
                id: 9032,
                firstName: 'Alden',
                lastName: 'Hodkiewicz',
                email: 'alden.hodkiewicz@planview.com',
            },
        ],
        []
    )

    const columns: Column<User>[] = React.useMemo(
        () => [
            { id: 'firstName', label: 'First Name' },
            { id: 'lastName', label: 'Last Name' },
            {
                id: 'email',
                label: 'Email Address',
                width: 250,
                minWidth: 120,
                header: {
                    Renderer({ columnId }) {
                        const { sort, column } = useColumnHeader<User>(columnId)
                        const icon =
                            sort?.direction === 'asc' ? (
                                <ArrowDown color={color.iconNormal} />
                            ) : (
                                <ArrowUp color={color.iconNormal} />
                            )
                        return (
                            <CustomHeaderWrap>
                                {column.label}
                                <Tooltip text="User primary email">
                                    <Info />
                                </Tooltip>
                                {sort ? icon : null}
                            </CustomHeaderWrap>
                        )
                    },
                },
            },
        ],
        []
    )

    return <Grid columns={columns} rows={rows} />
}
```

<Story of={ColumnHeaderStories.CustomHeader} />