S2

S2 支持在树状结构下，配置折叠/展开的节点，默认展开所有节点.

平铺模式，后续支持

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

折叠指定节点

配置 collapseFields, 支持 维值 id 和 维度 field 两种方式，即可以是 root[&] 浙江省 和 city

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

根据节点对应维值 id

指定 id 可以折叠指定节点，如配置为 root[&] 浙江省, 那么 浙江省 下所有节点都会被折叠

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

根据节点对应维度 field

指定 field 可以折叠节点对应维度的节点，如行头配置了 province, city 两个维度，collapseFields 配置为 ['city'], 那么所有城市都会被折叠

const s2DataConfig = {
  fields: {
    rows: ['province', 'city']
  }
}

const s2Options = {
  style: {
    rowCell: {
      collapseFields: {
        province: false,
        city: true
      }
    },
  },
}

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

折叠所有节点

配置 collapseAll 即可，优先级小于 collapseFields 和 expandDepth, 详见配置优先级

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

默认展开层级

表格默认展开全部节点，collapseFields 需要预先知道对应的节点 id 或 field, 当不关心具体节点，只关心节点层级时，可以使用 expandDepth 语法糖，配置展开层级（从 0 开始）优先级小于 collapseFields, 详见配置优先级

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

配置优先级

S2 提供了三个折叠/展开相关配置，以满足不同的使用场景，优先级如下：

collapseFields > expandDepth > collapseAll

如果想让 collapseAll 生效，可将 collapseFields 和 expandDepth 置为 null 即可

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

如果行头是自定义节点 (CustomTreeNode), 则优先级如下：

collapseFields > expandDepth > collapseAll > CustomTreeNode.collapsed

API 文档

Style

功能描述：样式设置。查看文档和示例

参数	类型	功能描述
layoutWidthType	`adaptive \| colAdaptive \| compact`	单元格宽度布局类型 `adaptive` : 行列等宽，均分整个 `Canvas` 画布宽度 `colAdaptive`：列等宽，行头紧凑布局，列等分画布宽度减去行头宽度的剩余宽度 `compact`：行列紧凑布局，指标维度少的时候无法布满整个画布，列头宽度为实际内容宽度（取当前列最大值，采样每一列前 50 条数据）
dataCell	DataCell	数值单元格配置
rowCell	RowCell	行头单元格配置
colCell	ColCell	列头单元格配置
cornerCell	CornerCell	角头单元格配置
mergedCell	MergedCell	合并单元格配置
seriesNumberCell	SeriesNumberCell	序号单元格配置

DataCell

功能描述：数值单元格配置

参数	说明	类型	默认值	必选
width	单元格宽度（优先级：`colCell.widthByField > colCell.width > dataCell.width`)	`number`	96	-
height	单元格高度（优先级：`rowCell.heightByField > rowCell.height > dataCell.height`)	`number`	30	-
valuesCfg	单元格配置	`{ originalValueField?: string, widthPercent?: number[], showOriginalValue?: boolean }`		-

其他公用配置见 CellTextWordWrapStyle

ColCell

功能描述：列头单元格配置

参数	说明	类型	默认值
width	单元格宽度，可根据当前列头节点动态设置（叶子节点有效）	`number \| (colNode: Node) => number`	96
height	单元格高度，可根据当前列头节点动态设置（叶子节点有效）	`number \| (colNode: Node) => number`	30
widthByField	根据度量值设置宽度（拖拽或者预设宽度场景）, `field` 对应 `s2DataConfig.fields.columns` 中的 `field` 或列头 id （优先级大于 `width`) 查看详情	`Record<string, number>`	-
heightByField	根据度量值设置高度（拖拽或者预设高度场景）, `field` 对应 `s2DataConfig.fields.columns` 中的 `field` 或列头 id （优先级大于 `height`) 查看详情	`Record<string, number>`	-
hideValue	默认数值挂列头，会同时显示列头和数值，隐藏数值，使其更美观。（即 `s2DataConfig.fields.values` 且仅在单数值时有效，多数值时推荐使用隐藏列头)	`boolean`	false

RowCell

功能描述：行头单元格配置

参数	说明	类型	默认值
width	行单元格宽度，可根据当前行头节点动态设置，树状结构同样适用	`number \| (rowNode: Node) => number`
treeWidth	树状模式下行单元格宽度，优先级高于 `width`, 值为空时则默认使用 `width`	`number`
height	行单元格高度，可根据当前行头节点动态设置	`number \| (rowNode: Node) => number`	30
collapseFields	树状模式下行头自定义折叠节点。支持 id (`'root[&] 行头维度值'`) 和维度 field (`'city'`) 两种格式，优先级大于 `collapseAll` 和 `expandDepth`, 设置为 `null` 时优先级最低。查看 demo	`Record<string, boolean>`
collapseAll	在树状结构模式下行头是否默认收起全部。	`boolean`	`false`
expandDepth	在树状结构模式下行头默认展开展开的层级（层级从 0 开始）, 设置为 `null` 时优先级最低	`number`
showTreeLeafNodeAlignDot	树状模式下行头叶子节点是否显示层级占位点	`boolean`	`false`
withByField	根据 `field` 设置每行的宽度。`field` 对应 `s2DataConfig.fields.rows` 中的 `field` 或列头 id （优先级大于 `width`) 查看详情	`Record<string, number>`	-
heightByField	根据 `field` 设置每行的高度。 1. 透视表：`field` 对应 `s2DataConfig.fields.rows` 中的 `field` 或列头 id. 2. 明细表：`field` 对应行序号，从 `1` 开始。（优先级大于 `height`) 查看详情	`Record<string, number>`	-

CornerCell

其他公用配置见 CellTextWordWrapStyle

MergedCell

其他公用配置见 CellTextWordWrapStyle

SeriesNumberCell

其他公用配置见 CellTextWordWrapStyle

CellTextWordWrapStyle

功能描述：单元格换行配置。查看示例

参数	说明	类型	默认值
wordWrap	文本是否自动换行（数值单元格不建议换行）。了解更多	`boolean`	`true`
maxLines	最大行数，文本超出后将被截断，当手动拖拽调整高度或存在自定义单元格高度时，为保证展示合理性，会根据当前文本行高计算出能展示的最大行数，覆盖默认的 `maxLines` 配置。该配置支持配置为 `Infinity`（数值单元格不建议换行），需要配合 `wordWrap` 和 `textOverflow` 一起使用。了解更多	`number`	`1`
maxLines	最大行数，文本超出后将被截断，支持配置为 `Infinity`（数值单元格不建议换行），需要配合 `wordWrap` 和 `textOverflow` 一起使用。了解更多	`number`	`1`
textOverflow	自定义隐藏的文本溢出内容，例如直接裁剪、追加省略号或一个自定义字符串，需要配合 `wordWrap` 和 `maxLines` 一起使用。了解更多	`string`	`ellipsis`

S2 支持在树状结构下，配置折叠/展开的节点，默认展开所有节点.

平铺模式，后续支持

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

折叠指定节点

配置 collapseFields, 支持 维值 id 和 维度 field 两种方式，即可以是 root[&] 浙江省 和 city

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

根据节点对应维值 id

指定 id 可以折叠指定节点，如配置为 root[&] 浙江省, 那么 浙江省 下所有节点都会被折叠

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

根据节点对应维度 field

指定 field 可以折叠节点对应维度的节点，如行头配置了 province, city 两个维度，collapseFields 配置为 ['city'], 那么所有城市都会被折叠

const s2DataConfig = {
  fields: {
    rows: ['province', 'city']
  }
}

const s2Options = {
  style: {
    rowCell: {
      collapseFields: {
        province: false,
        city: true
      }
    },
  },
}

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

折叠所有节点

配置 collapseAll 即可，优先级小于 collapseFields 和 expandDepth, 详见配置优先级

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

默认展开层级

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

配置优先级

S2 提供了三个折叠/展开相关配置，以满足不同的使用场景，优先级如下：

collapseFields > expandDepth > collapseAll

如果想让 collapseAll 生效，可将 collapseFields 和 expandDepth 置为 null 即可

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

如果行头是自定义节点 (CustomTreeNode), 则优先级如下：

collapseFields > expandDepth > collapseAll > CustomTreeNode.collapsed

API 文档

Style

功能描述：样式设置。查看文档和示例

参数	类型	功能描述
layoutWidthType	`adaptive \| colAdaptive \| compact`	单元格宽度布局类型 `adaptive` : 行列等宽，均分整个 `Canvas` 画布宽度 `colAdaptive`：列等宽，行头紧凑布局，列等分画布宽度减去行头宽度的剩余宽度 `compact`：行列紧凑布局，指标维度少的时候无法布满整个画布，列头宽度为实际内容宽度（取当前列最大值，采样每一列前 50 条数据）
dataCell	DataCell	数值单元格配置
rowCell	RowCell	行头单元格配置
colCell	ColCell	列头单元格配置
cornerCell	CornerCell	角头单元格配置
mergedCell	MergedCell	合并单元格配置
seriesNumberCell	SeriesNumberCell	序号单元格配置

DataCell

功能描述：数值单元格配置

参数	说明	类型	默认值	必选
width	单元格宽度（优先级：`colCell.widthByField > colCell.width > dataCell.width`)	`number`	96	-
height	单元格高度（优先级：`rowCell.heightByField > rowCell.height > dataCell.height`)	`number`	30	-
valuesCfg	单元格配置	`{ originalValueField?: string, widthPercent?: number[], showOriginalValue?: boolean }`		-

其他公用配置见 CellTextWordWrapStyle

ColCell

功能描述：列头单元格配置

参数	说明	类型	默认值
width	单元格宽度，可根据当前列头节点动态设置（叶子节点有效）	`number \| (colNode: Node) => number`	96
height	单元格高度，可根据当前列头节点动态设置（叶子节点有效）	`number \| (colNode: Node) => number`	30
widthByField	根据度量值设置宽度（拖拽或者预设宽度场景）, `field` 对应 `s2DataConfig.fields.columns` 中的 `field` 或列头 id （优先级大于 `width`) 查看详情	`Record<string, number>`	-
heightByField	根据度量值设置高度（拖拽或者预设高度场景）, `field` 对应 `s2DataConfig.fields.columns` 中的 `field` 或列头 id （优先级大于 `height`) 查看详情	`Record<string, number>`	-
hideValue	默认数值挂列头，会同时显示列头和数值，隐藏数值，使其更美观。（即 `s2DataConfig.fields.values` 且仅在单数值时有效，多数值时推荐使用隐藏列头)	`boolean`	false

RowCell

功能描述：行头单元格配置

参数	说明	类型	默认值
width	行单元格宽度，可根据当前行头节点动态设置，树状结构同样适用	`number \| (rowNode: Node) => number`
treeWidth	树状模式下行单元格宽度，优先级高于 `width`, 值为空时则默认使用 `width`	`number`
height	行单元格高度，可根据当前行头节点动态设置	`number \| (rowNode: Node) => number`	30
collapseFields	树状模式下行头自定义折叠节点。支持 id (`'root[&] 行头维度值'`) 和维度 field (`'city'`) 两种格式，优先级大于 `collapseAll` 和 `expandDepth`, 设置为 `null` 时优先级最低。查看 demo	`Record<string, boolean>`
collapseAll	在树状结构模式下行头是否默认收起全部。	`boolean`	`false`
expandDepth	在树状结构模式下行头默认展开展开的层级（层级从 0 开始）, 设置为 `null` 时优先级最低	`number`
showTreeLeafNodeAlignDot	树状模式下行头叶子节点是否显示层级占位点	`boolean`	`false`
withByField	根据 `field` 设置每行的宽度。`field` 对应 `s2DataConfig.fields.rows` 中的 `field` 或列头 id （优先级大于 `width`) 查看详情	`Record<string, number>`	-
heightByField	根据 `field` 设置每行的高度。 1. 透视表：`field` 对应 `s2DataConfig.fields.rows` 中的 `field` 或列头 id. 2. 明细表：`field` 对应行序号，从 `1` 开始。（优先级大于 `height`) 查看详情	`Record<string, number>`	-

CornerCell

其他公用配置见 CellTextWordWrapStyle

MergedCell

其他公用配置见 CellTextWordWrapStyle

SeriesNumberCell

其他公用配置见 CellTextWordWrapStyle

CellTextWordWrapStyle

功能描述：单元格换行配置。查看示例

参数	说明	类型	默认值
wordWrap	文本是否自动换行（数值单元格不建议换行）。了解更多	`boolean`	`true`
maxLines	最大行数，文本超出后将被截断，当手动拖拽调整高度或存在自定义单元格高度时，为保证展示合理性，会根据当前文本行高计算出能展示的最大行数，覆盖默认的 `maxLines` 配置。该配置支持配置为 `Infinity`（数值单元格不建议换行），需要配合 `wordWrap` 和 `textOverflow` 一起使用。了解更多	`number`	`1`
maxLines	最大行数，文本超出后将被截断，支持配置为 `Infinity`（数值单元格不建议换行），需要配合 `wordWrap` 和 `textOverflow` 一起使用。了解更多	`number`	`1`
textOverflow	自定义隐藏的文本溢出内容，例如直接裁剪、追加省略号或一个自定义字符串，需要配合 `wordWrap` 和 `maxLines` 一起使用。了解更多	`string`	`ellipsis`

S2

自定义折叠/展开节点

S2

自定义折叠/展开节点

折叠指定节点

根据节点对应维值 id

根据节点对应维度 field

折叠所有节点

默认展开层级

配置优先级

API 文档

Style

DataCell

ColCell

RowCell

CornerCell

MergedCell

SeriesNumberCell

CellTextWordWrapStyle

折叠指定节点

根据节点对应维值 id

根据节点对应维度 field

折叠所有节点

默认展开层级

配置优先级

API 文档

Style

DataCell

ColCell

RowCell

CornerCell

MergedCell

SeriesNumberCell

CellTextWordWrapStyle