React & Next: Latest version is having a typescript typing issue?

[lucashfreitas]

I am trying to add a simple table and use getValue but it's not being recognized as a valid type as getValue() is returning unknown which is not a valid jsx typing.

Is anyone having the same issue, I just started a fresh project using react + nextjs.

Package version:

"dependencies": {
    "@tanstack/react-table": "^8.10.7",
    "next": "13.5.4",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10",
    "eslint": "^8",
    "eslint-config-next": "13.5.4",
    "postcss": "^8",
    "tailwindcss": "^3",
    "typescript": "^5"
  }

Code Snippet and screenshot

type Person = {
  firstName: string
  lastName: string
  age: number
  visits: number
  status: string
  progress: number
}

const columns: ColumnDef<Person>[] = [
    {
      accessorKey: 'firstName',
      id: 'firstName',
      cell: (info) => <div className="lowercase">{info.getValue()}</div>,
      header: ({column}) => {
        return (
          <button onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}>Name</button>
        )
      },
    },
  ]
]

[lucashfreitas]

Just realised the ColumnDef accepts a second type argument that will be the value, which by default is unknown. Though the value would be inferred by default based on the data object key/values, in that case the value would be string | number. - but not sure if this would be the best solution as we have nested objects, etc.

Closing this for now as I can easily get around this by specifing ColumnDef<Person[], any>, so now react accepts getValue() as a valid JSX element to be rendered.