react-data-table-component v^7.5.2 首列固定失效问题求助

问题核心原因 #

你尝试的自定义CSS未生效，大概率是以下几点导致：

• CSS选择器与组件实际DOM结构不匹配
• 未设置背景色，滚动时内容穿透固定列
• 样式优先级不足，被组件默认样式覆盖
• 未正确使用组件内置的固定列功能

解决方案 #

方案一：用组件内置固定列属性（推荐） #

react-data-table-component v7.5.2 支持直接在列配置中开启固定，无需自定义CSS：

const columns = [
  {
    name: '第一列名称',
    selector: row => row.firstColumnKey,
    fixed: 'left', // 开启左侧固定
  },
  // 其他列配置...
];

// 组件使用示例
<DataTable
  columns={columns}
  data={yourDataSource}
  fixedHeader // 若需要固定表头，开启此属性
/>

方案二：自定义CSS修复 #

如果内置方式无效，可通过以下修正后的代码实现：

1. 给第一列添加类名

在列配置中为目标列指定类名：

const columns = [
  {
    name: '第一列名称',
    selector: row => row.firstColumnKey,
    className: 'fixed-left',
  },
  // 其他列配置...
];

2. 编写正确的CSS样式

/* 表头固定列 - 提升选择器优先级，避免被默认样式覆盖 */
.rdt_Table .rdt_TableHead .rdt_TableRow .rdt_TableCol.fixed-left {
  position: sticky;
  left: 0;
  z-index: 2;
  background-color: #ffffff; /* 必须设置背景色，防止内容穿透 */
}

/* 表体固定列 - 注意tbody单元格类名为rdt_TableCell而非rdt_TableCol */
.rdt_Table .rdt_TableBody .rdt_TableRow .rdt_TableCell.fixed-left {
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: #ffffff;
}

关键说明：

• 原CSS中tbody的目标类名错误，v7.5.2版本里tbody单元格的类是rdt_TableCell，和表头的rdt_TableCol区分开
• 背景色是必填项，否则滚动时后面的列内容会透过固定列显示
• 增加.rdt_Table前缀提升选择器特异性，确保样式能覆盖组件默认样式

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