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';         // 编辑模式或只读模式
  showToolbar?: boolean;          // 显示工具栏（默认: true）
  showGrid?: boolean;             // 显示网格线（默认: true）
  showContextmenu?: boolean;      // 启用右键菜单（默认: true）
  showBottomBar?: boolean;        // 显示表格标签栏（默认: true）
  autoFocus?: boolean;            // 挂载时自动聚焦
  view?: {
    height: () => number;         // 视图高度函数
    width: () => number;          // 视图宽度函数
  };
  row?: {
    len: number;                  // 行数
    height: number;               // 默认行高
  };
  col?: {
    len: number;                  // 列数
    width: number;                // 默认列宽
    indexWidth: number;           // 行索引列宽度
    minWidth: number;             // 最小列宽
  };
  style?: {
    bgcolor: string;              // 默认背景色
    align: 'left' | 'center' | 'right';
    valign: 'top' | 'middle' | 'bottom';
    textwrap: boolean;
    strike: boolean;
    underline: boolean;
    color: string;                // 默认文字颜色
    font: {
      name: string;               // 字体
      size: number;               // 字号
      bold: boolean;
      italic: boolean;
    };
  };
  extendToolbar?: {               // 自定义工具栏按钮
    left?: ExtendToolbarOption[];
    right?: ExtendToolbarOption[];
  };
}

<ReactSheet
  onChange={(data) => {
    // data 是表格数据数组
    console.log('表格变化:', data);
    // 保存到后端等操作
  }}
/>

<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,
  }}
/>