如何移除PrimeReact DataTable表头排序图标并保留排序功能

直接通过CSS隐藏排序箭头即可，完全不影响排序功能，给你两种实用方案：

• 全局隐藏所有可排序列的箭头
  给项目添加以下CSS样式，直接把所有排序表头的箭头元素隐藏：

  .p-sortable-column .p-sortable-column-icon {
      display: none;
  }
  

• 仅隐藏指定列的箭头
  如果只想隐藏某几列的箭头，先在列定义里给目标列的表头加自定义类名：

  <Column field="name" header="名称" sortable headerClassName="no-sort-icon" />
  

  再添加对应的CSS：

  .no-sort-icon .p-sortable-column-icon {
      display: none;
  }
  

原理很直白：PrimeReact的排序箭头对应.p-sortable-column-icon类，我们只是把这个图标元素隐藏，表头的点击排序逻辑完全不受影响。

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