Search code examples
javascriptreactjsmaterial-table

Material-Table detect hover on row


I am using React material-table (https://material-table.com). Can I detect when a row is hovered?

I need some property like onRowClick but for hover:

<MaterialTable icons={{ Filter: () => 
    <SearchIcon className={classes.searchIcon} /> 
    }} columns={[ ... ]} data={this.props.data} options={{ ... }} 
    onRowClick={(event, rowData) => this.handleOpen(event, rowData)} 

Solution

  • I'm not sure I understand that correctly, but I think you are looking for onMouseEnter. You can pass in custom components, even for the row's. You can then listen for the mouseenter event on them.

    https://material-table.com/#/docs/features/component-overriding

    https://reactjs.org/docs/events.html#mouse-events