fix(AnalyticalTable): Expose React Table Container ref (#341)

Co-authored-by: Marcus Notheis <[email protected]>

Author: clemai

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

@@ -1,7 +1,8 @@
 import { createPassThroughPropsTest, mountThemedComponent } from '@shared/tests/utils';
 import { AnalyticalTable } from '@ui5/webcomponents-react/lib/AnalyticalTable';
 import { TableSelectionMode } from '@ui5/webcomponents-react/lib/TableSelectionMode';
-import React from 'react';
+import { AnalyticalTableScrollMode } from '@ui5/webcomponents-react/lib/AnalyticalTableScrollMode';
+import React, { useRef } from 'react';
 
 const columns = [
   {
@@ -277,5 +278,25 @@ describe('AnalyticalTable', () => {
     expect(wrapper.render()).toMatchSnapshot();
   });
 
+  test('Check for scrollTo and scrollToItem functions', () => {
+    let tableRef;
+    const UsingTable = (props) => {
+      tableRef = useRef(null);
+      return <AnalyticalTable ref={tableRef} title="Table Title" data={data} columns={columns} />;
+    };
+
+    mountThemedComponent(<UsingTable />);
+
+    // Check existence + type
+    expect(typeof tableRef.current.scrollTo).toBe('function');
+    expect(typeof tableRef.current.scrollToItem).toBe('function');
+
+    // call functions
+    const tableInnerRef = tableRef.current.querySelector("div[class^='AnalyticalTable--table'] > div > div");
+    tableRef.current.scrollToItem(2, AnalyticalTableScrollMode.end);
+    tableRef.current.scrollTo(2);
+    expect(tableInnerRef.scrollTop).toBe(2);
+  });
+
   createPassThroughPropsTest(AnalyticalTable);
 });

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

@@ -5,19 +5,21 @@ import { AnalyticalTableDomRef } from '../../../interfaces/AnalyticalTableDomRef
 export const useTableScrollHandles = (ref) => {
   const analyticalTableRef: RefObject<AnalyticalTableDomRef> = useConsolidatedRef(ref);
   const reactWindowRef = useRef(null);
-  // @ts-ignore
-  useImperativeHandle(analyticalTableRef, () => ({
-    scrollTo: (...args) => {
-      if (reactWindowRef.current) {
-        reactWindowRef.current.scrollTo(...args);
-      }
-    },
-    scrollToItem: (...args) => {
-      if (reactWindowRef.current) {
-        reactWindowRef.current.scrollToItem(...args);
+
+  if (analyticalTableRef.current) {
+    Object.assign(analyticalTableRef.current, {
+      scrollTo: (...args) => {
+        if (reactWindowRef.current) {
+          reactWindowRef.current.scrollTo(...args);
+        }
+      },
+      scrollToItem: (...args) => {
+        if (reactWindowRef.current) {
+          reactWindowRef.current.scrollToItem(...args);
+        }
       }
-    }
-  }));
+    });
+  }
 
   return [analyticalTableRef, reactWindowRef];
 };

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

@@ -114,7 +114,7 @@ export interface TableProps extends CommonProps {
   onRowExpandChange?: (e?: Event) => any;
   onColumnsReordered?: (e?: Event) => void;
   /**
-   * additional options which will be passed to [react-table´s useTable hook](https://github.com/tannerlinsley/react-table/blob/master/docs/api.md#table-options)
+   * additional options which will be passed to [react-table´s useTable hook](https://github.com/tannerlinsley/react-table/blob/master/docs/api/useTable.md#table-options)
    */
   reactTableOptions?: object;
   tableHooks?: PluginHook<any>[];

packages/main/src/interfaces/AnalyticalTableDomRef.ts

@@ -1,6 +1,7 @@
 import { AnalyticalTableScrollMode } from '@ui5/webcomponents-react/lib/AnalyticalTableScrollMode';
 
-// also makes use of scrollTo which is already defined somewhere in HTMLDivElement
+//@ts-ignore
 export interface AnalyticalTableDomRef extends HTMLDivElement {
   scrollToItem: (index: number, align?: AnalyticalTableScrollMode) => void;
+  scrollTo: (scrollOffset: number) => void; //overrides native scrollTo function
 }