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 
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
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.
The code I have now, simplified is like this:
<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.
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.
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!
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`?
