router.push onClick Row with Tanstack / React-Table and Typescript (2339)

I have a linting error when pushing to a new route when i click on a table row.
It’s working but how can i define it?
It says “The property “id” for type TData does not exist.”

//dataTable.tsx

...

interface DataTableProps<TData, TValue> {
  columns: ColumnDef<TData, TValue>[]
  data: TData[]
  
}

export function DataTable<TData, TValue>({
  columns,
  data,
}: DataTableProps<TData, TValue>) {
  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
    []
  )
  const table = useReactTable({
    data,
    columns,
    }
  })

  const router = useRouter()
  
  return (
...
        <Table>
          <TableHeader>
           ...
          </TableHeader>
          <TableBody>
            {table.getRowModel().rows?.length ? (
              table.getRowModel().rows.map((row) => (
                <TableRow
                  key={row.id}
                  data-state={row.getIsSelected() && "selected"}
                  onClick={() => 
                    router.push(`classes/${row.original.id}`)}
                >
                  {row.getVisibleCells().map((cell) => (
                    <TableCell key={cell.id}>
                      {flexRender(cell.column.columnDef.cell, 
                       cell.getContext())}
                    </TableCell>
                  ))}
                </TableRow>
                ...

the data type is defined, so why i get an error?

// page.tsx
...
 
function getData(): Payment[] {
  // Fetch data from your API here.
  return [
    {
      id: "728ed52f",
      amount: 100,
      status: "pending",
      email: "[email protected]",
    },
    // ...
  ]
}

const ClassesPage = () => {
  const data = getData()


  return (
    <div className="container mx-auto py-10">
      <DataTable columns={columns} data={data} />
    </div>
  )
}

...

inside

//column.tsx

...
export type Payment = {
  id: string
  amount: number
  status: "pending" | "processing" | "success" | "failed"
  email: string
...

I just want to route to a new path with the a value from my clicked row. is there a better way to achive this?

  • Please trim your code to make it easier to find your problem. Follow these guidelines to create a minimal reproducible example.

    – 
    Bot

Leave a Comment