S2

API

@antv/s2 @antv/s2-react @antv/s2-vue

S2 默认根据配置的 width 和 height 进行渲染：

const s2Options = { 
  width: 600, 
  height: 400, 
}

:::warning{title="注意"} 表格基于 Canvas 渲染，配置的宽高其实就是设置 <canvas/> 的 width 和 height, 也就是意味着 100%, 80vw 之类的配置是不生效的：

const s2Options = { 
  width: '100%', // ❌ 
  height: '20vh',// ❌ 
}

:::

preview

窗口自适应

如果想让表格撑满整个父容器，可以监听窗口的 resize 事件，或使用 ResizeObserver 监听容器大小变化，然后更新表格宽高

import { PivotSheet } from '@antv/s2' 
import { debounce } from 'lodash' 
 
const s2 = new PivotSheet(...) 
 
const debounceRender = debounce(async (width, height) => { 
  s2.changeSheetSize(width, height) 
  await s2.render(false) // 不重新加载数据 
}, 200) 
 
const resizeObserver = new ResizeObserver(([entry] = []) => { 
  const [size] = entry.borderBoxSize || []; 
  debounceRender(size.inlineSize, size.blockSize) 
}) 
 
// 通过监听 document.body 来实现监听窗口大小变化 
resizeObserver.observe(document.body);

📊 查看窗口自适应 demo

容器自适应

React 组件

Vue 组件

API