fair-rose

Help with TanStack Table onRowClick

Hey TanStack Community, is there a way I can do <TanStackTable onRowClick={rowData => callSomeFunction(rowData.id, rowData.name)}

3 Replies

conscious-sapphire•2y ago

https://tanstack.com/table/v8/docs/framework/react/examples/row-selection

React Table Row Selection Example | TanStack Table Docs

An example showing how to implement Row Selection in React Table

fair-roseOP•2y ago

<TanStackTable onRowClick={rowData => callSomeFunction(rowData.id, rowData.name)} /> can you elaborate more on to how it helps in my case

judicial-coral•2y ago

<TableBody>
            {table.getRowModel().rows?.length ? (
              table.getRowModel().rows.map((row) => (
                <TableRow
                  key={row.id}
                  data-state={row.getIsSelected() && "selected"}
                  className="cursor-pointer"
                  onClick={() => handleRowClick(row)}
                >
                  {row.getVisibleCells().map((cell) => (
                    <TableCell key={cell.id}>
                      {flexRender(
                        cell.column.columnDef.cell,
                        cell.getContext()
                      )}
                    </TableCell>
                  ))}
                </TableRow>
              ))
            ) : (
              <TableRow>
                <TableCell
                  colSpan={columns.length}
                  className="text-center"
                >
                  No results.
                </TableCell>
              </TableRow>
            )}
          </TableBody>

<TableBody>
            {table.getRowModel().rows?.length ? (
              table.getRowModel().rows.map((row) => (
                <TableRow
                  key={row.id}
                  data-state={row.getIsSelected() && "selected"}
                  className="cursor-pointer"
                  onClick={() => handleRowClick(row)}
                >
                  {row.getVisibleCells().map((cell) => (
                    <TableCell key={cell.id}>
                      {flexRender(
                        cell.column.columnDef.cell,
                        cell.getContext()
                      )}
                    </TableCell>
                  ))}
                </TableRow>
              ))
            ) : (
              <TableRow>
                <TableCell
                  colSpan={columns.length}
                  className="text-center"
                >
                  No results.
                </TableCell>
              </TableRow>
            )}
          </TableBody>

- thats how I handle onclick events for rows

Gaming

Programming

Help with TanStack Table onRowClick

Did you find this page helpful?