import { Meta, Canvas } from '@storybook/addon-docs/blocks'
import { Warning } from '../../../docs/helpers'
import * as GridStories from './index.stories.tsx'

<Meta title="pv-grid/Components/Grid/Column visibility" />

# Column visibility

The grid includes a contextual feature where the user can trigger a context menu by right-clicking on any column header row.
Within this menu, options are provided to show or hide specific columns, granting users control over the visibility of columns based on their preferences or specific needs. [Specs](https://design.planview.com/components/grid/grid-column#show-and-hide-columns)

## Enabling the show/hide columns feature

The show/hide columns feature is opt-in and enabled by using the `enableColumnVisibilityMenu` prop on the grid component.

## Configuring hideable columns and the default column visibility

The grid allows you to configure which columns are hideable and their default visibility state in the [Column](?path=/docs/pv-grid-components-grid-columns-column--docs) configuration.

The `hideable` property in the column configuration determines whether a column can be hidden or not. By default, all columns are hideable except columns with `tree` set to true.
To set a column as non-hideable, set the `hideable` property to `false`.
The `hidden` property in the column configuration determines whether a column is hidden by default or not. By default, all columns are visible.
To set a column as hidden by default, set the `hidden` property to `true`.

The example below demonstrates how to configure the `hideable` and `hidden` properties in the column configuration. The `id` column is set as non-hideable, while the `price` column is set as hidden by default.

```tsx
const MyGrid = () => {
    const columns = React.useMemo<Column<Row>[]>(
        () => [
            {
                id: 'id',
                label: 'ID',
                width: 100,
                hideable: false,
            },
            {
                id: 'title',
                label: 'Title',
                width: 400,
            },
            {
                id: 'price',
                label: 'Price',
                width: 200,
                hidden: true,
                header: {
                    align: 'right',
                },
                cell: {
                    label: ({ value }: { value: number }) =>
                        currencyFormatter.format(value),
                    Renderer: ({ label, tabIndex }) => (
                        <GridCellDefault
                            numeric
                            tabIndex={tabIndex}
                            label={label}
                        />
                    ),
                },
            },
        ],
        []
    )

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

<Canvas of={GridStories.ShowHideColumns} />