import { Meta, Controls, Canvas } from '@storybook/addon-docs/blocks'
import { Warning } from '../../../docs/helpers'
import * as SpreadsheetGridStories from './spreadsheet-grid.stories.tsx'

<Meta of={SpreadsheetGridStories} />

# SpreadsheetGrid (Experimental)

<Warning>
    **Important:** This component is currently **experimental**, and will be
    subject to breaking changes in future releases. Feel free to try it out and
    provide feedback to the Design System Team, but avoid using it in production
    applications at this time.
</Warning>

The `SpreadsheetGrid` component is a specialized, **experimental** version of the `Grid` component
that provides spreadsheet-like functionality, including range selection.

It is identical to the `Grid` component in most respects with these exceptions:

- Row selection is not available in this mode (`selectionMode` is forced to `"none"` internally).
- Editing requires double-clicking on an editable cell

<Canvas of={SpreadsheetGridStories.Default} />

## Props

This component supports all of `Grid` props with the exception of these props:

- `selection`
- `selectionMode`
- `onSelectionChange`

See [the Grid documentation](/?path=/docs/pv-grid-components-grid--docs) for the full list of props.

Additionally, `SpreadsheetGrid` supports the following props not available on `Grid` (`ref` is available on Grid, but it has a different type):

<Controls
    include={[
        'ref',
        'rangeSelection',
        'onRangeSelectionChange',
        'onRangeCopy',
        'onBulkCellChange',
    ]}
/>

## Editable

Editing cells works the same as the normal `Grid` component, but requires double-clicking on an editable cell to start editing. When navigating with the keyboard, pressing `Enter` will also start editing the current cell.

<Canvas of={SpreadsheetGridStories.Editable} />