feat(AnalyticalTable): Update to react-table rc.10 (#253)

Support Multi Selection of rows
BREAKING CHANGE: replaced prop `selectedRowKey` with `selectedRowIds` (Object of rowIds)
BREAKING CHANGE:  Update to react-table `7.0.0-rc.10`

Author: MarcusNotheis

packages/main/package.json

@@ -29,7 +29,7 @@
     "lodash.debounce": "^4.0.8",
     "react-content-loader": "^4.3.2",
     "react-jss": "10.0.0",
-    "react-table": "7.0.0-rc.5",
+    "react-table": "7.0.0-rc.10",
     "react-toastify": "^5.4.1",
     "react-window": "^1.8.5"
   },

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

@@ -250,4 +250,13 @@ describe('AnalyticalTable', () => {
 
     expect(wrapper.render()).toMatchSnapshot();
   });
+
+  test('render without data', () => {
+    const data = [];
+    const wrapper = mountThemedComponent(
+      <AnalyticalTable title="Table Title" data={data} columns={columns} alternateRowColor />
+    );
+
+    expect(wrapper.render()).toMatchSnapshot();
+  });
 });

packages/main/src/components/AnalyticalTable/AnayticalTable.jss.ts

@@ -38,31 +38,23 @@ const styles = ({ parameters }: JSSTheme) => ({
     position: 'relative',
     zIndex: 0,
     overflowX: 'auto',
+    backgroundColor: parameters.sapUiListBackground
+  },
+  tr: {
+    zIndex: 0,
     backgroundColor: parameters.sapUiListBackground,
-    '&$selectable $tr:hover': {
-      backgroundColor: parameters.sapUiListHoverBackground
-    },
-    '& $selectedRow': {
+    color: parameters.sapUiListTextColor,
+    '&[data-is-selected]': {
       backgroundColor: parameters.sapUiListSelectionBackgroundColor
     },
-    '& $selectedRow:hover': {
+    '&[data-is-selected]:hover': {
       backgroundColor: `${parameters.sapUiListSelectionHoverBackground} !important`
-    },
-    '&$selectable $tr:active:not($selectedRow):not($tableGroupHeader)': {
-      backgroundColor: parameters.sapUiListActiveBackground,
-      color: parameters.sapUiListActiveTextColor
-    },
-    '&$selectable $tr:active:not($selectedRow):not($tableGroupHeader) $tableCell': {
-      borderRight: `1px solid ${parameters.sapUiListActiveBackground}`
     }
   },
-  tr: {
-    zIndex: 0,
-    backgroundColor: parameters.sapUiListBackground,
-    color: parameters.sapUiListTextColor
-  },
   alternateRowColor: {
-    backgroundColor: parameters.sapUiListHeaderBackground
+    '& $tr:nth-child(even)': {
+      backgroundColor: parameters.sapUiListHeaderBackground
+    }
   },
   tableGroupHeader: {
     '&$tr': {
@@ -74,8 +66,20 @@ const styles = ({ parameters }: JSSTheme) => ({
       }
     }
   },
-  selectable: {},
-  selectedRow: {},
+  selectable: {
+    '& $tr:hover': {
+      backgroundColor: parameters.sapUiListHoverBackground,
+      cursor: 'pointer'
+    },
+    '& $tr:active:not([data-is-selected]):not($tableGroupHeader)': {
+      backgroundColor: parameters.sapUiListActiveBackground,
+      '& $tableCell': {
+        borderRight: `1px solid ${parameters.sapUiListActiveBackground}`,
+        color: `${parameters.sapUiListActiveTextColor}`,
+        '--sapUiBaseText': parameters.sapUiListActiveTextColor
+      }
+    }
+  },
   tableCell: {
     height: '2.75rem',
     fontFamily: parameters.sapUiFontFamily,