> ## Documentation Index
> Fetch the complete documentation index at: https://docs.graphy.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Data table

The `DataTable` component provides a spreadsheet-like interface for viewing and editing the data in your graph. It automatically connects to `GraphProvider` and syncs all changes with your graph configuration.

## Basic usage

Simply render the `DataTable` component inside a `GraphProvider`:

```tsx theme={null}
import type { GraphConfig } from '@graphysdk/core';
import { GraphProvider } from '@graphysdk/core';
import { DataTable } from '@graphysdk/editor';
import { useState } from 'react';

function MyEditor() {
  const [config, setConfig] = useState<GraphConfig>({
    data: {
      columns: [
        { key: 'month', label: 'Month' },
        { key: 'sales', label: 'Sales' },
      ],
      rows: [
        { month: 'Jan', sales: 1000 },
        { month: 'Feb', sales: 1200 },
        { month: 'Mar', sales: 1450 },
      ],
    },
  });

  return (
    <GraphProvider config={config} onChange={(update) => setConfig({ ...config, ...update })}>
      <div style={{ width: 800, height: 500 }}>
        <DataTable />
      </div>
    </GraphProvider>
  );
}
```

## Props

The `DataTable` component accepts optional configuration props:

| Prop                  | Type      | Default | Description                                                     |
| --------------------- | --------- | ------- | --------------------------------------------------------------- |
| `minCols`             | `number`  | `26`    | The minimum number of columns                                   |
| `minRows`             | `number`  | `50`    | The minimum number of rows                                      |
| `additionalEmptyCols` | `number`  | `1`     | The number of empty columns to maintain at the end of the table |
| `additionalEmptyRows` | `number`  | `1`     | The number of empty rows to maintain at the end of the table    |
| `readOnly`            | `boolean` | `false` | Makes the table read only                                       |
| `inert`               | `boolean` | `false` | Makes the table inert (no focus, clicks or hover events)        |

## Features

* **Responsive** – the table resizes to fit the container
* **Cell editing** – click, press Enter or start typing to edit
* **Range selection** – select multiple cells with mouse or Shift + arrows
* **Keyboard navigation** – arrow keys, Tab, Enter, Escape
* **Clipboard** – copy (Cmd/Ctrl+C), paste (Cmd/Ctrl+V), cut (Cmd/Ctrl+X)
* **Undo/redo** – Cmd/Ctrl+Z to undo, Cmd/Ctrl+Shift+Z to redo
* **Delete** – Backspace or Delete to clear cell values
* **State sync** – changes automatically update the graph config

## Integration with editor components

The `DataTable` works seamlessly with other editor components. You can combine it with editor panels and other controls:

```tsx theme={null}
<GraphProvider config={config} onChange={(update) => setConfig({ ...config, ...update })}>
  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr' }}>
    <Graph sizing={{ mode: 'responsive' }} />
    <GraphPanel />
    <DataTable />
  </div>
</GraphProvider>
```

## Low-level primitive

For more control, you can use `DataTablePrimitive` which doesn't connect to `GraphProvider` and requires manual state management. This is useful when you need a standalone table outside of the chart editing context.