React Table设置textAlign:right后排序图标被挤至表头下方如何解决

问题根源 #

你自定义Header返回的<div>是块级元素，默认会独占整行宽度，所以即使设置了textAlign: "right"，后续的排序图标也会被挤到下一行显示。

以下两种方案都可以在保留右对齐需求的前提下解决换行问题：

方案1：修改Header内部元素属性

把Header里的块级div换成行内元素span，或者给div添加display: inline-block样式，让文字区域不独占整行：

{
  Header: () => (
    // 把div换成span，或者给div加style={{ textAlign: "right", display: "inline-block" }}
    <span style={{ textAlign: "right", marginRight: "4px" }}>Market Cap</span>
  ),
  id: 'market_cap',
  accessor: d => (
    <div className="center th-align-right">
      {formatDollar(d.market_cap, 12)}
    </div>
  ),
}

方案2：右对齐属性移到th层级（更推荐）

不需要在Header内部单独设置文字对齐，直接利用React Table的列配置给当前列的th设置全局右对齐，这样th内的表头文字和排序图标会作为同一行内容整体右对齐，完全匹配下方表格内容的对齐效果：

1. 先修改列配置，移除Header内部的textAlign，新增headerStyle配置：

{
  Header: () => "Market Cap",
  id: 'market_cap',
  // 给当前列的th设置右对齐
  headerStyle: { textAlign: "right" },
  accessor: d => (
    <div className="center th-align-right">
      {formatDollar(d.market_cap, 12)}
    </div>
  ),
}

2. 可选优化：给包裹排序图标的span添加少量左间距，避免图标和文字挨得太近：

<span style={{ marginLeft: "6px" }}>
  {/* 原有排序图标代码 */}
</span>

内容的提问来源于stack exchange，提问作者nosette