logo

S2

  • Manual
  • API
  • Examples
  • Playground
  • ChangeLog
  • Productsantv logo arrow
  • 2.x
  • Introduction
  • Quick Start
  • Basic Tutorial
    • Base Concept
    • Sheet Type
      • Pivot Mode
        Updated
      • Table Mode
    • Conditions
      Updated
    • Totals
    • Sort
      • Custom Sort
        Updated
      • Group Sort
        Updated
    • Theme
      Updated
    • Tooltip
      Updated
    • Internationalization
    • 数据格式化
      New
    • Multi Line
      New
    • Pagination
      New
  • Advanced Tutorial
    • Advanced Tutorial
      • Link
      • Render Chart In Cell
      • Draw Chart With @antv/g2
    • Custom
      • Customize Hook
        Updated
      • Customize Tree
        New
      • Customize Icon
      • Customize Cell Alignment
      • Customize Cell Size
        Updated
      • Customize Order
      • Custom Collapse/Expand Nodes
    • Interaction
      • Basic Interaction
      • Custom Interaction
      • Hide Columns
      • Cell Resize
      • Merge Cell
      • Scroll
      • Copy
        New
      • Highlight and select cell
        New
    • Analyze Component
      • Introduction
        New
      • Advanced Sort
        Updated
      • Switcher
      • Export
        Updated
      • Pagination
      • Drill Down
    • Sheet Component
      • Editable Mode
      • Strategy Sheet
        Updated
    • HD Adapter
    • Get Instance
    • Get Cell Data
      Updated
    • Table adaptive
    • AntV/G Plugins
      New
    • Pivot Chart
      Experimental
    • Vue 3.0
  • Extended Reading
    • Data Process
      • Pivot
      • Table
    • Layout
      • Pivot
      • Table
    • Performance
      Updated
  • Contribution
  • FAQ
  • S2 2.0 Migration Guide

Get Instance

Previous
HD Adapter
Next
Get Cell Data

Resources

Ant Design
Galacea Effects
Umi-React Application Framework
Dumi-Component doc generator
ahooks-React Hooks Library

Community

Ant Financial Experience Tech
seeconfSEE Conf-Experience Tech Conference

Help

GitHub
StackOverflow

more productsMore Productions

Ant DesignAnt Design-Enterprise UI design language
yuqueYuque-Knowledge creation and Sharing tool
EggEgg-Enterprise-class Node development framework
kitchenKitchen-Sketch Tool set
GalaceanGalacean-互动图形解决方案
xtechLiven Experience technology
© Copyright 2025 Ant Group Co., Ltd..备案号：京ICP备15032932号-38

Loading...

React version

For scenarios such as using the React component SheetComponent , if you need to get the table instance and perform some advanced operations, you can use React.useRef and onMounted two ways

ref method (recommended)

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


function App() {
  const s2Ref = React.useRef<SpreadSheet>()


  const onMounted = () => {
    console.log(s2Ref.current)
  }


  return (
    <SheetComponent ref={s2Ref} onMounted={onMounted}/>
  )
}

Instance update when component shape changes

S2 provides table forms such as透视表and sheetType``明细表corresponds to the SheetComponent component

function App() {
  // pivot 透视表，table: 明细表
  return (
    <SheetComponent sheetType="pivot" />
  )
}

When the sheetType changes, the bottom layer will use different table classes for rendering, which means that the实例has changed at this time

pivot => table


+ new TableSheet()
- new PivotSheet()

The registration event will be canceled before the change. S2 optimizes this scenario. Regardless of the ref or onMounted method, the latest instance is obtained, and developers do not need to care

import { SpreadSheet, S2Event } from '@antv/s2'
import { SheetComponent } from '@antv/s2-react'


function App() {
  const s2Ref = React.useRef<SpreadSheet>()
  const [sheetType, setSheetType] = React.useState('pivot')


  const onMounted = (instance) => {
    console.log(s2Ref.current === instance)
  }


  return (
    <SheetComponent ref={s2Ref} sheetType={sheetType} onMounted={onMounted}/>
  )
}

Forward the instance to the upper component

If your business has re-encapsulated SheetComponent and needs to expose instances, you can use React.forwardRef for instance forwarding

const YourComponent = React.forwardRef(
  (props, ref: React.MutableRefObject<SpreadSheet>) => {


    // ... 业务逻辑


    return (
      <SheetComponent ref={ref} />
    )
  }
)


function App() {
  const s2Ref = React.useRef<SpreadSheet>()


  const onMounted = () => {
    console.log(s2Ref.current)
  }


  return (
    <YourComponent ref={s2Ref} onMounted={onMounted}/>
  )
}

Vue version

ref method (recommended)

The ref method gets an object, and the instance attribute in it corresponds to the real table instance:

<script lang="ts">
import type { S2DataConfig, S2Options } from '@antv/s2';
import { Sheet } from '@antv/s2-vue';
import { defineComponent, onMounted, shallowRef } from 'vue';


export default defineComponent({
  setup() {
    const s2 = shallowRef();


    onMounted(() => {
      console.log('s2 instance:', s2.value?.instance);
    });
    return {
      s2
    };
  },


  components: {
    Sheet,
  },
});
</script>


<template>
  <SheetComponent ref="s2" :dataCfg="your-dataCfg" :options="your-options" />
</template>

Forward the instance to the upper component

If your business has re-encapsulated Sheet and needs to expose instances, you can use useExpose provided by the library to forward instances

//  二次封装组件
export default defineComponent({
  name: 'YourSheet',
  props: [] as unknown as BaseSheetInitProps,
  emits: [] as unknown as BaseSheetInitEmits,
  setup(props, ctx) {
    const s2Ref = useExpose(ctx.expose);
    return { s2Ref };
  },
  components: {
    BaseSheet,
  },
});
</script>
<template>
  <SheetComponent ref="s2Ref" />
</template>

Use the ref method to obtain an instance of an external component:

<script lang="ts">
export default defineComponent({
  setup() {
    const s2 = shallowRef();


    onMounted(() => {
      console.log('s2 instance:', s2.value?.instance);
    });


    return {
      s2
    };
  },


  components: {
    Sheet,
  },
});
</script>


<template>
  <YourSheet ref="s2" :dataCfg="your-dataCfg" :options="your-options" />
</template>