fix(AnalyticalTable): add missing keys (#808)

Author: MarcusNotheis

packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderContainer.tsx

@@ -1,5 +1,5 @@
 import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
-import React, { useCallback } from 'react';
+import React, { Fragment, useCallback } from 'react';
 import { createUseStyles } from 'react-jss';
 import { useVirtual, VirtualItem } from 'react-virtual';
 import { ColumnHeader } from './index';
@@ -71,8 +71,10 @@ export const ColumnHeaderContainer = (props) => {
           return null;
         }
         const isLastColumn = !column.disableResizing && virtualColumn.index + 1 === headerGroup.headers.length;
+
+        const { key, ...rest } = column.getHeaderProps();
         return (
-          <>
+          <Fragment key={key}>
             {column.canResize && column.getResizerProps && (
               <div
                 {...column.getResizerProps()}
@@ -82,7 +84,7 @@ export const ColumnHeaderContainer = (props) => {
               />
             )}
             <ColumnHeader
-              {...column.getHeaderProps()}
+              {...rest}
               onSort={onSort}
               onGroupBy={onGroupByChanged}
               onDragStart={onDragStart}
@@ -97,7 +99,7 @@ export const ColumnHeaderContainer = (props) => {
             >
               {column.render('Header')}
             </ColumnHeader>
-          </>
+          </Fragment>
         );
       })}
     </div>

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

@@ -441,14 +441,15 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
         >
           <div className={classes.tableHeaderBackgroundElement} />
           {headerGroups.map((headerGroup) => {
-            let headerProps = {};
+            let headerProps: Record<string, unknown> = {};
             if (headerGroup.getHeaderGroupProps) {
               headerProps = headerGroup.getHeaderGroupProps();
             }
 
             return (
               tableRef.current && (
                 <ColumnHeaderContainer
+                  key={headerProps.key}
                   reactWindowRef={reactWindowRef}
                   tableRef={tableRef}
                   resizeInfo={tableState.columnResizing}