S2

The table is rendered according to the configured width and height by default:

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

It should be noted that the table is rendered based on Canvas , and the width and height of the configuration are actually setting the width and height of the canvas , which means that configurations such as 100% , 80vw , etc. will not take effect:

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

preview

window adaptive

If you want the table to fill the entire parent container, you can listen to the resize event of the window, or use ResizeObserver to monitor the container size change, and then update the table width and height:

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

const s2 = new PivotSheet(...)

const debounceRender = debounce((width, height) => {
  s2.changeSheetSize(width, height)
  s2.render(false) // 不重新加载数据
}, 200)

new ResizeObserver(([entry] = []) => {
    const [size] = entry.borderBoxSize || [];
    debounceRender(size.inlineSize, size.blockSize)
}).observe(document.body); // 通过监听 document.body 来实现监听窗口大小变化

preview

📊 Check out the window adaptive demo

container adaptation

If the size of the container itself changes instead of the window, you can use ResizeObserver to get the real-time container size:

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

const s2 = new PivotSheet(...)

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

const debounceRender = debounce((width, height) => {
  s2.changeSheetSize(width, height)
  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

📊 View container adaptive demo

React components

If you use @antv/s2-react , you can configure the adaptive parameter to enable self-adaptation.

Adaptive parameter type

// `adaptive` 的类型 `Adaptive`
type Adaptive =
  | boolean
  | {
      width?: boolean;
      height?: boolean;
      getContainer?: () => HTMLElement;
    }

When configured as a boolean value:

true: The container defaults to the inner <div class=antv-s2-wrapper> , only the width is adaptive, and the height is subject to the settings in options
false: width and height are subject to the settings of options

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

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

It can also be configured to only enable adaptive width or height. The above configuration is equivalent to:

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

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

You can also customize the adaptive container:

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>

📊 View React component adaptive demo

Vue components

If you use @antv/s2-vue , you can configure the adaptive parameter to enable self-adaptation. The type and usage of the adaptive parameter are basically the same as @antv/s2-react .

Can be configured as a boolean value:

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

It can also be configured to only enable adaptive width or height. The above configuration is equivalent to:

<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>

You can also customize the adaptive container:

<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>

📊 Check out the Vue component adaptive demo

Table adaptive

window adaptive

container adaptation

React components

Adaptive parameter type

Vue components