ReactTable组件固定列问题：小页面横向滚动时能否固定列？

当然可以！不管你用的是新版的TanStack Table（现在React生态里主流的表格库）还是旧版的react-table，都能轻松实现页面横向滚动时固定firstName列的需求，下面我给你分情况讲具体的实现方法：

一、新版TanStack Table（@tanstack/react-table）实现方式 #

1. 配置滚动容器：给表格外层套一个div，设置overflow-x: auto，这样当表格内容超出容器宽度时会自动出现横向滚动条。
2. 给目标列加固定属性：在firstName列的定义中，加上sticky: "left"，同时建议设置固定宽度避免布局错乱。
3. 设置背景色防穿透：给固定列的表头和单元格设置背景色（比如白色），不然滚动时后面的内容会透过来，影响视觉效果。

代码示例： #

import { useReactTable, createColumnHelper } from '@tanstack/react-table';

// 创建列助手
const columnHelper = createColumnHelper();

// 定义列配置
const columns = [
  // 固定firstName列在左侧
  columnHelper.accessor('firstName', {
    header: 'First Name',
    sticky: 'left', // 核心固定属性
    width: 150, // 固定宽度
    cell: info => info.getValue(),
  }),
  columnHelper.accessor('lastName', {
    header: 'Last Name',
    width: 150,
    cell: info => info.getValue(),
  }),
  // 可继续添加更多列
  columnHelper.accessor('email', {
    header: 'Email',
    width: 250,
    cell: info => info.getValue(),
  }),
];

export default function FixedColumnTable() {
  // 模拟表格数据
  const tableData = [
    { firstName: 'John', lastName: 'Doe', email: 'john@example.com' },
    { firstName: 'Jane', lastName: 'Smith', email: 'jane@example.com' },
    // 更多数据...
  ];

  const table = useReactTable({
    columns,
    data: tableData,
  });

  return (
    // 横向滚动容器
    <div style={{ overflowX: 'auto', margin: '20px' }}>
      <table style={{ width: '100%', borderCollapse: 'collapse' }}>
        <thead>
          {table.getHeaderGroups().map(headerGroup => (
            <tr key={headerGroup.id}>
              {headerGroup.headers.map(header => (
                <th
                  key={header.id}
                  style={{
                    // 根据列的sticky属性设置定位
                    position: header.column.getIsSticky() ? 'sticky' : 'static',
                    left: header.column.getStickyLeft(),
                    backgroundColor: '#ffffff', // 避免内容穿透
                    border: '1px solid #e0e0e0',
                    padding: '10px 12px',
                    textAlign: 'left',
                  }}
                >
                  {header.isPlaceholder ? null : header.renderHeader()}
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody>
          {table.getRowModel().rows.map(row => (
            <tr key={row.id}>
              {row.getVisibleCells().map(cell => (
                <td
                  key={cell.id}
                  style={{
                    position: cell.column.getIsSticky() ? 'sticky' : 'static',
                    left: cell.column.getStickyLeft(),
                    backgroundColor: '#ffffff',
                    border: '1px solid #e0e0e0',
                    padding: '10px 12px',
                  }}
                >
                  {cell.renderCell()}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

二、旧版react-table（v7及之前）实现方式 #

旧版API略有不同，但核心思路一致：

1. 同样需要给表格外层添加横向滚动容器。
2. 在firstName列的定义中添加fixed: 'left'属性。
3. 同样设置背景色避免内容穿透。

代码示例： #

import { useTable } from 'react-table';

// 列配置
const columns = [
  {
    Header: 'First Name',
    accessor: 'firstName',
    fixed: 'left', // 核心固定属性
    width: 150,
  },
  {
    Header: 'Last Name',
    accessor: 'lastName',
    width: 150,
  },
  {
    Header: 'Email',
    accessor: 'email',
    width: 250,
  },
];

export default function OldReactTableFixedColumn() {
  const tableData = [
    { firstName: 'John', lastName: 'Doe', email: 'john@example.com' },
    { firstName: 'Jane', lastName: 'Smith', email: 'jane@example.com' },
    // 更多数据...
  ];

  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable({
    columns,
    data: tableData,
  });

  return (
    <div style={{ overflowX: 'auto', margin: '20px' }}>
      <table {...getTableProps()} style={{ width: '100%', borderCollapse: 'collapse' }}>
        <thead>
          {headerGroups.map(headerGroup => (
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map(column => (
                <th
                  {...column.getHeaderProps()}
                  style={{
                    position: column.fixed ? 'sticky' : 'static',
                    left: column.fixed === 'left' ? 0 : 'auto',
                    backgroundColor: '#ffffff',
                    border: '1px solid #e0e0e0',
                    padding: '10px 12px',
                    textAlign: 'left',
                  }}
                >
                  {column.render('Header')}
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody {...getTableBodyProps()}>
          {rows.map(row => {
            prepareRow(row);
            return (
              <tr {...row.getRowProps()}>
                {row.cells.map(cell => (
                  <td
                    {...cell.getCellProps()}
                    style={{
                      position: cell.column.fixed ? 'sticky' : 'static',
                      left: cell.column.fixed === 'left' ? 0 : 'auto',
                      backgroundColor: '#ffffff',
                      border: '1px solid #e0e0e0',
                      padding: '10px 12px',
                    }}
                  >
                    {cell.render('Cell')}
                  </td>
                ))}
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

几个关键注意点 #

• 必须设置固定宽度：如果不给固定列设置宽度，表格在滚动时可能会出现列宽跳动、布局错乱的问题。
• 背景色不能少：固定列的表头和单元格一定要设置背景色，否则滚动时后面的内容会透过固定列显示，影响用户体验。
• 多固定列支持：如果需要固定多列，只需要给对应的列都添加sticky: 'left'（新版）或fixed: 'left'（旧版），表格库会自动处理它们的层级和位置，不需要额外的样式调整。

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