row 'select' hook doesn't trigger when a cell contains an Icon #48
Description
The select hook is trigger on a row selection except if a call contains an icon. Do you know a workaround for this, for example being able to call the select function from the Icon's onclick() callback?
To re-create:
npx create-react-app my-app --template typescript
cd my-app
npm install @table-library/react-table-library @emotion/react @emotion/styled @mui/icons-materialReplace App.tsx with:
import {
Table,
Header,
HeaderRow,
HeaderCell,
Body,
Row,
Cell,
} from "@table-library/react-table-library/table";
import { useRowSelect } from "@table-library/react-table-library/select";
import StarIcon from "@mui/icons-material/Star";
const list = [
{
id: "1",
name: "VSCode",
},
{
id: "2",
name: "JavaScript",
},
{
id: "3",
name: "React",
},
];
const App = () => {
const select = useRowSelect(
{ nodes: list },
{
onChange: onSelectChange,
}
);
function onSelectChange(action: any, state: any) {
console.log(action, state);
}
const data = { nodes: list };
return (
<Table data={data} select={select}>
{(tableList) => (
<>
<Header>
<HeaderRow>
<HeaderCell>Icon</HeaderCell>
<HeaderCell>Name</HeaderCell>
</HeaderRow>
</Header>
<Body>
{tableList.map((item) => (
<Row key={item.id} item={item}>
<Cell>
<StarIcon />
</Cell>
<Cell>{item.name}</Cell>
</Row>
))}
</Body>
</>
)}
</Table>
);
};
export default App;Click on the row, it works. Click on the icon, nothing happens.