Skip to content

Commit

Permalink
docs: AutoScrollY 文档
Browse files Browse the repository at this point in the history
  • Loading branch information
Barrior committed Jun 15, 2024
1 parent e1aa797 commit 905444e
Showing 1 changed file with 57 additions and 5 deletions.
62 changes: 57 additions & 5 deletions examples/search-table-react/020-table-height.md
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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={{
Expand All @@ -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>}
/>
)
}
Expand Down

0 comments on commit 905444e

Please sign in to comment.