fix(AnalyticalTable): control row-selection explicitly by setting selectRowIds

Author: Lukas742

packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.mdx

@@ -92,7 +92,7 @@ import { FlexBoxJustifyContent } from '@ui5/webcomponents-react/lib/FlexBoxJusti
     groupable: true,
     groupBy: [],
     rowHeight: 44,
-    selectedRowIds: { 3: true },
+    selectedRowIds: undefined,
     withRowHighlight: true,
     highlightField: 'status',
     infiniteScroll: true,

packages/main/src/components/AnalyticalTable/hooks/useSingleRowStateSelection.ts

@@ -56,13 +56,14 @@ const getRowProps = (rowProps, { row, instance }) => {
         if (selectionBehavior === TableSelectionBehavior.ROW_SELECTOR && !selectionCellClick) {
           return;
         }
-
-        if (selectionMode === TableSelectionMode.SINGLE_SELECT) {
-          for (const row of selectedFlatRows) {
-            toggleRowSelected(row.id, false);
+        if (!webComponentsReactProperties.selectedRowIds) {
+          if (selectionMode === TableSelectionMode.SINGLE_SELECT) {
+            for (const row of selectedFlatRows) {
+              toggleRowSelected(row.id, false);
+            }
           }
+          instance.toggleRowSelected(row.id);
         }
-        instance.toggleRowSelected(row.id);
 
         // fire event
         if (typeof onRowSelected === 'function') {

packages/main/src/components/AnalyticalTable/index.tsx

@@ -207,7 +207,8 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
     totalColumnsWidth,
     toggleRowSelected,
     toggleAllRowsSelected,
-    setGroupBy
+    setGroupBy,
+    initialState
   } = useTable(
     {
       columns,
@@ -232,7 +233,8 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
         scaleWidthMode,
         loading,
         withRowHighlight,
-        highlightField
+        highlightField,
+        selectedRowIds
       },
       ...reactTableOptions
     },
@@ -282,14 +284,16 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
   }, [groupBy, setGroupBy]);
 
   useEffect(() => {
-    toggleAllRowsSelected(false);
-    const validChars = /^\d+(\.\d+)*$/;
-    // eslint-disable-next-line guard-for-in
-    for (const row in selectedRowIds) {
-      if (reactTableOptions?.getRowId) {
-        toggleRowSelected(row, selectedRowIds[row]);
-      } else if (validChars.test(row)) {
-        toggleRowSelected(row, selectedRowIds[row]);
+    if (selectedRowIds) {
+      toggleAllRowsSelected(false);
+      const validChars = /^\d+(\.\d+)*$/;
+      // eslint-disable-next-line guard-for-in
+      for (const row in selectedRowIds) {
+        if (reactTableOptions?.getRowId) {
+          toggleRowSelected(row, selectedRowIds[row]);
+        } else if (validChars.test(row)) {
+          toggleRowSelected(row, selectedRowIds[row]);
+        }
       }
     }
   }, [toggleRowSelected, toggleAllRowsSelected, selectedRowIds, reactTableOptions?.getRowId]);
@@ -485,7 +489,6 @@ AnalyticalTable.defaultProps = {
   visibleRows: 15,
   subRowsKey: 'subRows',
   highlightField: 'status',
-  selectedRowIds: {},
   onGroup: () => {},
   onRowExpandChange: () => {},
   onColumnsReordered: () => {},