S2

https://s2.antv.antgroup.com/en/api
Admin
S2 is a high-performance, in-memory pivot table and spreadsheet library for React that supports...
Tokens:31,978
Snippets:204
Trust Score:9.6
Update:6 months ago
Show doc for...
Tokens:
Raw
### Example SimpleData Array

Source: https://s2.antv.antgroup.com/en/api/general/s2-data-config

An example array demonstrating the structure of raw data using SimpleData types for various fields like area, province, city, type, subType, and cost.

```javascript
const data = [
  {
    area: 'Northeast',
    province: 'Jilin',
    city: 'Baishan',
    type: 'Office Supplies',
    subType: 'Paper',
    cost: '2',
  },
  {
    area: 'Northeast',
    province: 'Jilin',
    city: 'Baishan',
    type: 'Office Supplies',
    subType: 'Pen',
    cost: '3',
  }
];
```

--------------------------------

### Configure Tooltip Display Options

Source: https://s2.antv.antgroup.com/en/api/general/s2-options

Example of how to structure the TooltipShowOptions object to control tooltip content, positioning, and data presentation.

```typescript
const tooltipOptions: TooltipShowOptions = {
  position: { x: 100, y: 200 },
  data: {
    name: 'Cell Name',
    tips: 'Hover tips',
    details: { name: 'Metric', value: 100 }
  },
  options: {
    hideSummary: false,
    onlyShowOperator: false
  }
};
```

--------------------------------

### Example MultiData Object

Source: https://s2.antv.antgroup.com/en/api/general/s2-data-config

An example object demonstrating the MultiData structure, used for custom cell rendering. It shows nested 'number' object with 'originalValues' and 'values'.

```javascript
const data = [
  {
    number: {
      originalValues: [1, 2, 3],
      values: ['1', '2', '3']
    }
  }
];
```

--------------------------------

### Manage S2 Store State

Source: https://s2.antv.antgroup.com/en/api/basic-class/store

Demonstrates how to get and set values within the S2 store instance. This is used for persisting and retrieving configuration or state information.

```javascript
s2.store.get('key');
s2.store.set('key', value);
```

--------------------------------

### S2 Store API

Source: https://s2.antv.antgroup.com/en/api/basic-class/store

The S2 store provides methods to manage data. You can retrieve data using `get` and store data using `set`.

```APIDOC
## S2 Store API

### Description
Provides methods for storing and retrieving information within the S2 framework.

### Methods

#### `get(key: string)`
Retrieves a value from the store associated with the given key.

#### `set(key: string, value: any)`
Stores a value in the store associated with the given key.

### Parameters

#### `get` Parameters:
- **key** (string) - Required - The key of the item to retrieve.

#### `set` Parameters:
- **key** (string) - Required - The key of the item to store.
- **value** (any) - Required - The value to store.

### Request Example
```javascript
s2.store.get('myKey');
s2.store.set('myKey', 'myValue');
```

### Response

#### Success Response (200)
- **get**: The value associated with the key, or undefined if the key does not exist.
- **set**: Typically returns void or a success indicator.

#### Response Example
```json
{
  "get_response": "myValue"
}
```

### Additional Parameters Influencing Store Behavior

These parameters are not directly used in `get` or `set` but are relevant to the overall S2 context and may affect how data is managed or displayed.

#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

#### Relevant Parameters:
- **scrollX** (number) - Optional - Horizontal scroll offset.
- **scrollY** (number) - Optional - Vertical scroll offset.
- **rowHeaderScrollX** (number) - Optional - Vertical header scroll offset.
- **sortParam** (SortParam) - Optional - Column header sorting configuration.
- **drillDownIdPathMap** (Map<string, number[][]>) - Optional - Drill down node id and corresponding generated path addressing path.
- **drillDownNode** (node) - Optional - Current drill-down node.
- **drillItemsNum** (number) - Optional - Control the number of drill-down data.
- **interactionStateInfo** (number) - Optional - Current Interaction Status Information.
- **drillDownFieldInLevel** (PartDrillDownInfo[]) - Optional - Drill down to node level information.
- **originalDataCfg** (S2DataConfig) - Optional - Raw Data Configuration.
- **panelBBox** (BBox) - Optional - Visual area wrapping box model.
- **activeResizeArea** (Group) - Optional - Current resizing region group.
- **valueRanges** (ValueRanges) - Optional - Conditional format value range.
- **initColLeafNodes** (Node[]) - Optional - The column header leaf node when it is first rendered.
- **hiddenColumnsDetail** (HiddenColumnsInfo[]) - Optional - Hidden column header details.
- **lastRenderedColumnFields** (string[]) - Optional - The column header configuration of the last render.
- **resized** (boolean) - Optional - Whether to manually adjust the width and height.
- **visibleActionIcons** (GuiIcon[]) - Optional - The icon cache displayed by hover.
- **lastClickedCell** (S2CellType<ViewMeta>) - Optional - Last clicked cell.
- **initOverscrollBehavior** (\"auto\" | \"none\" | \"contain\") - Optional - Initial scroll chain state.
- **sortMethodMap** (Record<string, SortMethod>) - Optional - Sort by configuration.
- **[key: string]** (unknown) - Optional - Any other field.
```

--------------------------------

### Managing Interaction State in S2

Source: https://s2.antv.antgroup.com/en/api/basic-class/interaction

Provides methods to set, get, and clear the interaction state of the S2 spreadsheet. These functions allow for fine-grained control over the current interactive status and visual feedback.

```javascript
s2.interaction.setState(data: InteractionStateInfo)
 s2.interaction.getState()
 s2.interaction.resetState()
 s2.interaction.clearState()
```

--------------------------------

### Configure S2 Table Themes

Source: https://s2.antv.antgroup.com/en/api/general/s2-theme

Demonstrates how to apply global theme configurations using setThemeCfg and how to override specific cell styles using setTheme. These methods allow for granular control over the visual appearance of the S2 table.

```javascript
s2.setThemeCfg({
  theme: {},
  palette: {},
  name: "default"
});

s2.setTheme({
  rowCell: {
    cell: {
      backgroundColor: "#fff"
    }
  }
});
```

--------------------------------

### S2 Spreadsheet Initialization and Core Properties

Source: https://s2.antv.antgroup.com/en/api/basic-class/spreadsheet

Demonstrates how to initialize a PivotSheet instance and lists its core properties and their descriptions.

```APIDOC
## S2 Spreadsheet Initialization

### Description
Initializes a new S2 PivotSheet instance. The constructor accepts various configuration options.

### Method
`new PivotSheet(options)`

### Parameters
#### Request Body
- **dom** (string | HTMLElement) - Required - The mounted container node where the spreadsheet will be rendered.
- **theme** (S2Theme) - Optional - The theme configuration for the spreadsheet.
- **store** (store) - Optional - An object for storing spreadsheet information.
- **dataCfg** (S2DataConfig) - Optional - Configuration for the data to be displayed.
- **options** (S2Options) - Optional - General configuration options for the spreadsheet.
- **dataSet** (BaseDataSet) - Optional - The dataset object containing fields, data, and sorting information.
- **facet** (BaseFacet) - Optional - Represents the current viewable rendering area.
- **tooltip** (BaseTooltip) - Optional - Configuration for the tooltip.
- **container** (Canvas) - Optional - The g-canvas instance for rendering.
- **interaction** (Interaction) - Optional - Configuration for user interactions.
- **hd** (HdAdapter) - Optional - Adapter for HD (High Definition) adaptation.

### Request Example
```javascript
const s2 = new PivotSheet({
  container: document.getElementById('s2-container'),
  dataCfg: {
    fields: ['field1', 'field2'],
    values: ['value'],
    rows: ['row'],
    columns: ['column']
  },
  options: {
    width: 600,
    height: 400
  }
});
```

### Properties
- **isPivotMode** (`() => boolean`) - Checks if the current view is in pivot table mode.
- **isHierarchyTreeType** (`() => boolean`) - Checks if the spreadsheet is using a hierarchy tree structure.
- **isFrozenRowHeader** (`() => boolean`) - Determines if the row header is frozen.
- **isTableMode** (`() => boolean`) - Checks if the spreadsheet is in table mode.
- **isValueInCols** (`() => boolean`) - Indicates if values are placed in the columns.
- **clearDrillDownData** (`(rowNodeId?: string) => void`) - Clears drill-down data, optionally for a specific row node.
- **showTooltip** (`(showOptions: TooltipShowOptions) => void`) - Displays the tooltip with specified options.
- **showTooltipWithInfo** (`(event: CanvasEvent | MouseEvent, data: TooltipData[], options?: TooltipOptions) => void`) - Shows the tooltip with detailed information.
- **hideTooltip** (`() => void`) - Hides the tooltip.
- **destroyTooltip** (`() => void`) - Destroys the tooltip instance.
- **registerIcons** (`() => void`) - Registers custom SVG icons based on `options.customSVGIcons`.
- **setDataCfg** (`(dataCfg: S2DataConfig, reset?: boolean) => void`) - Updates the data configuration. The `reset` parameter requires `@antv/s2^1.34.0` or later.
- **setOptions** (`(options: S2Options, reset?: boolean) => void`) - Updates the spreadsheet options. The `reset` parameter requires `@antv/s2^1.34.0` or later.
- **render** (`(reloadData?: boolean, { rebuildDataSet?: boolean; reBuildHiddenColumnsDetail?: boolean }) => Promise<void>`) - Re-renders the spreadsheet. Can reload data, rebuild the dataset, and rebuild hidden column details.
- **destroy** (`() => void`) - Destroys the spreadsheet instance.
- **setThemeCfg** (`(themeCfg: ThemeCfg) => void`) - Updates the theme configuration, including schema, palette, and name.
- **setTheme** (`(theme: S2Theme) => void`) - Updates the theme (only the theme schema).
- **updatePagination** (`(pagination: Pagination) => void`) - Updates the pagination settings.
- **changeSheetSize** (`(width?: number, height?: number) => void`) - Modifies the spreadsheet canvas size without reloading data.
- **getLayoutWidthType** (`() => LayoutWidthType`) - Gets the cell width layout type (`adaptive`, `colAdaptive`, `compact`).
- **getRowNodes** (`(level: number) => Node[]`) - Retrieves row header nodes at a specific level.
- **getRowLeafNodes** (`() => Node[]`) - Retrieves all leaf nodes of the row headers.
- **facet.getColNodes** (`(level: number) => Node[]`) - Retrieves column header nodes at a specific level.
- **facet.getColLeafNodes** (`() => Node[]`) - Retrieves all leaf nodes of the column headers.
- **getCell** (`(target: EventTarget) => S2CellType`) - Gets the cell object corresponding to the event target.
- **getCellType** (`(target: EventTarget) => CellType`) - Gets the type of the cell corresponding to the event target.
- **getTotalsConfig** (`(dimension: string) => Total`) - Retrieves the total/subtotal configuration for a given dimension.
- **getCanvasElement** (`() => HTMLCanvasElement`) - Returns the HTML canvas element used by the spreadsheet.
- **updateSortMethodMap** (`(nodeId: string, sortMethod: string, replace?: boolean) => void`) - Updates the sort method map for a node, with an option to replace existing values.
- **getMenuDefaultSelectedKeys** (`(nodeId: string) => string[]`) - Gets the default selected keys for the tooltip menu.
- **measureText** (`(text: string, font: TextTheme) => TextMetrics | null`) - Measures text dimensions within the canvas.
- **measureTextWidth** (`(text: string, font: TextTheme) => number | null`) - Measures the width of text within the canvas.
- **measureTextHeight** (`(text: string, font: TextTheme) => number | null`) - Measures the height of text within the canvas.
```

--------------------------------

### GET /getCornerNodes

Source: https://s2.antv.antgroup.com/en/api/basic-class/base-facet

Retrieves the corner nodes of the spreadsheet layout.

```APIDOC
## GET /getCornerNodes

### Description
Returns an array of corner nodes representing the top-left intersection area of the spreadsheet.

### Method
GET

### Endpoint
/getCornerNodes

### Parameters
None

### Response
#### Success Response (200)
- **nodes** (Node[]) - An array of node objects representing the corner structure.

#### Response Example
[
  { "id": "corner-1", "label": "Category" }
]
```

--------------------------------

### Configure S2 Options

Source: https://s2.antv.antgroup.com/en/api/general/s2-options

Initializes the S2 table configuration object with basic dimensions and hierarchy settings.

```javascript
const s2Options = {
  width: 600,
  height: 400,
  hierarchyType: 'grid'
};
```

--------------------------------

### Initialize and Check PivotSheet Mode

Source: https://s2.antv.antgroup.com/en/api/basic-class/spreadsheet

Demonstrates how to instantiate a PivotSheet object and verify if the table is currently in pivot mode using the isPivotMode method.

```javascript
const s2 = new PivotSheet();
s2.isPivotMode();
```

--------------------------------

### Get Field Name using S2 DataSet

Source: https://s2.antv.antgroup.com/en/api/basic-class/base-data-set

Retrieves the name of a field from the S2 dataset. This method is part of the BaseDataSet and is useful for accessing field identifiers.

```typescript
s2.dataSet.getFieldName('type')
```

--------------------------------

### Tooltip Configuration

Source: https://s2.antv.antgroup.com/en/api/general/s2-options

Configuration for customizing tooltip behavior and appearance.

```APIDOC
## Tooltips

### Description
Configures how tooltips appear, their content, and their positioning.

### Parameters
- **showTooltip** (boolean) - Optional - Whether to display the tooltip.
- **content** (ReactNode | string | function) - Optional - Customize tooltip content.
- **autoAdjustBoundary** (string) - Optional - Boundary adjustment ('container' | 'body').
- **adjustPosition** (function) - Optional - Custom positioning logic.
- **getContainer** (function) - Optional - Customize the mount container.
```

--------------------------------

### Getting Cell Children Nodes in S2

Source: https://s2.antv.antgroup.com/en/api/basic-class/interaction

Retrieves all child nodes associated with a given cell in the S2 spreadsheet. This method is useful for understanding hierarchical data structures within the table.

```javascript
s2.interaction.getCellChildrenNodes(cell: S2CellType)
```

--------------------------------

### Custom Cell Metadata Function

Source: https://s2.antv.antgroup.com/en/api/general/s2-options

Defines a function to customize cell metadata. It takes the spreadsheet instance and a function to get cell meta information as input, returning the cell meta information.

```typescript
LayoutCellMeta = (spreadsheet: SpreadSheet, getCellData: GetCellMeta) => GetCellMeta;
type GetCellMeta = (rowIndex?: number, colIndex?: number) => ViewMeta;

```

--------------------------------

### Placeholder Configuration

Source: https://s2.antv.antgroup.com/en/api/general/s2-options

Configures empty data placeholders for tables and cells, allowing customization of icons and descriptions.

```APIDOC
## Placeholder

### Description
Empty data placeholder configuration.

### Parameters

#### Request Body
- **cell** ( `((meta: Record<string, any>) => string | undefined | null) | string | null` ) - Optional - Empty cell placeholder.
- **empty** ( `EmptyPlaceholder` ) - Optional - Empty data placeholder (for table).

### EmptyPlaceholder

#### Description
Empty data placeholder configuration (for table mode).

#### Parameters

##### Request Body
- **icon** ( `string` ) - Optional - Custom Icon, supports customSVGIcons registration and built-in icons. Defaults to "Empty".
- **description** ( `string` ) - Optional - Custom description content. Defaults to "No Data".
```

--------------------------------

### Configure S2 Sorting Parameters

Source: https://s2.antv.antgroup.com/en/api/general/s2-data-config

Demonstrates how to define sorting parameters for an S2 data configuration object, including field identification, sort method, and null value placement.

```javascript
const s2DataConfig = {
  sortParams: [
    {
      sortFieldId: 'price',
      sortMethod: 'DESC',
      // Null values always at the end (default behavior)
      nullsPlacement: 'last',
    },
  ],
};
```

--------------------------------

### Totals Configuration

Source: https://s2.antv.antgroup.com/en/api/general/s2-options

Configuration for calculating and displaying grand totals and subtotals.

```APIDOC
## Total Configuration

### Description
Defines how totals and subtotals are displayed and calculated.

### Parameters
- **showGrandTotals** (boolean) - Optional - Whether to display the grand total.
- **showSubTotals** (boolean | object) - Optional - Whether to display subtotals.
- **subTotalsDimensions** (string[]) - Optional - Summary dimensions for subtotals.
- **reverseGrandTotalsLayout** (boolean) - Optional - Total layout position (default bottom or right).
- **calcGrandTotals** (CalcTotals) - Optional - Custom calculation logic for grand totals.
- **calcSubTotals** (CalcTotals) - Optional - Custom calculation logic for subtotals.
```

--------------------------------

### Interval Theme Configuration

Source: https://s2.antv.antgroup.com/en/api/general/s2-theme

Configuration for mini bar chart style used in conditional formatting.

```APIDOC
## Interval Theme

### Description
Configuration for mini bar chart style (conditional formatting).

### Parameters
- **height** (number) - Optional - Bar height.
- **fill** (string) - Optional - Color fill.
```

--------------------------------

### Configure S2 Conditions

Source: https://s2.antv.antgroup.com/en/api/general/s2-options

Demonstrates how to apply various conditional formatting rules including text, interval, background, and icon conditions within the S2 options object.

```javascript
const options = {
  conditions: {
    text: [{
      field: "province",
      mapping: (fieldValue, data, cell) => ({
        fill: "green",
        fontSize: 16,
        opacity: 0.2,
        textAlign: 'right'
      }),
    }],
    interval: [{
      field: "sub_type",
      mapping: (fieldValue, data, cell) => ({
        fill: "green",
        isCompare: true,
        maxValue: 8000,
        minValue: 300,
      }),
    }],
    background: [{
      field: "count",
      mapping: (fieldValue, data, cell) => ({
        fill: "green",
        intelligentReverseTextColor: true,
      }),
    }],
    icon: [{
      field: "number",
      position: 'left',
      mapping: (fieldValue, data, cell) => ({
        icon: "InfoCircle",
        fill: "green",
      }),
    }],
  },
};
```

--------------------------------

### Tooltip Configuration API

Source: https://s2.antv.antgroup.com/en/api/general/s2-options

Defines the core structures for displaying and interacting with tooltips, including positioning, data points, and operational menus.

```APIDOC
## TooltipShowOptions

### Description
Configures the display parameters for a tooltip, including its position, content, and associated data.

### Parameters
#### Request Body
- **position** (TooltipPosition) - Required - Tooltip display location
- **data** (TooltipData) - Optional - Tooltip data content
- **cellInfos** (Record<string, any>) - Optional - Cell information
- **options** (TooltipOptions) - Optional - Tooltip part configuration
- **content** (ReactNode | string) - Optional - Custom tooltip content renderer
- **event** (Event) - Optional - Current event

### Request Example
{
  "position": { "x": 100, "y": 200 },
  "data": { "name": "Cell Name" },
  "options": { "hideSummary": false }
}

## TooltipPosition

### Description
Defines the coordinate system for tooltip placement.

### Parameters
- **x** (number) - Required - Abscissa
- **y** (number) - Required - Y-axis

## TooltipOperation

### Description
Configuration for tooltip interactive elements such as sorting and custom action menus.

### Parameters
- **hiddenColumns** (boolean) - Optional - Whether to enable hidden columns
- **sort** (boolean) - Optional - Enable sorting within the group
- **tableSort** (boolean) - Optional - Enable sorting of list column headers
- **menus** (TooltipOperatorMenu[]) - Optional - Custom action configuration items
- **onClick** (Function) - Optional - Callback for action item clicks
```

--------------------------------

### Frozen Header Configuration

Source: https://s2.antv.antgroup.com/en/api/general/s2-options

Configure row and column freezing for pivot and schedule tables.

```APIDOC
## Frozen Configuration

### Description
Defines how rows and columns are frozen within the table interface.

### Parameters
- **rowHeader** (boolean|number) - Optional - Freezes the row header area.
- **rowCount** (number) - Optional - Number of frozen rows from the top.
- **colCount** (number) - Optional - Number of frozen columns from the left.
- **trailingRowCount** (number) - Optional - Number of frozen rows from the bottom.
- **trailingColCount** (number) - Optional - Number of frozen columns from the right.
```

--------------------------------

### Configure Linear Gradient Fill

Source: https://s2.antv.antgroup.com/en/api/graphic

Demonstrates how to apply a linear gradient to a fill attribute using the 'l' syntax. The gradient angle is specified in parentheses, followed by color stops.

```javascript
// Use gradient fill, gradient angle is 0, start color #95F0FF, end color #3A9DBF
fill: `l(0) 0:#95F0FF 1:#3A9DBF`
```

--------------------------------

### Pagination Configuration

Source: https://s2.antv.antgroup.com/en/api/general/s2-options

Configures the paging behavior for data tables.

```APIDOC
## Pagination

### Description
Settings for controlling data pagination.

### Parameters
- **pageSize** (number) - Required - Quantity per page
- **current** (number) - Required - Current page number (starting from 1)
- **total** (number) - Optional - Total number of data items
```

--------------------------------

### Configure Textures

Source: https://s2.antv.antgroup.com/en/api/graphic

This endpoint allows you to fill shapes with specific textures, which can be images or Data URLs. It supports various repetition modes for the texture.

```APIDOC
## Configure Textures

### Description
Fill the shape with a specific texture. Texture content can be directly images or Data URLs.

- `p` means to use texture, that is _pattern_ , the green font is a variable, which can be customized
- There are 4 types of repetitions:
  - `a` : the pattern repeats horizontally and vertically
  - `x` : the pattern repeats only horizontally
  - `y` : the pattern repeats only vertically
  - `n` : the pattern is displayed only once (not repeated)

### Request Example
```json
{
  "fill": "p(a)https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*58XjQY1tO7gAAAAAAAAAAABkARQnAQ"
}
```

### Response
This configuration is applied directly to the shape's fill property. No specific response body is defined for this configuration itself, but its effect is reflected in the rendered output.
```

--------------------------------

### Interaction Configuration

Source: https://s2.antv.antgroup.com/en/api/basic-class/interaction

Configuration options for table interactions such as highlighting, selection, and resizing.

```APIDOC
## Interaction Configuration

### Description
Configure various interaction behaviors for the S2 table component, including hover effects, selection logic, and copy settings.

### Parameters
#### Configuration Options
- **linkFields** (string[]) - Optional - Defines fields that act as external links.
- **selectedCellsSpotlight** (boolean) - Optional - Enables spotlight effect on selected cells. Default: false.
- **hoverHighlight** (boolean) - Optional - Highlights current cell and headers on hover. Default: true.
- **hoverFocus** (boolean | {duration: number}) - Optional - Keeps highlight and shows tooltip after hover duration. Default: true.
- **hiddenColumnFields** (string[]) - Optional - List of columns hidden by default.
- **enableCopy** (boolean) - Optional - Allows data copying. Default: false.
- **withHeader** (boolean) - Optional - Includes headers when copying. Default: false.
- **withFormat** (boolean) - Optional - Uses field formatting when copying. Default: false.
- **scrollSpeedRatio** (ScrollSpeedRatio) - Optional - Controls horizontal and vertical scroll rates.
- **autoResetSheetStyle** (boolean) - Optional - Resets state on click outside or ESC. Default: true.
- **resize** (boolean | ResizeInteractionOptions) - Optional - Controls resize hotspot visibility. Default: true.
- **brushSelection** (boolean | BrushSelection) - Optional - Enables brush selection. Default: true.
- **multiSelection** (boolean) - Optional - Enables multi-cell selection. Default: true.
- **rangeSelection** (boolean) - Optional - Enables interval selection. Default: true.
- **scrollbarPosition** ('content' | 'canvas') - Optional - Sets scrollbar position. Default: 'content'.
- **selectedCellHighlight** (boolean | object) - Optional - Configures highlighting behavior for selected cells.
- **overscrollBehavior** ('auto' | 'contain' | 'none' | null) - Optional - Controls overscroll behavior. Default: 'auto'.
```

--------------------------------

### Initialize Vue SheetComponent

Source: https://s2.antv.antgroup.com/en/api/components/sheet-component

Basic usage of the SheetComponent in a Vue template, demonstrating the required data configuration and sheet type selection.

```vue
<template>
  <SheetComponent 
    :sheetType="pivot" 
    :dataCfg="dataCfg" 
    :options="options" 
  />
</template>
```

--------------------------------

### TooltipOperatorMenu Configuration

Source: https://s2.antv.antgroup.com/en/api/general/s2-options

Defines the structure for tooltip operation items, including keys, display logic, and click handlers.

```APIDOC
## TooltipOperatorMenu

### Description
Defines the list of operation items displayed within a tooltip.

### Parameters
- **key** (string) - Required - Uniquely identifies the menu item
- **text** (ReactNode | string) - Optional - Display name
- **icon** (ReactNode | string) - Optional - Custom icon
- **visible** (boolean | (cell) => boolean) - Optional - Visibility logic, defaults to true
- **onClick** ((cell: S2CellType) => void) - Optional - Click event callback
- **children** (TooltipOperatorMenu) - Optional - Submenu list
```

--------------------------------

### Style Configuration

Source: https://s2.antv.antgroup.com/en/api/general/s2-options

Defines the visual layout and cell dimensions for the S2 component.

```APIDOC
## Style

### Description
Global style settings including layout types and cell dimensions.

### Parameters
- **layoutWidthType** (adaptive | colAdaptive | compact) - Optional - Cell width layout strategy
- **compactExtraWidth** (number) - Optional - Extra width for compact mode
- **compactMinWidth** (number) - Optional - Minimum cell width for compact mode

### DataCell Configuration
- **width** (number) - Optional - Cell width (default: 96)
- **height** (number) - Optional - Cell height (default: 30)

### ColCell Configuration
- **width** (number | (colNode: Node) => number) - Optional - Column width
- **height** (number | (colNode: Node) => number) - Optional - Column height
- **widthByField** (Record<string, number>) - Optional - Field-specific width mapping
```

--------------------------------

### Interface Definitions

Source: https://s2.antv.antgroup.com/en/api/basic-class/base-facet

Core interfaces for managing spreadsheet layout, scroll offsets, and grid configurations.

```APIDOC
## Data Structures

### LayoutResult
Represents the calculated layout of the spreadsheet, including hierarchies and leaf nodes for rows and columns.

### CellScrollOffset
Defines the scroll state of a cell, including delta values and absolute offsets.

### BaseHeaderConfig
Configuration object for spreadsheet headers, including dimensions, viewport settings, and data nodes.

### ViewCellHeights
Utility interface for calculating cell height metrics, including total height and index range lookups.
```

--------------------------------

### Configure Shape Texture Fill

Source: https://s2.antv.antgroup.com/en/api/graphic

Demonstrates how to apply a texture to a shape using the fill property. The syntax supports specifying repetition modes such as 'a' for both directions, 'x' for horizontal, 'y' for vertical, or 'n' for no repetition.

```javascript
fill: 'p(a)https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*58XjQY1tO7gAAAAAAAAAAABkARQnAQ';
```

--------------------------------

### Theme Configuration Objects

Source: https://s2.antv.antgroup.com/en/api/general/s2-theme

Definitions for various theme configuration objects used to style the S2 component.

```APIDOC
## Theme Configuration Objects

### Description
Provides configuration structures for customizing the visual appearance of S2 components, including split lines, text, cells, icons, and mini-charts.

### SplitLine
- **horizontalBorderColor** (string) - Optional - Horizontal divider color
- **horizontalBorderColorOpacity** (number) - Optional - Horizontal divider color transparency (Default: 0.2)
- **horizontalBorderWidth** (number) - Optional - Horizontal split line width (Default: 2)
- **verticalBorderColor** (string) - Optional - Vertical line color
- **verticalBorderColorOpacity** (number) - Optional - Vertical split line color transparency (Default: 0.25)
- **verticalBorderWidth** (number) - Optional - Vertical dividing line width (Default: 2)
- **showShadow** (boolean) - Optional - Whether to display the outer shadow (Default: true)

### TextTheme
- **textAlign** (string) - Optional - Alignment: left, center, right
- **textBaseline** (string) - Optional - Baseline: top, middle, bottom
- **fontFamily** (string) - Optional - Font family
- **fontSize** (number) - Optional - Font size
- **fontWeight** (number/string) - Optional - Font weight
- **fill** (string) - Optional - Font color

### Cell Theme
- **backgroundColor** (string) - Optional - Cell background color
- **padding** (Padding) - Optional - Cell padding
- **interactionState** (InteractionStateTheme) - Optional - Cell interaction state configuration

### MiniChartTheme
- **line** (LineTheme) - Optional - Line chart style
- **bar** (BarTheme) - Optional - Histogram style
- **bullet** (BulletTheme) - Optional - Bullet chart style

### Response Example
{
  "splitLine": {
    "horizontalBorderWidth": 2,
    "showShadow": true
  },
  "textTheme": {
    "fontSize": 12,
    "fill": "#000"
  }
}
```

--------------------------------

### Define Tooltip Configuration Interfaces

Source: https://s2.antv.antgroup.com/en/api/general/s2-options

TypeScript interfaces defining the structure for tooltip data, positioning, and operator configuration within the AntV S2 framework.

```typescript
interface TooltipPosition {
  x: number;
  y: number;
}

interface ListItem {
  name: string;
  value: string | number;
  icon?: React.ReactNode;
}

interface TooltipSummaryOptions {
  name: string;
  value: number | string;
  selectedData: Record<string, any>;
}

interface TooltipOperatorOptions {
  menus?: TooltipOperatorMenu[];
  onClick?: (params: { item: any; key: string; keyPath: string[]; domEvent: Event }) => void;
  selectedKeys?: string[];
}
```

--------------------------------

### S2 Theme Configuration

Source: https://s2.antv.antgroup.com/en/api/general/s2-theme

Provides methods to set and configure the theme for S2 tables, allowing for uniform or granular control over visual elements.

```APIDOC
## POST /api/s2/theme

### Description
Configures the theme for S2 tables. This can be done globally by setting theme, palette, and name, or by configuring individual theme properties.

### Method
POST

### Endpoint
/api/s2/theme

### Parameters
#### Request Body
- **theme** (S2Theme) - Optional - The main theme schema configuration.
- **palette** (Palette) - Optional - The color palette configuration.
- **name** (string) - Optional - The name of the theme, defaults to 'default'. Can be 'colorful' or 'gray'.

### Request Example
```json
{
  "theme": {},
  "palette": {},
  "name": "default"
}
```

### Response
#### Success Response (200)
- **status** (string) - Indicates the success of the operation.

#### Response Example
```json
{
  "status": "success"
}
```
```

```APIDOC
## POST /api/s2/theme/set

### Description
Sets individual theme properties for S2 tables, allowing for granular customization of elements like cell background and text size.

### Method
POST

### Endpoint
/api/s2/theme/set

### Parameters
#### Request Body
- **rowCell** (object) - Optional - Configuration for row cells.
  - **cell** (object) - Optional - Cell style configuration.
    - **backgroundColor** (string) - Optional - Background color for cells.
- **colCell** (object) - Optional - Configuration for column cells.
- **dataCell** (object) - Optional - Configuration for data cells.

### Request Example
```json
{
  "rowCell": {
    "cell": {
      "backgroundColor": "#fff"
    }
  }
}
```

### Response
#### Success Response (200)
- **status** (string) - Indicates the success of the operation.

#### Response Example
```json
{
  "status": "success"
}
```
```

--------------------------------

### Bullet Theme Configuration

Source: https://s2.antv.antgroup.com/en/api/general/s2-theme

Configuration for the mini bullet chart style, including progress bars, markers, and color ranges.

```APIDOC
## Bullet Theme

### Description
Configures the style and appearance of the mini bullet chart component.

### Parameters
- **progressBar** (Progress Bar) - Optional - Progress bar style settings.
- **comparativeMeasure** (Comparative Measure) - Optional - Measurement marker settings.
- **rangeColors** (RangeColors) - Optional - Status color settings.
- **backgroundColor** (string) - Optional - Background color of the chart.

### Request Example
{
  "progressBar": { "widthPercent": 0.8 },
  "rangeColors": { "good": "#00FF00", "bad": "#FF0000" }
}
```

--------------------------------

### SpreadsheetProps Configuration

Source: https://s2.antv.antgroup.com/en/api/components/sheet-component

Defines the properties required to configure and interact with the S2 SheetComponent.

```APIDOC
## SpreadsheetProps

### Description
The SpreadsheetProps interface defines the configuration options and event handlers for the React SheetComponent, allowing for deep customization of table behavior, data mapping, and user interaction.

### Parameters
#### Request Body (Props)
- **sheetType** (pivot | table | gridAnalysis | strategy) - Optional - Form type of the table. Default: pivot.
- **dataCfg** (S2DataConfig) - Required - Pivot table data mapping configuration.
- **options** (SheetComponentOptions) - Required - Pivot table property configuration.
- **adaptive** (boolean | object) - Optional - Whether to adapt to window size. Default: false.
- **themeCfg** (ThemeCfg) - Optional - Custom pivot table theme styles.
- **loading** (boolean) - Optional - Controls the loading state.

### Event Callbacks
- **onRowCellClick** (function) - Optional - Callback for row header mouse click events.
- **onColCellClick** (function) - Optional - Callback for column header mouse click events.
- **onDataCellClick** (function) - Optional - Callback for numeric cell mouse click events.
- **onRowCellHover** (function) - Optional - Callback for row header hover events.

### Request Example
{
  "sheetType": "pivot",
  "dataCfg": { "fields": { "rows": ["province"], "values": ["price"] } },
  "options": { "width": 600, "height": 400 },
  "adaptive": true
}
```

--------------------------------

### Configure Radial Gradient Fill

Source: https://s2.antv.antgroup.com/en/api/graphic

Demonstrates how to apply a radial gradient to a fill attribute using the 'r' syntax. The center coordinates and radius are defined as relative values between 0 and 1.

```javascript
// Use gradient fill, the center of the start circle is the center of the bounding box of the filled object, radius is 1 * (bounding box diagonal length / 2), start color #ffffff, end color #1890ff
fill: 'r(0.5, 0.5, 1) 0:#ffffff 0.5:#1890ff'
```

--------------------------------

### Resize Configuration

Source: https://s2.antv.antgroup.com/en/api/components/sheet-component

Defines parameters for table resizing interactions, including drag offsets and affected areas.

```APIDOC
## ResizeInfo

### Description
Configuration object for handling column width and row height resizing via drag interactions.

### Fields
- **type** (string) - Resize direction: 'Horizontal' | 'Vertical'
- **offsetX** (number) - Horizontal drag offset
- **offsetY** (number) - Vertical drag offset
- **resizedWidth** (number) - Resulting width after drag
- **resizedHeight** (number) - Resulting height after drag
- **effect** (string) - Area affected: 'Field' | 'Cell' | 'Tree' | 'Series'
```

--------------------------------

### BaseChartData Configuration

Source: https://s2.antv.antgroup.com/en/api/general/s2-data-config

Configuration object for line and bar mini-charts in S2. Requires chart type, encoding for x and y axes, and the raw data array. Supports additional custom fields.

```typescript
{
  type: 'line' | 'bar';
  encode: { x: string; y: string };
  data: Data[];
  [key: string]: unknown;
}
```

--------------------------------

### S2 Theme Configuration Details

Source: https://s2.antv.antgroup.com/en/api/general/s2-theme

Detailed schema definitions for various theme components, including ThemeCfg, Palette, S2Theme, and their sub-components.

```APIDOC
## ThemeCfg Object

### Description
Represents the overall table theme configuration, including schema, palette, and name.

### Fields
- **theme** (S2Theme) - Optional - The theme schema.
- **palette** (Palette) - Optional - The color palette.
- **name** (string) - Optional - The name of the theme. Defaults to 'default'. Options: 'colorful', 'gray'.
```

```APIDOC
## Palette Object

### Description
Defines the color swatches for the table theme.

### Fields
- **brandColor** (string) - Optional - The brand color.
- **basicColors** (string[]) - Optional - An array of basic colors.
- **basicColorRelations** (Array<{ basicColorIndex: number; standardColorIndex: number;}>) - Optional - Relations between basic colors and standard color palette indices.
- **semanticColors** (object) - Optional - Colors for business semantics (e.g., 'red fall green rise'). Keys are strings, values are colors.
- **others** (object) - Optional - Additional color definitions. Keys are strings, values are colors.
```

```APIDOC
## S2Theme Object

### Description
Defines the main theme schema for the table.

### Fields
- **cornerCell** (DefaultCellTheme) - Optional - Theme for corner header cells.
- **rowCell** (DefaultCellTheme) - Optional - Theme for row header cells.
- **colCell** (DefaultCellTheme) - Optional - Theme for column header cells.
- **dataCell** (DefaultCellTheme) - Optional - Theme for data cells.
- **resizeArea** (ResizeArea) - Optional - Style for the resize handles.
- **scrollBar** (ScrollBarTheme) - Optional - Style for the scroll bars.
- **splitLine** (SplitLine) - Optional - Style for cell divider lines.
- **prepareSelectMask** (InteractionStateTheme) - Optional - Style for the brush mask.
- **background** (background) - Optional - Background style.
- **[key: string]** (unknown) - Optional - Additional fields for custom theme parameters.
```

```APIDOC
## DefaultCellTheme Object

### Description
Provides default styling for various cell types.

### Fields
- **bolderText** (TextTheme) - Optional - Style for bold text.
- **text** (TextTheme) - Optional - General text style.
- **seriesText** (TextTheme) - Optional - Style for series text.
- **measureText** (TextTheme) - Optional - Style for measure text.
- **cell** (Cell Theme) - Optional - Basic cell style.
- **icon** (IconTheme) - Optional - Style for icons within cells.
- **seriesNumberWidth** (number) - Optional - Width of the series number column. Defaults to 80.
- **miniChart** (MiniChartTheme) - Optional - Style for mini-charts within cells.
```

```APIDOC
## ResizeArea Object

### Description
Styles for the column width and row height adjustment hotspots.

### Fields
- **size** (number) - Optional - Size of the hotspot. Defaults to 3.
- **background** (string) - Optional - Background color of the hotspot.
- **backgroundOpacity** (number) - Optional - Opacity of the hotspot background.
- **guideLineColor** (string) - Optional - Color of the guide line.
- **guideLineDash** (number[]) - Optional - Dash pattern for the guide line. Defaults to `[3, 3]`.
- **interactionState** (InteractionState) - Optional - Styling for the interactive state of the hotspot.
```

```APIDOC
## ScrollBarTheme Object

### Description
Defines the appearance and behavior of scroll bars.

### Fields
- **trackColor** (string) - Optional - Color of the scroll bar track. Defaults to `rgba(0,0,0,0)`.
- **thumbHoverColor** (string) - Optional - Color of the scroll bar thumb on hover. Defaults to `rgba(0,0,0,0.4)`.
- **thumbColor** (string) - Optional - Color of the scroll bar thumb. Defaults to `rgba(0,0,0,0.15)`.
- **thumbHorizontalMinSize** (string) - Optional - Minimum size for the horizontal scroll bar thumb.
- **thumbVerticalMinSize** (string) - Optional - Minimum size for the vertical scroll bar thumb.
- **size** (number) - Optional - Size of the scroll bar. Defaults to 3 for mobile, 6 for PC.
- **hoverSize** (number) - Optional - Size of the scroll bar when hovered. Defaults to 16.
- **lineCap** (string) - Optional - How the end of line segments are drawn. Options: 'butt', 'round', 'square'. Defaults to 'round'.
```

--------------------------------

### Configure Resize Interaction Options in S2

Source: https://s2.antv.antgroup.com/en/api/basic-class/interaction

Sets options for controlling the resize interaction hotspots in AntV S2. This includes enabling/disabling resize for different cell types and customizing resize behavior.

```typescript
interface ResizeInteractionOptions {
  rowCellVertical?: boolean; // Whether to open the line header vertical resize hot zone
  cornerCellHorizontal?: boolean; // Whether to enable the resize hotspot in the horizontal direction of the corner head
  colCellHorizontal?: boolean; // Whether to enable the horizontal resize hotspot of the column header
  colCellVertical?: boolean; // Whether to enable the column header vertical resize hot zone (this configuration is invalid when the column header is hidden)
  rowResizeType?: 'all' | 'current'; // Controls if row height resize affects all rows or just the current one
  disable?: (resizeInfo: S2CellType ) => boolean; // Controls whether row height resize is effective
  visible?: (cell: S2CellType ) => boolean; // Customizes whether the resize hotspot is displayed for the current cell
}

```

--------------------------------

### SheetComponentOptions for React

Source: https://s2.antv.antgroup.com/en/api/components/sheet-component

Configuration options for the SheetComponent in React, extending S2Options with specific adjustments for tooltip content and pagination.

```APIDOC
## SheetComponentOptions

The `options` of React components are inherited from S2Options, there are two differences:

1.  The content of tooltip has changed from `Element | string` to `ReactNode`, which can be any `jsx` element.
2.  The paging configuration has changed from the paging configuration of S2 to the paging configuration of `antd`, that is, the api transparent transmission of the `antd` paging component is supported.

```typescript
import type { Pagination, S2Options } from '@antv/s2';
import type { PaginationProps as AntdPaginationProps } from 'antd';

type SheetComponentOptions = S2Options<
   React.ReactNode,
   Pagination & AntdPaginationProps
>;
```
```

--------------------------------

### Header Action Icon Click Parameters

Source: https://s2.antv.antgroup.com/en/api/general/s2-options

Defines the parameters passed when a custom header action icon is clicked. Includes the icon name, cell meta information, and the click event object.

```typescript
interface HeaderIconClickParams {
  iconName: string;
  meta: Node;
  event: Event;
}

```

--------------------------------

### Custom Interaction API

Source: https://s2.antv.antgroup.com/en/api/basic-class/interaction

Define custom interaction logic by extending the base event system.

```APIDOC
## CustomInteraction

### Description
Define custom interactions by providing a unique key and an interaction constructor.

### Parameters
- **key** (string) - Required - Unique identifier for the interaction.
- **interaction** (Interaction Constructor) - Required - The constructor for the custom interaction logic.
```

--------------------------------

### DataSet Configuration

Source: https://s2.antv.antgroup.com/en/api/general/s2-options

Defines how to configure a custom data set for use within the S2 library. It takes a SpreadSheet object and returns a BaseDataSet.

```APIDOC
## DataSet

### Description
Custom data set configuration.

### Type Definition
```typescript
DataSet = (spreadsheet: SpreadSheet) => BaseDataSet;
```
```

--------------------------------

### ResizeInteractionOptions

Source: https://s2.antv.antgroup.com/en/api/general/s2-options

Configuration options for controlling the resizing behavior of rows and columns in the S2 table.

```APIDOC
## ResizeInteractionOptions

### Description
Controls the interactive resize hotspots for rows and columns.

### Parameters
- **rowCellVertical** (boolean) - Optional - Whether to open the line header vertical resize hot zone.
- **cornerCellHorizontal** (boolean) - Optional - Whether to enable the resize hotspot in the horizontal direction of the corner head.
- **colCellHorizontal** (boolean) - Optional - Whether to enable the horizontal resize hotspot of the column header.
- **colCellVertical** (boolean) - Optional - Whether to enable the column header vertical resize hot zone.
- **rowResizeType** (string) - Optional - Controls whether row height resize applies to all cells or the current row ('all' | 'current').
- **disable** (function) - Optional - Callback to control if row height resize is effective.
- **visible** (function) - Optional - Callback to customize if the resize hotspot is visible.
```
Tokens:
Raw