Add hover handlers for TableWidget

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Not released
 
+- Support for `onRowMouseEnter` and `onRowMouseLeave` handlers for Table Widget [#907](https://github.com/CartoDB/carto-react/pull/907)
+
 ## 3.0.0
 
 ### 3.0.0-alpha.19 (2024-09-19)

packages/react-ui/src/widgets/TableWidgetUI/TableWidgetUI.js

@@ -64,6 +64,8 @@ function TableWidgetUI({
   rowsPerPageOptions,
   onSetRowsPerPage,
   onRowClick,
+  onRowMouseEnter,
+  onRowMouseLeave,
   height,
   dense,
   isLoading,
@@ -126,7 +128,13 @@ function TableWidgetUI({
             sortDirection={sortDirection}
             onSort={handleSort}
           />
-          <TableBodyComponent columns={columns} rows={rows} onRowClick={onRowClick} />
+          <TableBodyComponent
+            columns={columns}
+            rows={rows}
+            onRowMouseEnter={onRowMouseEnter}
+            onRowMouseLeave={onRowMouseLeave}
+            onRowClick={onRowClick}
+          />
         </Table>
       </TableContainer>
       {pagination && (
@@ -182,7 +190,13 @@ function TableHeaderComponent({ columns, sorting, sortBy, sortDirection, onSort
   );
 }
 
-function TableBodyComponent({ columns, rows, onRowClick }) {
+function TableBodyComponent({
+  columns,
+  rows,
+  onRowMouseEnter,
+  onRowMouseLeave,
+  onRowClick
+}) {
   return (
     <TableBody>
       {rows.map((row, i) => {
@@ -192,6 +206,8 @@ function TableBodyComponent({ columns, rows, onRowClick }) {
           <TableRowStyled
             key={rowKey}
             hover={!!onRowClick}
+            onMouseEnter={() => onRowMouseEnter && onRowMouseEnter(row)}
+            onMouseLeave={() => onRowMouseLeave && onRowMouseLeave(row)}
             onClick={() => onRowClick && onRowClick(row)}
           >
             {columns.map(({ field, headerName, align, component, formatter }) => {
@@ -253,6 +269,8 @@ TableWidgetUI.propTypes = {
   rowsPerPageOptions: PropTypes.array,
   onSetRowsPerPage: PropTypes.func,
   onRowClick: PropTypes.func,
+  onRowMouseEnter: PropTypes.func,
+  onRowMouseLeave: PropTypes.func,
   height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   dense: PropTypes.bool,
   isLoading: PropTypes.bool,

packages/react-widgets/src/widgets/TableWidget.js

@@ -15,6 +15,8 @@ import { _FeatureFlags, _hasFeatureFlag } from '@carto/react-core';
  * @param  {string} props.dataSource - ID of the data source to get the data from.
  * @param  {Column[]} props.columns - List of data columns to display.
  * @param  {Column[]} props.hiddenColumnFields - List of data columns to be retrieved, but not displayed.
+ * @param  {Function=} props.onRowMouseEnter - Function to handle on mouse enter events on rows.
+ * @param  {Function=} props.onRowMouseLeave - Function to handle on mouse leave events on rows.
  * @param  {Function=} props.onRowClick - Function to handle on click events on rows.
  * @param  {Function=} [props.onError] - Function to handle error messages from the widget.
  * @param  {Function=} [props.onStateChange] - Callback to handle state updates of widgets
@@ -42,6 +44,8 @@ function TableWidget({
   onError,
   onStateChange,
   onRowClick,
+  onRowMouseEnter,
+  onRowMouseLeave,
   initialPageSize = 10,
   onPageSizeChange,
   global,
@@ -132,6 +136,8 @@ function TableWidget({
             height={height}
             dense={dense}
             isLoading={isLoading}
+            onRowMouseEnter={onRowMouseEnter}
+            onRowMouseLeave={onRowMouseLeave}
             onRowClick={onRowClick}
           />
         )}
@@ -160,6 +166,8 @@ TableWidget.propTypes = {
   height: PropTypes.string,
   stableHeight: PropTypes.bool,
   dense: PropTypes.bool,
+  onRowMouseEnter: PropTypes.func,
+  onRowMouseLeave: PropTypes.func,
   searchText: PropTypes.string,
   searchColumn: PropTypes.string,
   // Internal state