DataTable onSelect is not passing the "datum" argument #6727
Description
Expected Behavior
In this DataTable example, I have the onSelect function defined as:
onSelect={(select, datum) => console.log({select, datum})}
However, the datum value is always undefined where I was expecting it to be the value of the selected row. What is needed to have datum passed?
<DataTable
onSelect={(selected, datum) => console.log({selected, datum})}
columns={[
{
property: 'name',
header: <Text>Name</Text>,
primary: true,
},
{
property: 'percent',
header: 'Complete',
render: datum => (
<Box pad={{ vertical: 'xsmall' }}>
<Meter
values={[{ value: datum.percent }]}
thickness="small"
size="small"
/>
</Box>
),
},
]}
data={[
{ name: 'Alan', percent: 20 },
{ name: 'Bryan', percent: 30 },
{ name: 'Chris', percent: 40 },
{ name: 'Eric', percent: 80 },
]}
/>
Actual Behavior
The datum argument is always undefined
URL, screen shot, or Codepen exhibiting the issue
See above.
Steps to Reproduce
Click the "example" link in the description above and open the browser's devtools console to observe the behavior.
Your Environment
- Grommet version: 2.31
- Browser Name and version: Chrome (latest)
- Operating System and version (desktop or mobile): Desktop.