From 905444eb9bdc4fdea2d7ed2a98b5c135d6febfc6 Mon Sep 17 00:00:00 2001
From: Barrior <barrior@qq.com>
Date: Sat, 15 Jun 2024 17:27:33 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20AutoScrollY=20=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../search-table-react/020-table-height.md    | 62 +++++++++++++++++--
 1 file changed, 57 insertions(+), 5 deletions(-)

diff --git a/examples/search-table-react/020-table-height.md b/examples/search-table-react/020-table-height.md
index d845ebf..b7260f9 100644
--- a/examples/search-table-react/020-table-height.md
+++ b/examples/search-table-react/020-table-height.md
@@ -5,12 +5,13 @@ toc: content
 
 # 高度自适应 AutoScrollY
 
-自动计算 `scrollY` 的值
+## 基础示例
+
+表格的 `autoScrollY` 属性可以控制其高度自适应，以实现“一屏”显示效果，而不出现页面级滚动条。
+
+开启 `autoScrollY` 属性后，Antd Table 的 `scroll.y` 属性会自动计算，只需要保证 `SearchTable` 根节点元素存在固定高度即可。
 
 ```tsx
-/**
- * defaultShowCode: true
- */
 import { sleep } from '@examples/utils'
 import schema from './helpers/schema'
 import columns from './helpers/columns'
@@ -21,8 +22,55 @@ const Demo = () => {
   return (
     <SearchTable
       style={{
-        // 保证 SearchTable 高度存在
+        // 保证 SearchTable 高度是个固定值
         height: 500,
+        overflow: 'hidden',
+      }}
+      search={{ schema }}
+      table={{
+        columns,
+        // 开启自动滚动 Y 轴计算
+        autoScrollY: true,
+      }}
+      request={async (searchParams) => {
+        await sleep()
+        const data = createDataSource(searchParams.pageSize)
+        return { data, total: 100 }
+      }}
+    />
+  )
+}
+
+export default Demo
+```
+
+## 添加子节点示例
+
+添加 `header`、`footer`、`titleTop`、`titleBottom` 子节点效果。
+
+```jsx
+import { sleep } from '@examples/utils'
+import schema from './helpers/schema'
+import columns from './helpers/columns'
+import createDataSource from './helpers/createDataSource'
+import SearchTable from '@schema-render/search-table-react'
+
+const style = {
+  height: 50,
+  lineHeight: '50px',
+  marginTop: 16,
+  borderRadius: 10,
+  textAlign: 'center',
+  background: 'lightskyblue',
+}
+
+const Demo = () => {
+  return (
+    <SearchTable
+      style={{
+        // 保证 SearchTable 高度存在
+        height: 700,
+        overflow: 'hidden',
       }}
       search={{ schema }}
       table={{
@@ -35,6 +83,10 @@ const Demo = () => {
         const data = createDataSource(searchParams.pageSize)
         return { data, total: 100 }
       }}
+      header={() => <div style={{ ...style, margin: '0 0 16px 0' }}>Header</div>}
+      titleTop={() => <div style={style}>Title Top</div>}
+      titleBottom={() => <div style={style}>Title Bottom</div>}
+      footer={() => <div style={style}>Footer</div>}
     />
   )
 }