logo

S2

  • 使用文档
  • API 文档
  • 图表示例
  • 在线体验
  • 更新日志
  • 所有产品antv logo arrow
  • 2.x
  • 简介
  • 快速上手
  • 基础教程
    • 基本概念
      Updated
    • 表形态
      • 透视表
        Updated
      • 明细表
        Updated
    • 字段标记
      Updated
    • 小计总计
    • 排序
      • 基础排序
        Updated
      • 组内排序
        Updated
    • 主题配置
      Updated
    • Tooltip
      Updated
    • 数据格式化
      New
    • 多行文本
      New
    • 国际化
    • 分页
      New
  • 进阶教程
    • 单元格渲染类型
      • 链接
      • 图片
        New
      • 视频
        New
      • 迷你图表
      • 结合@antv/g2
      • 自定义渲染
    • 自定义
      • 自定义 Hook
        Updated
      • 自定义行列头分组
        New
      • 自定义 Icon
        Updated
      • 自定义单元格对齐方式
        Updated
      • 自定义单元格宽高
        Updated
      • 自定义排序操作
        Updated
      • 自定义折叠/展开节点
        New
    • 交互
      • 基础交互
        Updated
      • 自定义交互
      • 隐藏列头
        Updated
      • 行列宽高调整
        Updated
      • 合并单元格
      • 滚动
        Updated
      • 复制与导出
        New
      • 高亮/选中单元格
        New
    • 分析组件
      • 简介
        New
      • 高级排序
        Updated
      • 维度切换
        Updated
      • 导出
        Updated
      • 分页
        Updated
      • 维度下钻
        Updated
    • 表格组件
      • 编辑表
      • 趋势分析表
        Updated
    • 高清适配
      Updated
    • 获取表格实例
    • 表格自适应
    • 获取单元格数据
      Updated
    • 注册 AntV/G 插件
      New
    • 透视组合图
      Experimental
    • Vue 3.0 组件 (停止维护)
  • 扩展阅读
    • 数据流处理
      • 透视表
      • 明细表
    • 布局流程
      • 透视表
      • 明细表
    • 性能介绍
      Updated
  • 贡献指南
  • 常见问题
  • S2 2.0 升级指南

自定义单元格对齐方式

上一篇
自定义 Icon
下一篇
自定义单元格宽高

Resources

Ant Design
Galacea Effects
Umi-React 应用开发框架
Dumi-组件/文档研发工具
ahooks-React Hooks 库

社区

体验科技专栏
seeconfSEE Conf-蚂蚁体验科技大会

帮助

GitHub
StackOverflow

more products更多产品

Ant DesignAnt Design-企业级 UI 设计语言
yuque语雀-知识创作与分享工具
EggEgg-企业级 Node 开发框架
kitchenKitchen-Sketch 工具集
GalaceanGalacean-互动图形解决方案
xtech蚂蚁体验科技
© Copyright 2025 Ant Group Co., Ltd..备案号:京ICP备15032932号-38

Loading...

提示

在阅读本节内容前,请确保你已经阅读 主题配置 文档

为方便用户查看数据,S2 交叉表会在滑动过程中,保证行头和列头的最大可见性。因此,S2 在行头、列头对齐方式所对应的的范围是当前格子的可视区域,而角头,数据单元格所对应的范围是当前格子的实际尺寸区域。

img

角头对齐方式

  • 行头单元格(红色部分)对齐方式受 text 控制
  • 列头单元格(蓝色部分)对齐方式受 bolderText 控制

img

cornerCell: {
  bolderText: {
    textAlign: 'left',
    textBaseline: 'middle',
  },
  text: {
    textAlign: 'left',
    textBaseline: 'middle',
  }
}
        
left
cornerCell: {
  bolderText: {
    textAlign: 'center',
    textBaseline: 'middle',
  },
  text: {
    textAlign: 'center',
    textBaseline: 'middle',
  }
}
        
center
cornerCell: {
  bolderText: {
    textAlign: 'right',
    textBaseline: 'middle',
  },
  text: {
    textAlign: 'right',
    textBaseline: 'middle',
  }
}
        
right

textBaseline 也有三种模式:top,middle,bottom。效果不再赘述。

行头对齐方式

  • 非叶子节点和小计总计单元格(红色部分)对齐方式受 bolderText 控制
  • 叶子节点单元格(蓝色部分)对齐方式受 text 控制
  • 序号单元格(黄色部分)可单独控制,默认和行头对齐,对齐方式受 seriesText 控制
  • 数值单元格(当数值置于行头时)可单独控制,默认和行头对齐,对齐方式受 measureText 控制

img

rowCell: {
  bolderText: {
    textAlign: 'left',
  },
  text: {
    textAlign: 'left',
  }
}
        
left
rowCell: {
  bolderText: {
    textAlign: 'center',
  },
  text: {
    textAlign: 'center',
  }
}
        
center
rowCell: {
  bolderText: {
    textAlign: 'right',
  },
  text: {
    textAlign: 'right',
  }
}
        
right

列头对齐方式

  • 其他非叶子维度单元格(红色部分)对齐方式受 bolderText 控制 (默认和数据单元格对齐)
  • 数值单元格(蓝色部分,当数值置于列头时)对齐方式受 measureText 控制
  • 叶子维度单元格(黄色部分,当数值置于行头时,或者在列头但隐藏数值列时的最后一个维度)对齐方式受 text 控制

列头的滚动对齐只针对于非叶子维度节点,叶子维度节点对齐对应的范围是当前格子的实际尺寸区域。

col cell align desccol cell align desc
colCell: {
  bolderText: {
    textAlign: 'left',
  },
  measureText: {
    textAlign: 'left',
  }
}
        
left
colCell: {
  bolderText: {
    textAlign: 'center',
  },
  measureText: {
    textAlign: 'center',
  },
}
        
center
colCell: {
  bolderText: {
    textAlign: 'right',
  },
  measureText: {
    textAlign: 'right',
  }
}
        
right

数据单元格对齐方式

  • 小计总计单元格(红色部分)对齐方式受 bolderText 控制
  • 其他节点单元格(蓝色部分)对齐方式受 text 控制

img

dataCell: {
  bolderText: {
    textAlign: 'left',
    textBaseline: 'top',
  },
  text: {
    textAlign: 'left',
    textBaseline: 'top',
  }
}
        
left
dataCell: {
  bolderText: {
    textAlign: 'center',
    textBaseline: 'middle',
  },
  text: {
    textAlign: 'center',
    textBaseline: 'middle',
  }
}
        
center
dataCell: {
   bolderText: {
    textAlign: 'right',
    textBaseline: 'bottom',
  },
  text: {
    textAlign: 'right',
    textBaseline: 'bottom',
  }
}
        
right

自定义特定单元格对齐方式

有时我们想达到类似 字段标记 的效果,对特定满足条件的单元格进行 自定义对齐方式, 而不是改变所有,这时我们可以通过 自定义单元格, 通过 S2 提供的 dataCell, colCell, rowCell 等自定义 Hook 来做自定义。