API

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
React components
Vue components