如何在Ant Design中隐藏表格列头文字同时保留对应列数据

以下是三种不同适用场景的实现方案，均不会影响对应列的行数据渲染：

方法1：直接设置列title为空（最简方案，无表头交互场景优先） #

直接将目标列的title属性赋值为空字符串或空React片段即可，只会隐藏表头文字，不会干涉dataIndex绑定和行渲染逻辑：

const columns = [
  {
    title: '', // 表头无任何文字显示
    dataIndex: 'id',
    key: 'id',
    render: () => <ArrowOutlined /> // 行数据的箭头图标渲染完全不受影响
  },
  // 其余列配置
]

方法2：自定义表头样式隐藏文字（保留排序/筛选交互场景适用） #

如果对应列需要保留表头的排序、筛选功能，仅隐藏文字，可以通过自定义表头类名配合CSS实现：

• 列配置添加表头专属类名：

const columns = [
  {
    title: 'id',
    dataIndex: 'id',
    key: 'id',
    headerClassName: 'hide-header-text', // 仅作用于当前列的表头单元格
    render: () => <ArrowOutlined />
  }
]

• 新增对应CSS规则：

/* 隐藏表头文字 */
.hide-header-text {
  font-size: 0;
  color: transparent;
}
/* 恢复排序、筛选图标的正常显示 */
.hide-header-text .ant-table-column-sorters,
.hide-header-text .ant-table-filter-trigger {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.85);
}

方法3：重写表头渲染逻辑（多列批量隐藏场景适用） #

如果存在多列需要批量隐藏表头文字的需求，可以通过Table的components属性自定义表头渲染逻辑，提升复用性：

// 自定义表头单元格渲染逻辑
const tableComponents = {
  header: {
    cell: (props) => {
      // 读取列配置的自定义标记判断是否隐藏表头内容
      if (props.column.hideHeader) {
        return <th {...props} />
      }
      return <th {...props}>{props.children}</th>
    }
  }
}

// 列配置添加自定义标记
const columns = [
  {
    title: 'id',
    dataIndex: 'id',
    key: 'id',
    hideHeader: true, // 标记该列需要隐藏表头文字
    render: () => <ArrowOutlined />
  }
]

// 组件调用时传入自定义components
<Table 
  components={tableComponents}
  columns={columns}
  dataSource={yourDataSource}
/>

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