From 4ab511358758cdad760e9d5eeec8225aff214979 Mon Sep 17 00:00:00 2001
From: Barrior <barrior@qq.com>
Date: Tue, 18 Jun 2024 16:46:44 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20=20=E5=A2=9E=E5=8A=A0=E5=B5=8C=E5=A5=97?=
 =?UTF-8?q?=E8=A1=A8=E5=A4=B4=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../search-table-react/030-table-summay.md    | 52 ++++++++++++++
 .../helpers/columns-tree.ts                   | 70 +++++++++++++++++++
 2 files changed, 122 insertions(+)
 create mode 100644 examples/search-table-react/helpers/columns-tree.ts

diff --git a/examples/search-table-react/030-table-summay.md b/examples/search-table-react/030-table-summay.md
index a004412..7fc614b 100644
--- a/examples/search-table-react/030-table-summay.md
+++ b/examples/search-table-react/030-table-summay.md
@@ -285,3 +285,55 @@ const Demo = () => {
 
 export default Demo
 ```
+
+## 嵌套表头
+
+```jsx
+import { Tag } from 'antd'
+import { sleep } from '@examples/utils'
+import schema from './helpers/schema'
+import treeColumns from './helpers/columns-tree'
+import createDataSource from './helpers/createDataSource'
+import SearchTable from '@schema-render/search-table-react'
+
+const Demo = () => {
+  const actionItems = () => [{ text: '编辑' }, { text: '删除' }]
+
+  return (
+    <SearchTable
+      search={{ schema }}
+      table={{
+        columns: treeColumns,
+        scroll: { y: 300 },
+        showRowNumber: true,
+        bordered: true,
+        actionItems,
+      }}
+      request={async (searchParams) => {
+        await sleep()
+        const data = createDataSource(searchParams.pageSize)
+
+        // 计算商品合计总价
+        const totalPrice = data
+          .reduce((total, item) => total + item.goods_price, 0)
+          .toFixed(2)
+
+        // 返回表格数据渲染
+        return {
+          // 表格数据
+          data,
+          // 数据总数，用于分页
+          total: 100,
+          // 合计栏数据
+          summaryData: {
+            supplier_code: <Tag color="blue">自定义内容</Tag>,
+            goods_price: totalPrice,
+          },
+        }
+      }}
+    />
+  )
+}
+
+export default Demo
+```
diff --git a/examples/search-table-react/helpers/columns-tree.ts b/examples/search-table-react/helpers/columns-tree.ts
new file mode 100644
index 0000000..d2f24e2
--- /dev/null
+++ b/examples/search-table-react/helpers/columns-tree.ts
@@ -0,0 +1,70 @@
+import type { ISearchTableProps } from '@schema-render/search-table-react'
+
+const columns: ISearchTableProps['table']['columns'] = [
+  {
+    title: '供应商名称',
+    dataIndex: 'supplier_name',
+    width: 130,
+  },
+  {
+    title: '供应商编码',
+    dataIndex: 'supplier_code',
+  },
+  {
+    title: '单据编号',
+    dataIndex: 'bill_no',
+    width: 130,
+  },
+  {
+    title: '单据信息',
+    children: [
+      {
+        title: '单据类型',
+        dataIndex: 'bill_type',
+      },
+      {
+        title: '单据日期',
+        dataIndex: 'bill_date',
+        width: 120,
+      },
+      {
+        title: '单据状态',
+        dataIndex: 'bill_status',
+      },
+    ],
+  },
+  {
+    title: '制单人',
+    dataIndex: 'operator',
+  },
+  {
+    title: '商品信息',
+    children: [
+      {
+        title: '商品名称',
+        dataIndex: 'goods_name',
+        width: 130,
+      },
+      {
+        title: '商品价格(元)',
+        dataIndex: 'goods_price',
+      },
+      {
+        title: '商品编码',
+        dataIndex: 'goods_code',
+        width: 130,
+      },
+      {
+        title: '商品分类',
+        dataIndex: 'goods_category',
+      },
+      {
+        title: '商品日期',
+        dataIndex: 'goods_date',
+        width: 120,
+      },
+    ],
+  },
+]
+
+export default columns