Tanstack React-Table 8.10.7 行数据无法显示问题求助

核心错误：列字段拼写错误 #

你的代码中列定义的accesorKey是拼写错误，正确属性名为accessorKey（多一个s）。React Table依赖该属性匹配数据字段，拼写错误会导致无法读取行数据，最终单元格内容为空。

次要问题：表格核心模型配置错误 #

useReactTable配置中，getCoreRowModel应传递函数引用getCoreRowModel，而非调用后的结果getCoreRowModel()。虽表头能显示，但该错误可能影响行模型的正确生成。

修正后的完整代码 #

import { useReactTable, flexRender, getCoreRowModel } from '@tanstack/react-table';
import { useMemo } from 'react';
import data from '../MOCK_DATA.json'

export const Employees = () => {
    
    const columns = useMemo(() => [
        {
            accessorKey: 'employeeId', // 修正拼写
            header: 'ID',
            footer: 'ID'
        },
        {
            accessorKey: 'employeeName', // 修正拼写
            header: 'Name',
            footer: 'Name'
        },
        {
            accessorKey: 'employeeDescription', // 修正拼写
            header: 'Description',
            footer: 'Description'
        }
    ], [])

    const table = useReactTable({
        columns, 
        data, 
        getCoreRowModel: getCoreRowModel // 传递函数引用而非调用结果
    })
    
    return ( 
        <>
            <table>
                <thead>
                    {table.getHeaderGroups().map(headerGroup => (
                        <tr key={headerGroup.id}>
                            {headerGroup.headers.map(header => (
                                <th key={header.id}>
                                    {flexRender(
                                        header.column.columnDef.header,
                                        header.getContext()
                                    )}
                                </th>
                            ))}
                        </tr>
                    ))}
                </thead>
                <tbody>
                    {table.getRowModel().rows.map(row => (
                        <tr key={row.id}>
                            {row.getVisibleCells().map(cell => (
                                <td key={cell.id}>
                                    {flexRender(
                                        cell.column.columnDef.cell,
                                        cell.getContext()
                                    )}
                                </td>
                            ))}
                        </tr>
                    ))}
                </tbody>
            </table>
        </> 
    );
}

验证说明 #

修正后，React Table会通过正确的accessorKey匹配数据中的employeeId、employeeName等字段，flexRender可正常渲染单元格内容。同时正确配置的getCoreRowModel会确保行模型正常生成，解决行数据无法渲染的问题。

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