@antv/s2-react-components

@antv/s2-react-components

S2 多维分析表格配置套的 React 分析/配置组件库。

📦 安装

$ pnpm add @antv/s2-react-components
# npm install @antv/s2-react-components --save
# yarn add @antv/s2-react-components

🔨 使用

import React from 'React'
import { ThemePanel, TextAlignPanel, FrozenPanel } from '@antv/s2-react-components'
import '@antv/s2-react-components/dist/s2-react-components.min.css'

const App = () => {
  return (
    <>
      <ThemePanel
        title="主题配置"
        disableCustomPrimaryColorPicker={false}
        defaultCollapsed={false}
        onChange={(options, theme) => {
          console.log('onChange:', options, theme);
        }}
        onReset={(options, prevOptions, theme) => {
          console.log('onReset:', options, prevOptions, theme);
        }}
      />
      <TextAlignPanel
        title="文字对齐"
        defaultCollapsed={false}
        onChange={(options, theme) => {
          console.log('onChange:', options, theme);
        }}
        onReset={(options, prevOptions, theme) => {
          console.log('onReset:', options, prevOptions, theme);
        }}
      />
      <FrozenPanel
        title="冻结行列头"
        defaultCollapsed={false}
        onChange={(options) => {
          console.log('onChange:', options);
        }}
        onReset={(options, prevOptions) => {
          console.log('onReset:', options, prevOptions);
        }}
      />
    </>
  )
}

结果

结合表格使用

import React from 'React'
import { ThemePanel } from '@antv/s2-react-components'
import '@antv/s2-react-components/dist/s2-react-components.min.css'

const App = () => {
  const s2Ref = React.useRef<SpreadSheet>();
  const [themeCfg, setThemeCfg] = React.useState<ThemeCfg>({
    name: 'default',
  });

  return (
    <>
      <ThemePanel
        title="主题配置"
        disableCustomPrimaryColorPicker={false}
        defaultCollapsed={false}
        onChange={(options, theme) => {
          setThemeCfg({
            name: options.themeType as ThemeName,
            theme,
          });
          s2Ref.current?.setOptions({
            hierarchyType: options.hierarchyType,
          });
          s2Ref.current?.render(false);
          console.log('onChange:', options, theme);
        }}
        onReset={(options, prevOptions, theme) => {
          console.log('onReset:', options, prevOptions, theme);
        }}
      />
      <SheetComponent
        ref={s2Ref}
        dataCfg={s2DataConfig}
        options={s2Options}
        sheetType="pivot"
        themeCfg={themeCfg}
      />
    </>
  )