S2

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

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

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

注意

表格基于 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);

preview

📊 查看窗口自适应 demo

容器自适应

如果是容器本身大小发生改变，而不是窗口，那么可以使用 ResizeObserver 获取到实时的容器大小

import { PivotSheet } from '@antv/s2'
import { debounce } from 'lodash'

const s2 = new PivotSheet(...)

const parent = /* 你的容器节点 */

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)
});

resizeObserver.observe(parent);

// 取消监听
// resizeObserver.unobserve(parent)

preview

📊 查看容器自适应 demo

React 组件

如果是使用 @antv/s2-react 的方式，可以配置 adaptive 参数开启自适应。

Adaptive 参数类型

type Adaptive =
  | boolean
  | {
      width?: boolean;
      height?: boolean;
      getContainer?: () => HTMLElement;
    }

配置为 boolean 值时：

true: 容器默认为内部的 <div class=antv-s2-wrapper>, 只有宽度自适应，高度以 options 设置的为准
false: 宽高都以 options 设置的为准

import { SheetComponent } from '@antv/s2-react';

<SheetComponent adaptive={true} />
<SheetComponent adaptive={false} />

也可以配置只对宽度或高度开启自适应，上面的配置等同于：

import { SheetComponent } from '@antv/s2-react';

<SheetComponent adaptive={{ width: true, height: true }} />
<SheetComponent adaptive={{ width: false, height: false }} />

还可以自定义自适应的容器：

import { SheetComponent } from '@antv/s2-react';

const adaptiveRef = React.useRef<HTMLDivElement>();
const containerId = 'containerId';

<div
  id={containerId}
  :style="{
    width: 600,
    height: 400,
  }"
>
  <SheetComponent
    adaptive={{
      width: true,
      height: false,
      getContainer: () => adaptiveRef.current // 或者使用 document.getElementById(containerId)
    }}
  />
</div>

📊 查看 React 组件自适应 demo

Vue 组件

如果是使用 @antv/s2-vue 的方式，可以配置 adaptive 参数开启自适应，adaptive参数的类型和使用方法与@antv/s2-react基本一致。

可以配置为 boolean 值：

<template>
  <SheetComponent
    :dataCfg="your-dataCfg"
    :options="your-options"
    :adaptive="true"
  />
  <SheetComponent
    :dataCfg="your-dataCfg"
    :options="your-options"
    :adaptive="false"
  />
</template>

也可以配置只对宽度或高度开启自适应，上面的配置等同于：

<template>
  <SheetComponent
    :dataCfg="your-dataCfg"
    :options="your-options"
    :adaptive="{ width: true, height: true }"
  />
  <SheetComponent
    :dataCfg="your-dataCfg"
    :options="your-options"
    :adaptive="{ width: false, height: false }"
  />
</template>

还可以自定义自适应的容器：

<script lang="ts">
const adaptive = {
  width: true,
  height: true,
  getContainer: () => document.getElementById('containerId'),
};
</script>

<template>
  <div
    id="containerId"
    style="width:600px;height:400px"
  >
    <SheetComponent
      :dataCfg="your-dataCfg"
      :options="your-options"
      :adaptive="adaptive"
    />
  </div>
</template>

📊 查看 Vue 组件自适应 demo

表格自适应

注意

窗口自适应

容器自适应

React 组件

Adaptive 参数类型

Vue 组件