refactor(Table): Update to react-table v7

packages/main/package.json

@@ -22,7 +22,7 @@
     "@ui5/webcomponents": "1.0.0-rc.2",
     "@ui5/webcomponents-react-base": "0.5.1-rc.7",
     "lodash.debounce": "^4.0.8",
-    "react-table": "6.10.0",
+    "react-table": "7.0.0-alpha.34",
     "react-toastify": "^5.0.1"
   },
   "devDependencies": {

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

@@ -42,9 +42,7 @@ const data = [
 
 describe('AnalyticalTable', () => {
   test('test Asc desc', () => {
-    const wrapper = mountThemedComponent(
-      <AnalyticalTable showPagination data={data} title={'Test'} columns={columns} />
-    );
+    const wrapper = mountThemedComponent(<AnalyticalTable data={data} title={'Test'} columns={columns} />);
 
     // test asc function inside the popover element
     let component = wrapper
@@ -62,46 +60,6 @@ describe('AnalyticalTable', () => {
     // @ts-ignore
     component.onclick({});
 
-    expect(wrapper.render()).toMatchSnapshot();
-  });
-  test('pagination', () => {
-    const wrapper = mountThemedComponent(
-      <AnalyticalTable defaultPageSize={1} showPagination data={data} title={'Test'} columns={columns} />
-    );
-
-    // test the right arrow of the pagination
-
-    let component = wrapper
-      .find('ui5-link')
-      .at(3)
-      .instance();
-    // @ts-ignore
-    component.fireEvent('click');
-
-    // test the right page number link of the pagination
-    component = wrapper
-      .find('ui5-link')
-      .at(2)
-      .instance();
-    // @ts-ignore
-    component.fireEvent('click');
-
-    // test the left page number link of the pagination
-    component = wrapper
-      .find('ui5-link')
-      .at(1)
-      .instance();
-    // @ts-ignore
-    component.fireEvent('click');
-
-    // test the left arrow of the pagination
-    component = wrapper
-      .find('ui5-link')
-      .at(0)
-      .instance();
-    // @ts-ignore
-    component.fireEvent('click');
-
     expect(wrapper.render()).toMatchSnapshot();
   });
 });

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

@@ -5,41 +5,109 @@ import { ContentDensity } from '@ui5/webcomponents-react/lib/ContentDensity';
 const styles = ({ parameters, contentDensity }: JSSTheme) => ({
   tHead: {
     boxShadow: 'none !important',
-    height: `${contentDensity === ContentDensity.Compact ? '2rem' : '3rem'}`,
-    borderBottom: `1px solid ${parameters.sapUiListVerticalBorderColor} !important`,
-    borderTop: `1px solid ${parameters.sapUiListVerticalBorderColor} !important`
+    height: `${contentDensity === ContentDensity.Compact ? '2rem' : '2.75rem'}`
   },
 
-  tr: {
-    background: parameters.sapUiListBackground,
-    borderBottom: `1px solid ${parameters.sapUiListVerticalBorderColor} !important`,
-    '& >:first-child': {
-      paddingLeft: '1rem !important'
-    },
-    '& >:not(:first-child)': {
-      paddingLeft: '0.5rem'
+  th: {
+    backgroundColor: parameters.sapUiListHeaderBackground,
+    height: `${contentDensity === ContentDensity.Compact ? '2rem' : '2.75rem'}`,
+    fontFamily: parameters.sapUiFontFamily,
+    fontSize: parameters.sapMFontMediumSize,
+    fontWeight: 'normal',
+    color: parameters.sapUiListHeaderTextColor,
+    borderTop: `1px solid ${parameters.sapUiListBorderColor}`,
+    borderBottom: `1px solid ${parameters.sapUiListBorderColor}`,
+    borderRight: `1px solid ${parameters.sapUiListVerticalBorderColor}`,
+    textAlign: 'start',
+    boxSizing: 'border-box',
+    '&:first-child': {
+      borderLeft: `1px solid ${parameters.sapUiListVerticalBorderColor}`
+    }
+  },
+  tableHeaderRow: {},
+  tableGroupHeader: {
+    '&$tr': {
+      backgroundColor: `${parameters.sapUiListTableGroupHeaderBackground} !important`,
+      border: `1px solid ${parameters.sapUiListTableGroupHeaderBorderColor}`,
+      color: parameters.sapUiListTextColor,
+      '& $td': {
+        borderRight: 'none'
+      }
     }
   },
-  trGroup: {
-    border: 'none!important'
+
+  tableGroupExpandCollapseIcon: {
+    color: parameters.sapUiContentIconColor,
+    height: '2rem',
+    width: '2rem',
+    fontSize: '0.75rem'
   },
+
+  tbody: {
+    position: 'relative',
+    '&$selectable $tr': {
+      '&:hover': {
+        backgroundColor: parameters.sapUiListHoverBackground
+      },
+      '&:active:not($selectedRow)': {
+        backgroundColor: parameters.sapUiListActiveBackground,
+        '& $td': {
+          color: parameters.sapUiListActiveTextColor,
+          borderRight: `1px solid ${parameters.sapUiListActiveBackground}`
+        }
+      },
+      '&$selectedRow': {
+        backgroundColor: parameters.sapUiListSelectionBackgroundColor,
+        color: parameters.sapUiListActiveTextColor,
+        '&:hover': {
+          backgroundColor: parameters.sapUiListSelectionHoverBackground
+        }
+      }
+    },
+    '& $tr': {
+      backgroundColor: parameters.sapUiListBackground
+    }
+  },
+  tr: {},
+  selectable: {},
+  selectedRow: {},
   td: {
-    // borderRight: `1px solid ${parameters.sapUiListVerticalBorderColor} !important`,
-    height: `${contentDensity === ContentDensity.Compact ? '2rem' : '3rem'}`,
-    display: 'flex',
-    alignItems: 'center',
+    height: `${contentDensity === ContentDensity.Compact ? '2rem' : '2.75rem'}`,
     fontFamily: fonts.sapUiFontFamily,
     fontSize: fonts.sapMFontMediumSize,
     fontWeight: 'normal',
-    // backgroundColor: parameters.sapUiListBackground,
     color: parameters.sapUiListTextColor,
-    paddingRight: '0.5rem !important'
+    borderBottom: `1px solid ${parameters.sapUiListBorderColor}`,
+    borderRight: `1px solid ${parameters.sapUiListVerticalBorderColor}`,
+    display: 'table-cell',
+    padding: '0 0.5rem',
+    '&:first-child': {
+      borderLeft: `1px solid ${parameters.sapUiListVerticalBorderColor}`
+    }
   },
   tBody: {
     boxShadow: 'none !important'
   },
+  tableContainer: {
+    width: '100%',
+    height: `${contentDensity === ContentDensity.Compact ? 'calc(100% - 2rem)' : 'calc(100% - 2.75rem)'}`,
+    minHeight: '3rem'
+  },
   table: {
-    // border: `1px solid ${parameters.sapList_BorderColor} !important`
+    borderSpacing: 0,
+    position: 'relative'
+  },
+  noDataContainer: {
+    textAlign: 'center',
+    paddingTop: '0.5rem',
+    paddingBottom: '0.5rem',
+    backgroundColor: parameters.sapUiListBackground,
+    width: '100%',
+    boxSizing: 'border-box',
+    color: parameters.sapUiListTextColor,
+    fontFamily: fonts.sapUiFontFamily,
+    fontSize: fonts.sapMFontMediumSize,
+    fontWeight: 'normal'
   }
 });
 

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

@@ -0,0 +1,12 @@
+import React from 'react';
+
+// const style = {
+//   width: '100%',
+//   position: 'absolute',
+//   textAlign: 'center',
+//   marginTop: '1rem'
+// };
+
+export const DefaultNoDataComponent = ({ noDataText, className }) => {
+  return <div className={className}>{noDataText}</div>;
+};

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

@@ -1,16 +1,26 @@
-import { BusyIndicatorType } from '@ui5/webcomponents-react/lib/BusyIndicatorType';
-import { BusyIndicator } from '@ui5/webcomponents-react/lib/BusyIndicator';
 import React from 'react';
+import { BusyIndicator } from '@ui5/webcomponents-react/lib/BusyIndicator';
+import { BusyIndicatorType } from '@ui5/webcomponents-react/lib/BusyIndicatorType';
 
-const LoadingComponent = (props) => {
-  if (!props.loading) {
-    return null;
-  }
-  let className = '-loading -active';
+const LoadingComponent = () => {
   return (
-    <div className={className} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-      <BusyIndicator size={BusyIndicatorType.Medium} active style={{ backgroundColor: 'transparent' }} />
-    </div>
+    <tr>
+      <td
+        style={{
+          position: 'absolute',
+          top: '0',
+          left: '0',
+          right: '0',
+          bottom: '0',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          backgroundColor: 'rgba(247,247,247,0.72)' // TODO is there a theming parameter available?
+        }}
+      >
+        <BusyIndicator size={BusyIndicatorType.Medium} active style={{ backgroundColor: 'transparent' }} />
+      </td>
+    </tr>
   );
 };