从@tanstack/react-table导入useTable钩子时遇报错问题

核心原因 #

TanStack React Table v8版本彻底重构了API，原v7中的useTable钩子已被移除，替代为useReactTable，这是导致导出报错的直接原因。

解决步骤 #

1. 替换导入与使用方式 #

将原导入语句替换为：

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

基础表格实现示例：

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

function BasicTable() {
  // 定义列配置
  const columns = [
    { accessorKey: 'id', header: 'ID' },
    { accessorKey: 'title', header: '标题' },
  ];
  // 表格数据
  const data = [{ id: 1, title: '示例数据1' }, { id: 2, title: '示例数据2' }];

  // 创建表格实例
  const table = useReactTable({
    data,
    columns,
  });

  // 渲染表格
  return (
    <table>
      <thead>
        {table.getHeaderGroups().map(headerGroup => (
          <tr key={headerGroup.id}>
            {headerGroup.headers.map(header => (
              <th key={header.id}>{header.renderHeader()}</th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody>
        {table.getRowModel().rows.map(row => (
          <tr key={row.id}>
            {row.getVisibleCells().map(cell => (
              <td key={cell.id}>{cell.renderCell()}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

2. 清理依赖缓存 #

如果替换后仍有问题，清理依赖缓存并重启服务：

rm -rf node_modules package-lock.json
npm install
npm run dev

3. 确认文档版本一致性 #

确保你查阅的是v8.x版本的官方文档，避免混用v7版本的API说明。

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