React 表格​​排序图标被推到标题下方

Question

我正在尝试在我的 React 表中实现排序图标，但是排序图标被推到标题下方。 问题是由于使用了textAlign: "right"，代码中可以看到：

{
Header: () => (
  <div style={{ textAlign: "right" }}>Market Cap</div>
),
id: 'market_cap',
accessor: d => (
  <div className="center th-align-right">
    {formatDollar(d.market_cap, 12)}
  </div>
),

}

如果我删除textAlign: "right"，标题和图标将正确显示在同一行，但是，我需要textAlign: "right" 以保持标题与表格内容对齐。这是我目前对排序图标的实现：

return (
<table className="vert-spacing mb-auto table table-dark px-3 table-hover" {...getTableProps()}>
  <thead className="table-bordered">
    {headerGroups.map(headerGroup => (
      <tr className="table-body-color" {...headerGroup.getHeaderGroupProps()}>
        {headerGroup.headers.map(column => (
          <th {...column.getHeaderProps(column.getSortByToggleProps())}>
            { column.render('Header') }
            <span>
                {column.isSorted
                  ? column.isSortedDesc
                    ? 
                    <svg className="th-align-left" focusable="false" xmlns="http://www.w3.org/2000/svg" width="14px" height="14px" fill="currentColor" class="bi bi-caret-down-fill" viewBox="0 0 16 16">
                        <path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/>
                    </svg>
                    :
                    <svg className="th-align-right" focusable="false" xmlns="http://www.w3.org/2000/svg" width="14px" height="14px" fill="currentColor" class="bi bi-caret-up-fill" viewBox="0 0 16 16">
                        <path d="m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z"/>
                    </svg>                      
                    : ''
                }
              </span>
          </th>
        ))}
      </tr>
    ))}
  </thead>
  <tbody {...getTableBodyProps()}>
    {rows.map((row) => {
      prepareRow(row);
      return (
        <tr {...row.getRowProps()}>
          {row.cells.map((cell, idx) => (
            <td {...cell.getCellProps()}>
              { cell.render("Cell") }
            </td>
          ))}
        </tr>
      )
    })}
  </tbody>
</table>

如果有任何帮助，我将不胜感激，谢谢。

Answer 1

您可以将这 2 个 div 的父级设置为与方向行一起弯曲

这样

#th-parent{ /*any query you would have*/
  display: flex;
  flex-direction: row;
  justify-content: flex-end; /*similar to text-align: right*/
}