Tanstack React-Table 8.10.7 - Cannot Show Data in Rows

Question

I have tried to set up a Tanstack React-Table, and only the headers of the table are displaying properly, but nothing is rendered, even though there are no errors in console. Every single recent tutorial has supported this exact syntax, yet it doesn't work for me.

The following is my implementation:

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

export const Employees = () => {
    
    const columns = useMemo(() => [
        {
            accesorKey: 'employeeId',
            header: 'ID',
            footer: 'ID'
        },
        {
            accesorKey: 'employeeName',
            header: 'Name',
            footer: 'Name'
        },
        {
            accesorKey: '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>
        </> 
    );
    
}

Data is from Mockaroo and here is an example from the data:

{
    "employeeId": 1,
    "employeeName": "Simon Kinkade",
    "employeeDescription": "sociis natoque penatibus et magnis dis parturient montes nascetur ridiculus mus vivamus"
}, ...

Here you can see that the exists along with its s, yet it is empty

And console.log(table.getRowModel().rows[0].getVisibleCells()[1].column.columnDef.cell) returns the following:

(props) => { var _props$renderValue$to, _props$renderValue; return (_props$renderValue$to = (_props$renderValue = props.renderValue()) == null || _props$renderValue.toString == null ? void 0 : _props$renderValue.toString()) != null ? _props$renderValue$to : null; }

Any help would be greatly appreciated! :)

I copied the code from tutorials, which according to docs should be valid, yet it doesn't work. Since data is present in table.getRowModel().rows[0].getVisibleCells()[0].original, I tried rendering through that to no avail...

Answer 1

I have found the problem, it is just pure syntax.

It is accessorKey, not accesorKey in columns (property of columns).

{ accesorKey: 'employeeId', header: 'ID', footer: 'ID' } // this was the mistake in code

{ accessorKey: 'employeeId', header: 'ID', footer: 'ID' } //this is how it should be

Java really compiles almost everything you put in front of it without an error, so being very careful about small details and spellings in the syntax in important. :)