# npm
$ npm install @antv/s2 --save

# yarn
$ yarn add @antv/s2

# pnpm
$ pnpm add @antv/s2

npm install @antv/s2 @antv/s2-react --save

npm install @antv/s2 @antv/s2-react-components antd @ant-design/icons --save

npm install @antv/s2 @antv/s2-vue [email protected] --save

- s2.render()
+ await s2.render()

+ import { Image } from '@antv/g';
+ this.appendChild(new Image({ style: {} }))
- this.addShape('image', { attrs: {} });

const s2Options = {
  transformCanvasConfig(renderer) {
    renderer.setConfig({ enableDirtyCheck: true })
    renderer.registerPlugin(new PluginA11y({ enableExtractingText: true }));

    return {
      devicePixelRatio: 2
    };
  },
}

const s2Options = {
  style: {
-   rowCfg: {},
-   colCfg: {},
-   cellCfg: {},
+   rowCell: {},
+   colCell: {},
+   dataCell: {},
  }
}

export interface BaseCellStyle {
  width?: number | (node) => number;
- height?: number;
+ height?: number | (node) => number;
- widthByFieldValue?: Record<string, number>;
+ widthByField?: Record<string, number>;
  heightByField?: Record<string, number>;
}

const s2Options = {
  tooltip: {
-   row: {},
-   col: {},
-   data: {},
-   corner: {},
+   rowCell: {},
+   colCell: {},
+   dataCell: {},
+   cornerCell: {},
  }
}

const s2Options = {
  tooltip: {
-   showTooltip: true,
-   renderTooltip: () => new CustomTooltip(),
+   enable: true,
+   render: () => new CustomTooltip(),
  }
}

s2.showTooltip({
  options: {
-   enterable: true,
-   showSingleTips: true,
+   onlyShowCellText: true,
-   onlyMenu: true,
+   onlyShowOperator: true
  },
});

const s2Options = {
  interaction: {
-   enableCopy: true,
-   copyWithHeader: true,
-   copyWithFormat: true
+   copy: {
+     enable: true,
+     withHeader: true,
+     withFormat: true,
+     customTransformer: () => {}
+   },
  }
}

- const data = copyData(spreadsheet, '\t', false)
+ const data = await asyncGetAllData({
+   sheetInstance: s2,
+   split: '\t',
+   formatOptions: false,
+   async: true,
});

- const data = copyToClipboard(data: string, sync: boolean)
+ const data = copyToClipboard(data: Copyable | string, async: boolean)

const s2Options = {
  interaction: {
-   brushSelection: {
-     row: false,
-     col: false,
-     data: true,
-   },
+   brushSelection: {
+     rowCell: true,
+     colCell: true,
+     dataCell: true,
+   }
  }
}

const s2Options = {
  headerActionIcons: [
    {
-      iconNames: ['SortDown'],
-      action: () => {}
+      icons: ['SortDown'],
+      onClick: () => {}
+      onHover: () => {}
    },
  ],
}

const s2Options = {
  headerActionIcons: [
    {
+     icons: [{
+       name: 'SortDown',
+       position: 'right',
+       fill: '#000',
+       displayCondition: () => {},
+       defaultHide: () => {},
+     }]
    },
  ],
}

const s2Options = {
  customSVGIcons: [
    {
      name: 'CustomIcon',
-     svg: 'https://gw.alipayobjects.com/zos/bmw-prod/f44eb1f5-7cea-45df-875e-76e825a6e0ab.svg',
+     src: 'https://gw.alipayobjects.com/zos/bmw-prod/f44eb1f5-7cea-45df-875e-76e825a6e0ab.svg',
    },
  ]
}

const s2Options = {
  hierarchyType: 'tree',
  style: {
-   rowExpandDepth: 0,
-   collapsedRows: {},
-   hierarchyCollapse: true,
+   rowCell: {
+     expandDepth: 0,
+     collapseFields: {},
+     collapseAll: true
    }
  },
}

const s2Options = {
  hierarchyType: 'tree',
  style: {
-   treeRowsWidth: 200
+   rowCell: {
+     treeWidth: 200,
+   }
  },
}

const s2Options = {
-  hierarchyType: 'customTree',
+  hierarchyType: 'tree',
}

const s2DataConfig = {
  fields: {
-    customTreeItems: [
-      {
-        key: 'custom-node-1',
-        title: 'Custom Node A',
-        description: 'Custom Node A Description',
-        children: []
-      }
+    rows: [
+      {
+        field: 'custom-node-1',
+        title: 'Custom Node A',
+        description: 'Custom Node A Description',
+        children: []
+      }
    ]
  }
}

- S2Event.LAYOUT_TREE_ROWS_COLLAPSE_ALL
+ S2Event.ROW_CELL_ALL_COLLAPSED
- S2Event.LAYOUT_COLLAPSE_ROWS
- S2Event.LAYOUT_AFTER_COLLAPSE_ROWS
+ S2Event.ROW_CELL_COLLAPSED

const s2Options = {
-  frozenRowHeader: true,
-  frozenFirstRow: true,
-  frozenRowCount: 1;
-  frozenColCount: 1;
-  frozenTrailingRowCount: 1;
-  frozenTrailingColCount: 1;
+  frozen: {
+    rowHeader: true,
+    rowCount: 1;
+    colCount: 1;
+    trailingRowCount: 1;
+    trailingColCount: 1;
+  }
}

const s2Options = {
  frozen: {
-   rowHeader: true,
+   rowHeader: true,
+   rowHeader: 0.5,
  }
}

const s2Options = {
-  hdAdapter: true,
+  hd: true,
}

const s2Options = {
  conditions: {
    text: [
      {
        field: 'city',
        mapping() {
          return {
            fill: '#DB6BCF',
+           fontSize: 16,
+           opacity: 0.8,
+           textAlign: 'right',
          };
        },
      },
    ]
  },
}

const s2Options = {
- showSeriesNumber: true,
- seriesNumberText: 'No.'
+ seriesNumber: {
+   enable: true,
+   text: 'No.'
+ }
}

const s2Options = {
  interaction: {
    resize: {
+     rowResizeType: 'current', // 'all' | 'selected'
+     colResizeType: 'current'  // 'all' | 'selected'
    }
  }
}

- s2.facet.layoutResult
+ s2.facet.getLayoutResult()

- s2.facet.layoutResult.getCellMeta(rowIndex, colIndex)
+ s2.facet.getCellMeta(rowIndex, colIndex)

export interface LayoutResult {
  colNodes: Node[];
  colLeafNodes: Node[];
  colsHierarchy: Hierarchy;
  rowNodes: Node[];
  rowsHierarchy: Hierarchy;
  rowLeafNodes: Node[];
- getCellMeta: (rowIndex: number, colIndex: number) => ViewMeta
+ seriesNumberNodes?: Node[];
+ cornerNodes?: Node[];
}

{
  rowQuery: {
    "province": "Zhejiang",
    "city": "Ningbo"
  },
  colQuery: {
    "sub_type": "Sofa",
    "type": "Furniture",
    "$$extra$$": "number"
  },
+ query: {
+   "province": "Zhejiang",
+   "city": "Ningbo",
+   "sub_type": "Sofa",
+   "type": "Furniture",
+   "$$extra$$": "number"
+  }
}

{
+  rowQuery: {
+    "rowIndex": 1,
+  },
+  colQuery: {
+    "colIndex": 2,
+  },
+  query: {
+    "rowIndex": 1,
+    "colIndex": 2
+  }
}

- s2.getContentHeight()
+ s2.facet.getContentHeight()
+ s2.facet.getContentWidth()

- s2.getRowNodes()
- s2.getRowLeafNodes()
- s2.getColumnLeafNodes()
- s2.getColumnNodes()
+ s2.facet.getRowNodes()
+ s2.facet.getRowLeafNodes()
+ s2.facet.getColLeafNodes()
+ s2.facet.getColNodes()

- s2.render(true)
- s2.render(false)
- s2.render(false, { reBuildHiddenColumnsDetail: false })
+ s2.render({ reloadData: true }) // equivalent to s2.render(true)
+ s2.render({ reloadData: false }) // equivalent to s2.render(false)
+ s2.render({
+   reloadData: false,
+   rebuildHiddenColumnsDetail: false,
+ });

s2.render({
-  reBuildDataSet: false,
+  rebuildDataSet: false,
-  reBuildHiddenColumnsDetail: false,
+  rebuildHiddenColumnsDetail: false,
});

const s2Options = {
  totals: {
    row: {
-     calcTotals: {}.
-     reverseLayout: true,
-     label: 'Total'
-     subLabel: 'Subtotal'
-     totalsGroupDimensions: [],
-     reverseSubLayout: true,
+     calcGrandTotals: {}.
+     reverseGrandTotalsLayout: true,
+     grandTotalsLabel: 'Total',
+     subTotalsLabel: 'Subtotal',
+     grandTotalsGroupDimensions: [],
+     reverseSubTotalsLayout: true
    };
  }
}

- import { drawObjectText } from '@antv/s2'
+ import { drawCustomContent } from '@antv/s2'

{
  fields: {
    rows: ["province", "city"],
    columns: ["type", "subType"],
    values: ["number1", "number2"],
 }
}

- [
-   {
-     province: 'Liaoning',
-     city: 'Dazhou',
-     type: 'Table',
-     subType: 'Furniture',
-     number1: 3482.28,
-   },
-   {
-     province: 'Liaoning',
-     city: 'Dazhou',
-     type: 'Table',
-     subType: 'Furniture',
-     number2: 34,
-   },
- ];
+ [
+   {
+     province: 'Liaoning',
+     city: 'Dazhou',
+     type: 'Table',
+     subType: 'Furniture',
+     number1: 3482.28,
+     number2: 34,
+   },
+ ];

- s2.dataSet.getField(field: string)
- s2.dataSet.getFieldMeta(field: string)
- s2.dataSet.getFieldName(field: string)
- s2.dataSet.getFieldFormatter(field: string)
+ s2.dataSet.getField(field: CustomTreeNode | string)
+ s2.dataSet.getFieldMeta(field: CustomTreeNode | string)
+ s2.dataSet.getFieldName(field: CustomTreeNode | string)
+ s2.dataSet.getFieldFormatter(field: CustomTreeNode | string)

- s2.dataSet.getCellData(params: CellDataParams)
+ s2.dataSet.getCellData(params: GetCellDataParams)
- s2.dataSet.getMultiData(query: DateType, params: MultiDataParams)
- s2.dataSet.getMultiData(query: DataType, isTotals?: boolean, isRow?: boolean, drillDownFields?: string[], includeTotalData:boolean)
+ s2.dataSet.getCellMultiData(params: GetCellMultiDataParams)

{
-  data: [...],
-  totalData: [...],
+  data: [...data, ...totalData],
}

{
-  "number": 7789,
-  "province": "Zhejiang",
-  "city": "Hangzhou",
-  "type": "Furniture",
-  "sub_type": "Table",
+  "extraField": "number",
+    "raw": {
+    "number": 7789,
+    "province": "Zhejiang",
+    "city": "Hangzhou",
+    "type": "Furniture",
+    "sub_type": "Table"
+ },
+  "$$extra$$": "number",
+  "$$value$$": 7789,
+  "$$origin$$": {
+    "number": 7789,
+    "province": "Zhejiang",
+    "city": "Hangzhou",
+    "type": "Furniture",
+    "sub_type": "Table"
+  }
}

s2.interaction.getState()

// Row header
- stateName: "brushSelected"
+ stateName: "rowCellBrushSelected"
// Column header
- stateName: "brushSelected"
+ stateName: "colCellBrushSelected"
// Value cells
- stateName: "selected"
+ stateName: "dataCellBrushSelected"

s2.interaction.selectAll()
- s2.interaction.getActiveCells() // []
+ s2.interaction.getActiveCells() // [CellA, CellB]

- s2.interaction.selectHeaderCell(selectHeaderCellInfo: SelectHeaderCellInfo)
+ s2.interaction.changeCell(options: ChangeCellOptions)
+ s2.interaction.selectCell(cell: S2CellType)
+ s2.interaction.highlightCell(cell: S2CellType)

s2.interaction.selectCell(cell, {
  animate: true,
  skipScrollEvent: true
})

- s2.updateScrollOffset(offsetConfig: ScrollOffsetConfig)
+ s2.interaction.scrollTo(offsetConfig: ScrollOffsetConfig)

s2.interaction.scrollTo({
+  skipScrollEvent: false
})

- import { getSafetyOptions, getSafetyDataConfig } from '@antv/s2'
+ import { setupOptions, setupDataConfig } from '@antv/s2'

const s2Options = {
- placeholder: "-",
+ placeholder: {
+   cell: '-'
+ }
}

const s2Options = {
+ placeholder: {
+   empty: {
+     icon: 'Empty',
+     description: 'No Data'
+   }
+ }
}

- import { ROOT_ID, ID_SEPARATOR } from '@antv/s2'
+ import { ROOT_NODE_ID, NODE_ID_SEPARATOR } from '@antv/s2'

const s2Options = {
   width: 600,
-  dataCell: (viewMeta) => {
-    return new CustomDataCell(viewMeta, viewMeta.spreadsheet);
-  }
+  dataCell: (viewMeta, spreadsheet) => {
+    return new CustomDataCell(viewMeta, spreadsheet);
+  }
}

s2.on(S2Event.GLOBAL_LINK_FIELD_JUMP, (data) => {
-  const { key, cellData, record } = data;
+  const { field, meta, record } = data;
});

{
-  id: 'root[&]null',
-  value: 'null'
+  id: 'root[&]$$null$$',
+  value: null
}

- dataCell.valueRangeByField
+ dataCell.getValueRange()

splitLine: {
-  horizontalBorderColor: basicColors[12],
-  horizontalBorderColorOpacity: 0.2,
-  verticalBorderColor: basicColors[12],
-  verticalBorderColorOpacity: 0.25,
}

{
-  top: 4,
+  top: 8,
-  bottom: 4,
+  bottom: 8
}

<SheetComponent
-  header={{
-    title: "",
-    description: "",
-    switcher: { open: true },
-    export: { open: true },
-    advancedSort: { open: true },
-  }}
/>

import { ConfigProvider } from 'antd'

<SheetComponent>
-  <ConfigProvider />
</SheetComponent>
+ <ConfigProvider>
+  <SheetComponent />
+ </ConfigProvider>

import { Spin } from 'antd'

<SheetComponent>
-  <Spin />
</SheetComponent>
+ <Spin>
+  <SheetComponent />
+ </Spin>

import { Spin } from 'antd'

function App() {
  const [loading, setLoading] = React.useState(false)

  return (
    <Spin spinning={loading}>
      <SheetComponent onLoading={setLoading} />
    </Spin>
  )
}

- <SheetComponent showPagination />

import { Pagination } from 'antd';

function App() {
  return (
    <SheetComponent options={s2Options}>
      {({ pagination }) => (
        // Use with any paginator: like antd's Pagination component
        <Pagination
          size="small"
          showTotal={(total) => `Total ${total} items`}
          {...pagination}
        />
      )}
    </SheetComponent>
  )
}

- import { AdvancedSort } from '@antv/s2-react';
+ import { AdvancedSort } from '@antv/s2-react-components';

- <AdvancedSort sheet={s2} />
+ <AdvancedSort sheetInstance={s2} />

- import { Switcher } from '@antv/s2-react';
+ import { Switcher } from '@antv/s2-react-components';

- <Switcher title={<Button>Switch Dimension</Button>} />
+ <Switcher title="Switch Dimension" icon={<SwapOutlined/>} />
+ <Switcher>
+   <Button>Switch Dimension</Button>
+ </Switcher>

- import { Export } from '@antv/s2-react';
+ import { Export } from '@antv/s2-react-components';

- <Export syncCopy={true} sheet={s2} />
+ <Export async={false} sheetInstance={s2} />

- <Export icon={<MoreOutlined/> } />
+ <Export><Button type="text"><MoreOutlined /></Button></Export>

<Export
-  successText="Operation successful"
-  errorText="Operation successful"
+  onCopySuccess={(data) => {
+    console.log('copy success:', data);
+  }}
+  onCopyError={(error) => {
+    console.log('copy failed:', error);
+  }}
+  onDownloadSuccess={(data) => {
+    console.log('download success', data);
+  }}
+  onDownloadError={(error) => {
+    console.log('download failed:', error);
+  }}
/>

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

- import { DrillDown } from '@antv/s2-react';
+ import { DrillDown } from '@antv/s2-react-components';

- <DrillDown titleText="Drill Down" clearButtonText="Clear" />
+ <DrillDown title="Drill Down" clearText="Clear" />

+ import { DrillDown } from '@antv/s2-react-components';
function App() {
  return (
    <SheetComponent
      sheetType="pivot"
      options={s2Options}
      partDrillDown={{
+       render: (props) => <DrillDown {...props} />,
      }}
    />
  )
}

+ <Input.TextArea />
- <textarea />

import { Menu } from 'antd'

const s2Options = {
  tooltip: {
    operation: {
      menu: {
        render: (props) => {
          return <Menu {...props} />;
        },
      }
    }
  }
}

const s2Options = {
  tooltip: {
    operation: {
-     onClick: (cell) => {},
-     menus: [
-       {
-         key: 'custom-a',
-         text: 'Operation 1',
-         icon: 'Trend',
-         onClick: (cell) => {},
-         visible: (cell) => true,
-         children: [],
-       }
-     ],
+     menu: {
+       onClick: (info, cell) => {},
+       items: [
+         {
+           key: 'custom-a',
+           label: 'Operation 1',
+           icon: 'Trend',
+           onClick: (info, cell) => {},
+           visible: (info, cell) => true,
+           children: [],
+         }
+       ],
+     },
    },
  },
};

<SheetComponent options={s2Options} />

s2.showTooltip({
  options: {
    operator: {
      menu: {
-       defaultSelectedKeys: ['key-1'],
+       selectedKeys: ['key-1'],
      },
    },
  },
});

// $ npm install --save antd-v5@npm:antd@5
{
  "antd": "4.x",
  "antd-v5": "npm:antd@5"
}

class AntdV5AliasPlugin {
  apply(compiler) {
    compiler.hooks.normalModuleFactory.tap("AntdV5AliasPlugin", (nmf) => {
      nmf.hooks.beforeResolve.tapAsync("AntdV5AliasPlugin", (resolveData, callback) => {
        if (resolveData.contextInfo?.issuer?.includes('node_modules/@antv/s2-react-components')) {
          // Match: "antd" and "antd/es/locale/xxx"
          if (/antd(\/*)?/.test(resolveData.request)) {
            // Replace with: "antd-v5" and "antd-v5/es/locale/xxx"
            resolveData.request = resolveData.request.replace(/antd(\/*)?/,'antd-v5$1')
          }
        }

        callback();
      });
    });
  }
}

- <SheetComponent options={s2Options} onCollapseRowsAll={} />
+ <SheetComponent options={s2Options} onRowCellAllCollapsed={} />
- <SheetComponent options={s2Options} onLayoutAfterCollapseRows={} />
+ <SheetComponent options={s2Options} onRowCellCollapsed={} />

- <SheetComponent onSheetUpdate={} />
+ <SheetComponent onUpdate={} onUpdateAfterRender={} />

<SheetComponent
  onUpdate={(renderOptions) => {
-   return renderOptions
  }}
/>

- interface SheetComponentsProps {}
+ interface SheetComponentProps {}