React-Table教程：如何结合useResizeColumns与粘性列功能

核心逻辑 #

React-Table的列宽调整依赖useResizeColumns钩子管理列宽状态，粘性列通过CSS的position: sticky实现。要让两者兼容，关键是确保粘性列的宽度能实时同步调整后的列宽，同时解决布局层级冲突。

具体实现步骤 #

1. 保留基础钩子配置
   确保你的表格已正确引入并使用useTable和useResizeColumns钩子，示例初始化代码如下：

import { useTable, useResizeColumns } from 'react-table'

function MyTable({ columns, data }) {
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
  } = useTable(
    { columns, data },
    useResizeColumns // 已实现的列宽调整钩子
  )

  // 其他逻辑...
}

2. 修改列配置，标记粘性列
   在列定义中，给需要设置为粘性的列添加sticky属性（可选'left'或'right'），同时保留resizable: true开启列宽调整：

const columns = [
  {
    Header: 'ID',
    accessor: 'id',
    resizable: true,
    sticky: 'left', // 标记为左侧粘性列
  },
  {
    Header: '姓名',
    accessor: 'name',
    resizable: true,
  },
  {
    Header: '操作',
    accessor: 'actions',
    resizable: true,
    sticky: 'right', // 标记为右侧粘性列
  },
  // 其他列...
]

3. 自定义表头与单元格渲染，绑定动态宽度
   在渲染表头和单元格时，为粘性列添加自定义类名，并通过column.getWidth()绑定实时列宽，确保调整列宽时粘性列宽度同步更新：

// 渲染表头
{headerGroups.map(headerGroup => (
  <tr {...headerGroup.getHeaderGroupProps()}>
    {headerGroup.headers.map(column => (
      <th
        {...column.getHeaderProps(column.getResizeHandler())}
        className={`${column.sticky ? `sticky-${column.sticky}` : ''}`}
        style={{
          width: `${column.getWidth()}px`,
          minWidth: `${column.minWidth || 100}px`,
          maxWidth: `${column.maxWidth || 500}px`,
        }}
      >
        {column.render('Header')}
        <span {...column.getResizerProps()} className="resizer" />
      </th>
    ))}
  </tr>
))}

// 渲染表格单元格
{rows.map(row => {
  prepareRow(row)
  return (
    <tr {...row.getRowProps()}>
      {row.cells.map(cell => (
        <td
          {...cell.getCellProps()}
          className={`${cell.column.sticky ? `sticky-${cell.column.sticky}` : ''}`}
          style={{
            width: `${cell.column.getWidth()}px`,
            minWidth: `${cell.column.minWidth || 100}px`,
            maxWidth: `${cell.column.maxWidth || 500}px`,
          }}
        >
          {cell.render('Cell')}
        </td>
      ))}
    </tr>
  )
})}

4. 添加CSS样式解决布局冲突
   为粘性列添加必要的CSS，确保层级和背景不冲突：

.sticky-left {
  position: sticky;
  left: 0;
  z-index: 10;
  background-color: #fff; /* 避免下层内容透出 */
}

.sticky-right {
  position: sticky;
  right: 0;
  z-index: 10;
  background-color: #fff;
}

/* 列宽调整手柄样式（可根据需求自定义） */
.resizer {
  display: inline-block;
  width: 8px;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  cursor: col-resize;
  background-color: transparent;
}

.resizer:hover {
  background-color: #ccc;
}

注意事项 #

• 确保表格容器设置了overflow-x: auto，这样横向滚动时粘性列才会生效。
• 如果遇到粘性列被其他元素覆盖，可调整z-index值确保层级更高。
• 若列宽调整后粘性列宽度未同步，检查是否正确使用column.getWidth()获取实时宽度，而非固定值。

内容的提问来源于stack exchange，提问作者Sakhawat Hossain Sohel