ReactSheet#

import { ReactSheet } from '@tego/sheet';

function App() {
  return (
    <ReactSheet
      options={{
        mode: 'edit',
        showToolbar: true,
      }}
      onChange={(data) => console.log(data)}
    />
  );
}

interface Options {
  mode?: 'edit' | 'read';         // Edit mode or read-only mode
  showToolbar?: boolean;          // Show toolbar (default: true)
  showGrid?: boolean;             // Show grid lines (default: true)
  showContextmenu?: boolean;      // Enable right-click menu (default: true)
  showBottomBar?: boolean;        // Show sheet tabs (default: true)
  autoFocus?: boolean;            // Auto focus on mount
  view?: {
    height: () => number;         // View height function
    width: () => number;          // View width function
  };
  row?: {
    len: number;                  // Number of rows
    height: number;               // Default row height
  };
  col?: {
    len: number;                  // Number of columns
    width: number;                // Default column width
    indexWidth: number;           // Row index column width
    minWidth: number;             // Minimum column width
  };
  style?: {
    bgcolor: string;              // Default background color
    align: 'left' | 'center' | 'right';
    valign: 'top' | 'middle' | 'bottom';
    textwrap: boolean;
    strike: boolean;
    underline: boolean;
    color: string;                // Default text color
    font: {
      name: string;               // Font family
      size: number;               // Font size
      bold: boolean;
      italic: boolean;
    };
  };
  extendToolbar?: {               // Custom toolbar buttons
    left?: ExtendToolbarOption[];
    right?: ExtendToolbarOption[];
  };
}

<ReactSheet
  onChange={(data) => {
    // data is an array of sheet data
    console.log('Sheet changed:', data);
    // Save to backend, etc.
  }}
/>

<ReactSheet options={{ mode: 'read' }} />

<ReactSheet
  options={{
    view: {
      height: () => 600,
      width: () => 800,
    },
  }}
/>

<ReactSheet
  options={{
    style: {
      bgcolor: '#f5f5f5',
      align: 'center',
      valign: 'middle',
      font: {
        name: 'Arial',
        size: 12,
        bold: false,
        italic: false,
      },
      color: '#333333',
      textwrap: false,
      strike: false,
      underline: false,
    },
  }}
/>

<ReactSheet
  options={{
    showToolbar: false,
    showBottomBar: false,
  }}
/>