docs: demo and changelog

Author: liuxy0551

CHANGELOG.md

@@ -37,7 +37,6 @@ All notable changes to this project will be documented in this file. See [standa
 ### Bug Fixes
 
 -   fix immediate option in userList ([#378](https://github.com/DTStack/dt-react-component/issues/378)) ([b8992f3](https://github.com/DTStack/dt-react-component/commit/b8992f38f918dde10cb6349e39aca2c524e70853))
-    > > > > > > > 272326794683ecd3ed1846ad38fd4258b23dc0f7
 
 ## [4.2.0](https://github.com/DTStack/dt-react-component/compare/v4.1.0...v4.2.0) (2023-08-24)
 

docs/guide/migration-v4.md

@@ -150,9 +150,10 @@ useCookieListener(
 
 -   新增 `observerEle` 属性，支持自定义监听元素。
 
-#### SpreadSheet [#325](https://github.com/DTStack/dt-react-component/pull/325)
+#### SpreadSheet [#325](https://github.com/DTStack/dt-react-component/pull/325)、[#545](https://github.com/DTStack/dt-react-component/pull/545)
 
 -   新增 `className` 属性，可自定义外层组件的 class 名。
+-   删除 `showCopyWithHeader` 属性，使用 `copyTypes` 属性代替，值为数组，可传入 'copyData'、'copyHeaders'、'copyHeadersAndData'，分别代表的功能为：复制值、复制列名、复制列名和值。
 
 #### KeyEventListener [#326](https://github.com/DTStack/dt-react-component/pull/326)
 

src/spreadSheet/demos/changeData.tsx

@@ -0,0 +1,51 @@
+import React, { useRef, useState } from 'react';
+import { Button } from 'antd';
+import { SpreadSheet } from 'dt-react-component';
+
+export default () => {
+    const _columns = ['name', 'gender', 'age', 'address'];
+    const _data = [
+        ['zhangsan', 'male', '20', 'xihu'],
+        ['lisi', 'male', '18', 'yuhang'],
+        ['   前面有空格', '后面有空格   ', '中间有  空 格', 'yuhang'],
+    ];
+    const [columns, setColumns] = useState(_columns);
+    const [data, setData] = useState(_data);
+    const hotTableInstanceRef = useRef<any>(null);
+
+    const handleData = () => {
+        setData(data?.length === 2 ? _data : _data.slice(0, 2));
+    };
+
+    const handleColumns = () => {
+        setColumns(columns?.length === 3 ? _columns : _columns.slice(0, 3));
+    };
+
+    const handleRef = () => {
+        console.log(hotTableInstanceRef?.current?.hotInstance?.getData());
+    };
+
+    return (
+        <>
+            <Button style={{ margin: '0 12px 12px 0' }} type="primary" onClick={handleColumns}>
+                改变列
+            </Button>
+            <Button style={{ margin: '0 12px 12px 0' }} type="primary" onClick={handleData}>
+                改变数据
+            </Button>
+            <Button style={{ margin: '0 12px 12px 0' }} type="primary" onClick={handleRef}>
+                使用 HotTable 示例（打印数据）
+            </Button>
+
+            <SpreadSheet
+                ref={hotTableInstanceRef}
+                columns={columns}
+                data={data}
+                options={{
+                    trimWhitespace: false,
+                    copyTypes: ['copyData', 'copyHeaders', 'copyHeadersAndData'],
+                }}
+            />
+        </>
+    );
+};

src/spreadSheet/index.md

@@ -3,7 +3,7 @@ title: SpreadSheet 多功能表
 group: 组件
 toc: content
 demo:
-    cols: 2
+    cols: 1
 ---
 
 # SpreadSheet 多功能表
@@ -14,7 +14,8 @@ demo:
 
 ## 示例
 
-<code src="./demos/basic.tsx">基础使用</code>
+<code src="./demos/basic.tsx" title="基础使用"></code>
+<code src="./demos/changeData.tsx" title="改变数据"></code>
 
 ## API