# kgsheet-for-react

> Web版本excel的React组件

Latest version **0.3.9** (published 2023-04-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install kgsheet-for-react
pnpm add kgsheet-for-react
yarn add kgsheet-for-react
bun add kgsheet-for-react
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.9 |
| Published | 2023-04-05 |
| First published | 2023-01-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 159.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 129 |
| Author | Yukaige |
| Maintainers | ykg3211 |

## Links

- npm: https://www.npmjs.com/package/kgsheet-for-react
- Repository: https://github.com/ykg3211/KGSheet
- Homepage: https://github.com/ykg3211/KGSheet.git
- Issues: https://github.com/ykg3211/KGSheet/issues
- npm.io page: https://npm.io/package/kgsheet-for-react

## Dependencies (5)

- [antd](https://npm.io/package/antd.md) ^4.23.2
- [react](https://npm.io/package/react.md) >=16
- [kgsheet](https://npm.io/package/kgsheet.md) ^0.3.9
- [react-dom](https://npm.io/package/react-dom.md) >=16
- [react-router-dom](https://npm.io/package/react-router-dom.md) >4

## Recent versions

- 0.3.9 (latest) — 2023-04-05
- 0.3.8 — 2023-02-13
- 0.3.7 — 2023-02-12
- 0.3.6 — 2023-02-05
- 0.3.5 — 2023-01-17
- 0.3.4 — 2023-01-14
- 0.3.3 — 2023-01-14
- 0.3.2 — 2023-01-14
- 0.2.0 — 2023-01-14
- 0.1.1 — 2023-01-14
- 0.1.0 — 2023-01-14
- 0.0.4 — 2023-01-09
- 0.0.3 — 2023-01-09
- 0.0.2 — 2023-01-09
- 0.0.1 — 2023-01-08

## README

# `KGSheet-for-react`

## 介绍

一个开源的 Canvas 绘制的高性能 Sheet 组件（React）。
[在线 demo](http://ykgykg.fun/)

### React

```typescript
import Main, { createDefaultData, RefType, SheetSetting } from 'kgsheet-for-react';
import React, { useRef, useState } from 'react';

function Sheet() {
  const [defaultData] = useState(createDefaultData(30, 100));
  const sheetRef = useRef<RefType>(null);
  const sheetConfig = useRef<SheetSetting>({
    darkMode: 'auto',
  });

  return (
    <>
      <Main ref={sheetRef} defaultData={defaultData} config={sheetConfig.current} />
      <div
        onClick={() => {
          console.log(sheetRef.current?.getData?.());
        }}>
        点击获取Sheet的Data
      </div>
    </>
  );
}

export default Sheet;
```

### Type

##### SheetSettingSheetSetting

<!-- prettier-ignore -->
| 参数 | 说明 | 类型 | 默认值 | 是否必填 |
| --- | --- | --- | --- | --- |
| devMode | 开发模式，开启之后会输出日志，方便调试 | `boolean` | `false` | false
| darkMode | 黑夜模式，支持黑、白和跟随系统 | `boolean ｜ 'auto'` | `'auto'` | false
| readOnly | 是否开启只读  | `boolean` | `false` | false 
| message | 表格输出的一些提示方法，用户可以自定义设置 | (v: { type: 'info' \| 'success' \| 'error' \| 'warning'; message: string }) => void | `false` | false 
| barSetting | sheet顶部功能区配置 | `Array<ToolsGroupConfig<ToolsEnum>>` |  | false

##### ToolsGroupConfig

> 补充上方 barSetting 的类型
> 是一个二维数组，最多支持两行按钮

<!-- prettier-ignore -->
```typescript
interface ToolsGroupConfig<T> {
  tools: T[][];
}

enum ToolsEnum {
  REVERT = 'revert', // 撤销
  ANTI_REVERT = 'anti_revert', // 反撤销
  FONT_SIZE = 'font_size', // 文本字体大小
  DARK_MODE = 'dark_mode', // 黑夜模式切换
  CLEAR_STYLE = 'clear_style', // 清除样式
  FONT_WEIGHT = 'font_weight', // 字体粗细
  FONT_DELETE_LINE = 'font_delete_line', // 删除线
  FONT_ITALIC = 'font_italic', // 斜体
  FONT_UNDER_LINE = 'font_under_line', // 下划线
  COMBINE_CELLS = 'combine_cells', // 合并单元格
  TEXT_ALIGN_LEFT = 'text_align_left', // 文字左对齐
  TEXT_ALIGN_CENTER = 'text_align_center', // 文字居中
  TEXT_ALIGN_RIGHT = 'text_align_right', // 文字右对齐
  FONT_COLOR = 'font_color', // 子体颜色
  BACKGROUND_COLOR = 'background_color', // 背景颜色
}
```

参考默认值：

```typescript
const defaultToolBarConfig: BarSettingType = [
  {
    tools: [[ToolsEnum.REVERT, ToolsEnum.ANTI_REVERT, ToolsEnum.CLEAR_STYLE]],
  },
  {
    tools: [
      [ToolsEnum.FONT_SIZE, ToolsEnum.FONT_COLOR, ToolsEnum.BACKGROUND_COLOR],
      [ToolsEnum.FONT_WEIGHT, ToolsEnum.FONT_DELETE_LINE, ToolsEnum.FONT_ITALIC, ToolsEnum.FONT_UNDER_LINE],
    ],
  },
  {
    tools: [
      [ToolsEnum.COMBINE_CELLS, ToolsEnum.DARK_MODE],
      [ToolsEnum.TEXT_ALIGN_LEFT, ToolsEnum.TEXT_ALIGN_CENTER, ToolsEnum.TEXT_ALIGN_RIGHT],
    ],
  },
];
```

---
_Source: https://npm.io/package/kgsheet-for-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._