Tanstack Table v8列无法调整大小：拖动表头边缘无响应的原因

核心原因 #

你的代码缺少列宽状态管理和DOM宽度绑定两个关键环节。TanStack Table v8是无状态表格库，不会自动保存列宽变化，也不会自动将计算后的宽度同步到DOM元素上。

具体问题点及修复步骤 #

1. 未维护列宽状态 #

需要手动添加列宽状态和回调，让表格能保存调整后的列宽值：

// 在组件内部新增列宽状态
const [columnSizing, setColumnSizing] = useState({});

然后在useReactTable配置中传入这两个值：

const table = useReactTable({
  data,
  columns,
  getCoreRowModel: getCoreRowModel(),
  columnResizeMode: 'onChange',
  columnSizing, // 传入列宽状态
  onColumnSizingChange: setColumnSizing, // 传入状态更新回调
});

2. 未将计算后的宽度绑定到DOM元素 #

需要把表格计算出的列宽绑定到表头th和单元格td上，否则状态变化不会体现在页面上：

• 修正表头th：

<th 
  key={h.id} 
  className='relative border px-6 py-3'
  style={{ width: `${h.column.getSize()}px` }} // 绑定列宽样式
>

• 修正tbody的td：

<td 
  key={c.id} 
  className='border p-[0.25rem]'
  style={{ width: `${c.column.getSize()}px` }} // 绑定列宽样式
>

3. 表格布局设为固定（可选但推荐） #

为避免浏览器自动调整列宽覆盖自定义设置，给table添加table-fixed类：

<table className='w-full text-left text-sm text-gray-500 table-fixed'>

完整修正后的组件代码 #

import rawd from '../../data.json';
import { flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table"
import { useState } from "react";

const columns = [
  {
    accessorKey: 'id',
    id: 'id',
    header: 'Id',
    cell: props => <p>{props.getValue()}</p>
  },
  {
    accessorKey: 'mail',
    id: 'email',
    header: 'Email',
    cell: props => <p>{props.getValue()}</p>
  },
  {
    accessorKey: 'name.first_name',
    id: 'first_name',
    header: 'First Name',
    cell: props => <p>{props.getValue()}</p>
  },
  {
    accessorKey: 'name.last_name',
    id: 'last_name',
    header: 'Last Name',
    cell: props => <p>{props.getValue()}</p>
  },
  {
    accessorKey: 'date_of_birth',
    id: 'date_of_birth',
    header: 'Date of birth',
    cell: props => <p>{props.getValue()}</p>
  },
];


function NikitaDev() {
  const [data] = useState(rawd);
  // 新增列宽状态
  const [columnSizing, setColumnSizing] = useState({});

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    columnResizeMode: 'onChange',
    // 传入状态与更新回调
    columnSizing,
    onColumnSizingChange: setColumnSizing,
  });

  return (
    <div className="overflow-x-auto flex flex-col m-[1rem]">
      {/* 新增table-fixed类固定布局 */}
      <table className='w-full text-left text-sm text-gray-500 table-fixed'>
        <thead className='text-xs text-gray-700 uppercase bg-gray-50'>
          {table.getHeaderGroups().map(hg => (
            <tr key={hg.id}>
              {hg.headers.map(h => (
                <th 
                  key={h.id} 
                  className='relative border px-6 py-3'
                  // 绑定计算后的列宽
                  style={{ width: `${h.column.getSize()}px` }}
                >
                  {h.column.columnDef.header}
                  <div
                    onMouseDown={h.getResizeHandler()}
                    onTouchStart={h.getResizeHandler()}
                    className="absolute top-0 right-0 h-full w-[5px] hover:bg-gray-300 cursor-col-resize"
                  >
                  </div>
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody>
          {table.getRowModel().rows.map(row => (
            <tr id={row.id} className='odd:bg-white even:bg-gray-50'>
              {row.getVisibleCells().map(c => (
                <td 
                  key={c.id} 
                  className='border p-[0.25rem]'
                  // 绑定计算后的列宽
                  style={{ width: `${c.column.getSize()}px` }}
                >
                  {flexRender(
                    c.column.columnDef.cell,
                    c.getContext()
                  )}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}

export default NikitaDev

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