diff --git a/frontend/taipy-gui/src/components/Taipy/AutoLoadingTable.tsx b/frontend/taipy-gui/src/components/Taipy/AutoLoadingTable.tsx index 223d5256..282018fd 100644 --- a/frontend/taipy-gui/src/components/Taipy/AutoLoadingTable.tsx +++ b/frontend/taipy-gui/src/components/Taipy/AutoLoadingTable.tsx @@ -60,6 +60,7 @@ import { getRowIndex, getTooltip, defaultColumns, + OnRowClick, } from "./tableUtils"; import { useClassNames, @@ -85,6 +86,7 @@ interface RowData { onValidation?: OnCellValidation; onDeletion?: OnRowDeletion; onRowSelection?: OnRowSelection; + onRowClick?: OnRowClick; lineStyle?: string; nanValue?: string; } @@ -104,6 +106,7 @@ const Row = ({ onValidation, onDeletion, onRowSelection, + onRowClick, lineStyle, nanValue, }, @@ -122,6 +125,7 @@ const Row = ({ className={(classes && classes.row) + " " + getClassName(rows[index], lineStyle)} data-index={index} selected={selection.indexOf(index) > -1} + onClick={onRowClick} > {colsOrder.map((col, cidx) => ( { col: colName, user_value: userValue, tz: tz, - user_data: userData + user_data: userData, }) ), [dispatch, updateVarName, onEdit, rows, module, userData] @@ -432,18 +436,29 @@ const AutoLoadingTable = (props: TaipyTableProps) => { ); 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) => { + 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 @@ const AutoLoadingTable = (props: TaipyTableProps) => { 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 @@ const AutoLoadingTable = (props: TaipyTableProps) => { onRowDeletion, onAction, onRowSelection, + onRowClick, props.lineStyle, props.nanValue, size, diff --git a/frontend/taipy-gui/src/components/Taipy/PaginatedTable.tsx b/frontend/taipy-gui/src/components/Taipy/PaginatedTable.tsx index 69846e1b..bcff660b 100644 --- a/frontend/taipy-gui/src/components/Taipy/PaginatedTable.tsx +++ b/frontend/taipy-gui/src/components/Taipy/PaginatedTable.tsx @@ -66,6 +66,7 @@ import { OnRowSelection, getRowIndex, getTooltip, + OnRowClick, } from "./tableUtils"; import { useClassNames, @@ -304,7 +305,7 @@ const PaginatedTable = (props: TaipyPaginatedTableProps) => { createSendActionNameAction(updateVarName, module, { action: onAdd, index: startIndex, - user_data: userData + user_data: userData, }) ), [startIndex, dispatch, updateVarName, onAdd, module, userData] @@ -378,18 +379,29 @@ const PaginatedTable = (props: TaipyPaginatedTableProps) => { ); 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) => { + 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 @@ const PaginatedTable = (props: TaipyPaginatedTableProps) => { 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) => ( ): 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) => { + e.stopPropagation(); + onSelection && onSelection(rowIndex, colDesc.dfid); + }, + [onSelection, rowIndex, colDesc.dfid] + ); useEffect(() => { !onValidation && setEdit(false);