Skip to main content
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: 
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:
PropTypeDefaultDescription
minColsnumber26The minimum number of columns
minRowsnumber50The minimum number of rows
additionalEmptyColsnumber1The number of empty columns to maintain at the end of the table
additionalEmptyRowsnumber1The number of empty rows to maintain at the end of the table
readOnlybooleanfalseMakes the table read only
inertbooleanfalseMakes 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: 
<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.