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