Cell formating

Hello! Very new to this lib. May be a basic question, sorry.
I am not sure why, but cell formatting just doesn't work?

columnHelper.accessor('profileNumber', {
  cell: ({ getValue }) => <span>{`woo! ${getValue()}`}</span>,
  header: "Profil Nummer"
})

columnHelper.accessor('profileNumber', {
  cell: ({ getValue }) => <span>{`woo! ${getValue()}`}</span>,
  header: "Profil Nummer"
})

columnHelper.accessor('profileNumber', {
  cell: ({ getValue }) => <span>{`woo! ${getValue()}`}</span>,
  header: "Profil Nummer"
})

columnHelper.accessor('profileNumber', {
  cell: ({ getValue }) => <span>{`woo! ${getValue()}`}</span>,
  header: "Profil Nummer"
})

This is how I access the cell:

{table.getRowModel().rows.map(row => (
    <tr key={row.id}>
        {row.getVisibleCells().map(cell => (
            <td key={cell.id}>{ cell.getValue() }</td>
        ))}
    </tr>
))}

{table.getRowModel().rows.map(row => (
    <tr key={row.id}>
        {row.getVisibleCells().map(cell => (
            <td key={cell.id}>{ cell.getValue() }</td>
        ))}
    </tr>
))}

{table.getRowModel().rows.map(row => (
    <tr key={row.id}>
        {row.getVisibleCells().map(cell => (
            <td key={cell.id}>{ cell.getValue() }</td>
        ))}
    </tr>
))}

{table.getRowModel().rows.map(row => (
    <tr key={row.id}>
        {row.getVisibleCells().map(cell => (
            <td key={cell.id}>{ cell.getValue() }</td>
        ))}
    </tr>
))}

It just shows the value of the data, but none of the markup. In fact, I could ignore

cell

cell

cell

cell entirely in the columns definition and it would have no effect

I followed the docs here:

https://tanstack.com/table/latest/docs/guide/column-defs#cell-formatting

Cell formating

Similar Threads

Similar Threads

Similar Threads