S2 provides out-of-the-box dimension switching component Switcher . With it, you can easily implement interactive row and column switching, as well as the function of dimension hiding.

Get started quickly

 const switcherFields = {
  rows: {
    items: [{ id: "province" }, { id: "city" }],
    allowEmpty: false,
  },
  columns: {
    items: [{ id: "type" }],
  },
  values: {
    selectable: true,
    items: [{ id: "price" }, { id: "cost" }],
  },
};

import React from "react";
import ReactDOM from "react-dom";
import { Switcher } from "@antv/s2-react";

const onSubmit = (result) => {
  console.log("result:", result);
};

ReactDOM.render(
  <Switcher {...switcherFields} onSubmit={onSubmit} />,
  document.getElementById("container")
);

configuration explanation

dimension configuration

Switcher can receive three types of dimension configurations, namely rows , columns and values . They are all of type SwitcherField .

Among them, the two dimensions of rows and columns can be dragged into each other's configuration boxes, while values ​​can only change the field order in its own configuration box.

By passing sheetType and dimension configuration, the display form of Switcher will also be different:

A dimension (mainly used in schedules)	three dimensions (mainly used in pivot tables)

• By default, each dimension can only be sorted by drag and drop. If you want to control the visibility of its fields , you can set selectable: true , which is used to enable the checkbox of the field:

const field = {
  selectable: true,
  items: [
    /*...*/
  ],
};

• If each field item in the dimension also has associated sub-items, you can set expandable:true , which is used to control whether the sub-items are expanded, or you can further set expandText to customize the prompt text of the expanded checkbox :

const field = {
  expandable: true,
  expandText: "展开同环比", // 默认：展开子项
  items: [
    /*...*/
  ],
};

• If the current dimension needs to keep at least one sub-item that cannot be dragged out during the mobile interaction, you can set allowEmpty:false , which is used to control whether the dimension can drag all sub-items to other dimensions:

const field = {
  allowEmpty: false, // 默认：true
  items: [
    /*...*/
  ],
};

Submit changes

The Switcher component will trigger the onSubmit callback after the popup window is closed, and this callback will receive a parameter of type SwitcherResult , through which you can get the modified result.

All results are grouped by dimension , and each set of fields is flattened and sorted sequentially.

You can see the detailed result data types with the following example:

❗️ Note: In order to reduce the outdated state of the internal state, the Switcher component does not persist the state after the operation . That is to say, after each pop-up window is closed, the internal state of Switcher will be cleared, and when it is opened again, the configuration of each dimension in Props will still prevail.

Customization

• If the built-in trigger button of the Switcher component does not meet your needs, you can customize the trigger button through the title
• The Switcher component also provides the resetText attribute to define the problem of the reset button

• The pop-up layer of the Switcher component is developed based on antd 's Popover , which supports transparent transmission of Popover configuration items to customize the pop-up layer, such as触发方式,箭头指向,卡片弹出方向, etc.

<Switcher popover={{ arrowPointAtCenter: true }} />

🎨 For detailed configuration of the Switcher component, refer to the Switcher Props document.

example

Use with pivot tables

• Row and column values ​​can be shifted relative to each other
• The indicator value can control the display and concealment

Use with schedule

• The column header can control the visibility
• The expansion icon appears corresponding to the column header of the table

​📊 See more examples of dimension switching .