Table row selection (#503)

frontend/taipy-gui/src/components/Taipy/AutoLoadingTable.tsx

@@ -60,6 +60,7 @@
     getRowIndex,
     getTooltip,
     defaultColumns,
+    OnRowClick,
 } from "./tableUtils";
 import {
     useClassNames,
@@ -85,6 +86,7 @@
     onValidation?: OnCellValidation;
     onDeletion?: OnRowDeletion;
     onRowSelection?: OnRowSelection;
+    onRowClick?: OnRowClick;
     lineStyle?: string;
     nanValue?: string;
 }
@@ -104,6 +106,7 @@
         onValidation,
         onDeletion,
         onRowSelection,
+        onRowClick,
         lineStyle,
         nanValue,
     },
@@ -122,6 +125,7 @@
             className={(classes && classes.row) + " " + getClassName(rows[index], lineStyle)}
             data-index={index}
             selected={selection.indexOf(index) > -1}
+            onClick={onRowClick}
         >
             {colsOrder.map((col, cidx) => (
                 <EditableCell
@@ -405,16 +409,16 @@
 
     const onCellValidation: OnCellValidation = useCallback(
         (value: RowValue, rowIndex: number, colName: string, userValue: string, tz?: string) =>
             dispatch(
                 createSendActionNameAction(updateVarName, module, {
                     action: onEdit,
                     value: value,
                     index: getRowIndex(rows[rowIndex], rowIndex),
                     col: colName,
                     user_value: userValue,
                     tz: tz,
-                    user_data: userData
+                    user_data: userData,
                 })
             ),
         [dispatch, updateVarName, onEdit, rows, module, userData]
     );
@@ -432,18 +436,29 @@
     );
 
     const onRowSelection: OnRowSelection = useCallback(
-        (rowIndex: number, colName: string) =>
+        (rowIndex: number, colName?: string) =>
             dispatch(
                 createSendActionNameAction(updateVarName, module, {
                     action: onAction,
                     index: getRowIndex(rows[rowIndex], rowIndex),
-                    col: colName,
-                    user_data: userData
+                    col: colName === undefined ? null : colName,
+                    user_data: userData,
                 })
             ),
         [dispatch, updateVarName, onAction, rows, module, userData]
     );
 
+    const onRowClick = useCallback(
+        (e: MouseEvent<HTMLTableRowElement>) => {
+            const { index } = e.currentTarget.dataset || {};
+            const rowIndex = index === undefined ? NaN : Number(index);
+            if (!isNaN(rowIndex)) {
+                onRowSelection(rowIndex);
+            }
+        },
+        [onRowSelection]
+    );
+
     const onTaipyItemsRendered = useCallback(
         (onItemsR: (props: ListOnItemsRenderedProps) => undefined) =>
             ({ visibleStartIndex, visibleStopIndex }: { visibleStartIndex: number; visibleStopIndex: number }) => {
@@ -471,6 +486,7 @@
             onValidation: active && onEdit ? onCellValidation : undefined,
             onDeletion: active && onDelete ? onRowDeletion : undefined,
             onRowSelection: active && onAction ? onRowSelection : undefined,
+            onRowClick: active && onAction ? onRowClick : undefined,
             lineStyle: props.lineStyle,
             nanValue: props.nanValue,
         }),
@@ -488,6 +504,7 @@
             onRowDeletion,
             onAction,
             onRowSelection,
+            onRowClick,
             props.lineStyle,
             props.nanValue,
             size,

frontend/taipy-gui/src/components/Taipy/PaginatedTable.tsx

@@ -66,6 +66,7 @@
     OnRowSelection,
     getRowIndex,
     getTooltip,
+    OnRowClick,
 } from "./tableUtils";
 import {
     useClassNames,
@@ -304,7 +305,7 @@
                 createSendActionNameAction(updateVarName, module, {
                     action: onAdd,
                     index: startIndex,
-                    user_data: userData
+                    user_data: userData,
                 })
             ),
         [startIndex, dispatch, updateVarName, onAdd, module, userData]
@@ -378,18 +379,29 @@
     );
 
     const onRowSelection: OnRowSelection = useCallback(
-        (rowIndex: number, colName: string) =>
+        (rowIndex: number, colName?: string) =>
             dispatch(
                 createSendActionNameAction(updateVarName, module, {
                     action: onAction,
                     index: getRowIndex(rows[rowIndex], rowIndex, startIndex),
-                    col: colName,
+                    col: colName === undefined ? null : colName,
                     user_data: userData,
                 })
             ),
         [dispatch, updateVarName, onAction, rows, startIndex, module, userData]
     );
 
+    const onRowClick: OnRowClick = useCallback(
+        (e: MouseEvent<HTMLTableRowElement>) => {
+            const { index } = e.currentTarget.dataset || {};
+            const rowIndex = index === undefined ? NaN : Number(index);
+            if (!isNaN(rowIndex)) {
+                onRowSelection(rowIndex);
+            }
+        },
+        [onRowSelection]
+    );
+
     const boxSx = useMemo(() => ({ ...baseBoxSx, width: width }), [width]);
 
     return (
@@ -492,6 +504,8 @@
                                             selected={sel > -1}
                                             ref={sel == 0 ? selectedRowRef : undefined}
                                             className={getClassName(row, props.lineStyle)}
+                                            data-index={index}
+                                            onClick={active && onAction ? onRowClick : undefined}
                                         >
                                             {colsOrder.map((col, cidx) => (
                                                 <EditableCell

frontend/taipy-gui/src/components/Taipy/tableUtils.tsx

@@ -147,7 +147,11 @@ export interface OnRowDeletion {
 }
 
 export interface OnRowSelection {
-    (rowIndex: number, colName: string): void;
+    (rowIndex: number, colName?: string): void;
+}
+
+export interface OnRowClick {
+    (e: MouseEvent<HTMLTableRowElement>): void;
 }
 
 interface EditableCellProps {
@@ -343,8 +347,8 @@ export const EditableCell = (props: EditableCellProps) => {
 
     const onDeleteClick = useCallback(
         (evt?: MouseEvent) => {
-            onDeletion && setDeletion((d) => !d);
             evt && evt.stopPropagation();
+            onDeletion && setDeletion((d) => !d);
         },
         [onDeletion]
     );
@@ -363,10 +367,13 @@ export const EditableCell = (props: EditableCellProps) => {
         [onDeleteCheckClick, onDeleteClick]
     );
 
-    const onSelect = useCallback(() => {
-        onSelection && onSelection(rowIndex, colDesc.dfid);
-        return false;
-    }, [onSelection, rowIndex, colDesc.dfid]);
+    const onSelect = useCallback(
+        (e: MouseEvent<HTMLDivElement>) => {
+            e.stopPropagation();
+            onSelection && onSelection(rowIndex, colDesc.dfid);
+        },
+        [onSelection, rowIndex, colDesc.dfid]
+    );
 
     useEffect(() => {
         !onValidation && setEdit(false);