Antd Table可展开列图标无法固定在右侧问题咨询

问题描述 #

配置Antd Table的expandable.fixed="right"后，展开图标仍显示在左侧，行内容较长时无法固定在右侧；切换fixed="left"样式无变化，设置为false时展开图标样式被移除。

代码示例 #

<Table
  columns={columns}
  dataSource={data}
  expandable={{
    fixed: "right",
    expandedRowRender: (record) => (
      <p style={{ margin: 0 }}>{record.description}</p>
    ),
    expandIcon: ({ expanded, onExpand, record }) =>
      expanded ? (
        <MinusCircleTwoTone onClick={(e) => onExpand(record, e)} />
      ) : (
        <PlusCircleTwoTone onClick={(e) => onExpand(record, e)} />
      ),
  }}
/>

问题截图 #

官方文档说明（翻译） #

Antd Table组件的expandable.fixed属性用于设置展开图标的固定位置，可选值包括：

• true：固定在左侧（默认行为）
• false：不固定，随内容滚动
• "left"：固定在左侧
• "right"：固定在右侧

原因分析 #

自定义expandIcon时，Antd默认的固定定位样式未正确应用到自定义图标上，导致fixed="right"配置失效；同时若未开启表格横向滚动，sticky定位也无法正常工作。

解决方案 #

方案1：使用默认展开图标 #

移除自定义的expandIcon配置，依赖Antd默认展开图标，此时fixed="right"会自动生效：

<Table
  columns={columns}
  dataSource={data}
  expandable={{
    fixed: "right",
    expandedRowRender: (record) => (
      <p style={{ margin: 0 }}>{record.description}</p>
    ),
    // 移除自定义expandIcon配置
  }}
/>

方案2：自定义图标时手动添加定位样式 #

给自定义图标包裹容器并设置sticky定位，同时开启表格横向滚动：

<Table
  columns={columns}
  dataSource={data}
  scroll={{ x: 'max-content' }} // 开启横向滚动
  expandable={{
    fixed: "right",
    expandedRowRender: (record) => (
      <p style={{ margin: 0 }}>{record.description}</p>
    ),
    expandIcon: ({ expanded, onExpand, record }) => (
      <div style={{ position: 'sticky', right: 0, zIndex: 1, background: '#fff' }}>
        {expanded ? (
          <MinusCircleTwoTone onClick={(e) => onExpand(record, e)} />
        ) : (
          <PlusCircleTwoTone onClick={(e) => onExpand(record, e)} />
        )}
      </div>
    ),
  }}
/>

方案3：通过CSS强制修改样式 #

添加全局CSS，针对固定右侧的展开图标列设置定位：

.ant-table-expand-icon-column.ant-table-fixed-right {
  position: sticky;
  right: 0;
  background: #fff;
  z-index: 1;
}

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