# OnClick Handler on TableRow Component

**URL:** <https://community.hubspot.com/t/onclick-handler-on-tablerow-component/120902>\
**Category:** CMS Development\
**Tags:** local-development, javascript\
**Created:** [November 19, 2024, 10:32pm UTC](https://community.hubspot.com/t/onclick-handler-on-tablerow-component/120902 "2024-11-19T22:32:23Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![FOman](https://avatars.discourse-cdn.com/v4/letter/f/a4c791/32.png) [@FOman](https://community.hubspot.com/u/FOman)\
**Post date:** [November 19, 2024, 10:32pm UTC](https://community.hubspot.com/t/onclick-handler-on-tablerow-component/120902/1 "2024-11-19T22:32:23Z")

</div>

Hey all! I’m trying to allow a user to select a row, however that is done I am not sure. I tried using OnClick but given the available props for TableRow it doesn’t work.

Anyone have got this working?

AI suggested wrapping in a \<div\> but that didn’t work 😕

---

<div class="post-metadata">

**Author:** ![Berangere](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/berangere/32/220784_2.png) [@Berangere](https://community.hubspot.com/u/Berangere)\
**Post date:** [November 20, 2024, 2:41pm UTC](https://community.hubspot.com/t/onclick-handler-on-tablerow-component/120902/2 "2024-11-20T14:41:24Z")

</div>

Hi @FOman, I hope that you are well!  
Thanks for asking the Community!  
Could you please share additional information such as what you are ultimately trying to achieve, the code used and where you are making the edits, to make sure that we help you the best we can?  
The more info, screenshots (without sensitive/confidential information), and details you can provide, the better the Community can assist.

I’d like to invite a couple of subject matter experts to this conversation: Hi @Stephanie-OG, @Anonymous and @jeremymandle do you have suggestions to help @FOman, please?  
Thanks a lot and have a great day!  
Best,  
Bérangère

---

<div class="post-metadata">

**Author:** ![FOman](https://avatars.discourse-cdn.com/v4/letter/f/a4c791/32.png) [@FOman](https://community.hubspot.com/u/FOman)\
**Post date:** [November 20, 2024, 5:19pm UTC](https://community.hubspot.com/t/onclick-handler-on-tablerow-component/120902/3 "2024-11-20T17:19:45Z")

</div>

Thanks Berangere! So here is more information, given a table, as shown below, I want a user ot be able to select a row, then it will display the selected ID. Specifically, I would like the row to change color, to show that it has been selected + change the state of a react useState variable, so I can use the selected ID in other places in the card.

 ![FOman_0-1732122907927.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/b/a/bac838ae819e7802a1314edfe338050df5f6df03.png)

The code I have now, simplified is like this:

```lia-code-sample
 <Table paginated={true} pageCount=pageCount onPageChange={onPageChange}>
 <TableHead>
 <TableRow>
 {headerKeyPairs.map((pair, index) => (
 <TableHeader key={index}>{pair.headerDisplayName}</TableHeader>
 ))}
 </TableRow>
 </TableHead>
 <TableBody>
 {currentPagedObjects.length > 0 ? (
 currentPagedObjects.map((object, index) => (
 <TableRow key={index}>
 {headerKeyPairs.map((pair, index) => (
 <TableCell key={index} width="min">
 {object[pair.objectKey]}
 </TableCell> 
 ))}
 </TableRow>
 ))
 ) : (
 <TableRow>
 <TableCell>No data found</TableCell>
 </TableRow>
 )}
 </TableBody>
 </Table>

```

I found a workaround which is to define each cell as a button so I can add the OnClick handler but it is far from ideal, and not user friendly at all. (the screenshot above shows the button implementation)

Hope this additional information helps.

---

<div class="post-metadata">

**Author:** ![GRajput](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/grajput/32/102020_2.png) [@GRajput](https://community.hubspot.com/u/GRajput)\
**Post date:** [November 21, 2024, 6:41am UTC](https://community.hubspot.com/t/onclick-handler-on-tablerow-component/120902/4 "2024-11-21T06:41:15Z")

</div>

Hi @FOman

You can add an onClick event to your table rows. This will allow you to capture the click and take action. When you click on any row, the handleRowClick function will run with the data from that row.

> **[Screenshot](https://prnt.sc/a0wHDUfhxkkB)**
>
> Captured with Lightshot

```lia-code-sample
import React, { useState } from 'react';
function App() {
 const [selectedRow, setSelectedRow] = useState(null);
 const handleRowClick = (rowData) => {
 setSelectedRow(rowData);
 alert(`Row clicked: Name: ${rowData.name}, Age: ${rowData.age}`);
 };
 const tableData = [
 { name: 'John Doe', age: 25 },
 { name: 'Jane Smith', age: 30 },
 { name: 'Alice Johnson', age: 35 },
 ];
 return (
 <div className="App">
 <table>
 <thead>
 <tr>
 <th>Name</th>
 <th>Age</th>
 </tr>
 </thead>
 <tbody>
 {tableData.map((rowData, index) => (
 <tr
 key={index}
 onClick={() => handleRowClick(rowData)}
 style={{ cursor: 'pointer' }}
 >
 <td>{rowData.name}</td>
 <td>{rowData.age}</td>
 </tr>
 ))}
 </tbody>
 </table>
 {selectedRow && (
 <div>
 <h3>Selected Row:</h3>
 <p>Name: {selectedRow.name}</p>
 <p>Age: {selectedRow.age}</p>
 </div>
 )}
 </div>
 );
}
export default App;

```

I hope this will help you out. Please mark it as **Solution Accepted and upvote** to help another Community member.  
Thanks!

---

<div class="post-metadata">

**Author:** ![FOman](https://avatars.discourse-cdn.com/v4/letter/f/a4c791/32.png) [@FOman](https://community.hubspot.com/u/FOman)\
**Post date:** [November 22, 2024, 8:03pm UTC](https://community.hubspot.com/t/onclick-handler-on-tablerow-component/120902/5 "2024-11-22T20:03:28Z")

</div>

hey so this sounds like a good solution but there are two things here.

- I am using hubspot ui extensions library ( I have an example further below )

- when I tried to use a `div` for example it failed rendering with a console error. Is that because I am using `hubspot.extend`?

---

<div class="post-metadata">

**Author:** ![Berangere](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/berangere/32/220784_2.png) [@Berangere](https://community.hubspot.com/u/Berangere)\
**Post date:** [January 21, 2025, 3:15pm UTC](https://community.hubspot.com/t/onclick-handler-on-tablerow-component/120902/6 "2025-01-21T15:15:33Z")

</div>

Hi @FOman, thank you for the additional information!  
Hi @GRajput, thanks a lot for your help! ❤  
Do you have insights to share with @FOman, please, regarding the 2 points above?  
Have a lovely day and thanks a lot!  
Best,  
Bérangère