S2 supports configuring collapsed/expanded nodes in the tree structure, and expands all nodes by default.

Tiling mode, follow-up support

const s2Options = {
  hierarchyType: 'tree',
  style: {
    rowCell: {
      // 折叠节点
      collapseFields: {},
      // 展开层级
      expandDepth: 0,
      // 折叠所有
      collapseAll: true
    },
  },
}

Collapse the specified node

Configure collapseFields to support two ways of维值id and维度field , that is, root[&] 浙江省and city

const s2Options = {
  style: {
    rowCell: {
      collapseFields: {},
    },
  },
}

According to the dimension value id corresponding to the node

Specify id to fold the specified node, if configured as root[&] 浙江省, then all nodes浙江省will be folded

const s2Options = {
  style: {
    rowCell: {
      collapseFields: { 'root[&] 浙江省': true },
    },
  },
}

According to the dimension field corresponding to the node

Specifies that the field can collapse the node corresponding to the dimension of the node. For example, if the line header is configured with two dimensions of province and city , and collapseFields is configured as ['city'] , then all cities will be collapsed

const s2DataConfig = {
  fields: {
    rows: ['province', 'city']
  }
}
const s2Options = {
  style: {
    rowCell: {
      collapseFields: { province: false, city: true }
    },
  },
}

const s2Options = {
  style: {
    dataCell: {
      width: 100,
      height: 90
    },
  },
}

collapse all nodes

Just configure collapseAll , the priority is lower than collapseFields , see configuration priority for details

const s2Options = {
  style: {
    rowCell: {
      collapseAll: true,
    },
  },
}

default expansion level

The table expands all nodes by default. collapseFields needs to know the corresponding node id or field in advance. When you don’t care about the specific node but only the node level, you can use the expandDepth syntactic sugar to configure the expansion level (starting from 0) with a lower priority than collapseFields . For details, see configuration priority

const s2Options = {
  style: {
    rowCell: {
      // 展开两层
      expandDepth: 1,
    },
  },
}

configuration priority

S2 provides three folding/expanding related configurations to meet different usage scenarios, and the priorities are as follows:

collapseFields > expandDepth > collapseAll

If you want collapseAll to take effect, you can set collapseFields and expandDepth to null

const s2Options = {
  style: {
    rowCell: {
      collapseFields: null, // 无效
      collapseAll: true, // 生效
      expandDepth: null, // 无效
    },
  },
}

API documentation

style

object is required , default: null Function description: style setting

DataCell

object is required , default: null Function description: Numerical cell configuration

ColCell

object is required , default: null Function description: Column header cell configuration

RowCell

object is required , default: null Function description: row header cell configuration