fix(AnalyticalTable): fix React key warning (#7100)

This warning was introduced in React v18.3.

Fixes #7093

Author: Lukas742

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

@@ -6,8 +6,7 @@ import { classNames, styleData } from './Resizer.module.css.js';
 import { ColumnHeader } from './index.js';
 
 interface ColumnHeaderContainerProps {
-  headerProps: Record<string, unknown>;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  headerProps: Record<string, any>;
   headerGroup: Record<string, any>;
   onSort: (e: CustomEvent<{ column: unknown; sortDirection: string }>) => void;
   onGroupByChanged: (e: CustomEvent<{ column?: Record<string, unknown>; isGrouped?: boolean }>) => void;
@@ -32,12 +31,14 @@ export const ColumnHeaderContainer = forwardRef<HTMLDivElement, ColumnHeaderCont
     uniqueId,
     showVerticalEndBorder
   } = props;
+  const { key, ...reactTableHeaderProps } = headerProps;
 
   useStylesheet(styleData, 'Resizer');
 
   return (
     <div
-      {...headerProps}
+      key={key}
+      {...reactTableHeaderProps}
       style={{ width: `${columnVirtualizer.getTotalSize()}px` }}
       ref={ref}
       data-component-name="AnalyticalTableHeaderRow"

packages/main/src/components/AnalyticalTable/TableBody/VirtualTableBody.tsx

@@ -151,7 +151,7 @@ export const VirtualTableBody = (props: VirtualTableBodyProps) => {
           lastNonEmptyRow.current = row;
         }
         prepareRow(row);
-        const rowProps = row.getRowProps({
+        const { key, ...rowProps } = row.getRowProps({
           'aria-rowindex': virtualRow.index + 1,
           'data-virtual-row-index': virtualRow.index
         });
@@ -190,8 +190,8 @@ export const VirtualTableBody = (props: VirtualTableBodyProps) => {
             : rowVirtualizer.measureElement;
 
         return (
-          // eslint-disable-next-line react/jsx-key
           <div
+            key={key}
             {...rowProps}
             ref={measureRef}
             style={{
@@ -227,7 +227,7 @@ export const VirtualTableBody = (props: VirtualTableBodyProps) => {
               if (!cell) {
                 return null;
               }
-              const cellProps = cell.getCellProps();
+              const { key, ...cellProps } = cell.getCellProps();
               const allCellProps = {
                 ...cellProps,
                 ['data-visible-column-index']: visibleColumnIndex,
@@ -269,8 +269,11 @@ export const VirtualTableBody = (props: VirtualTableBodyProps) => {
               }
 
               return (
-                // eslint-disable-next-line react/jsx-key
-                <div {...allCellProps} data-selection-cell={cell.column.id === '__ui5wcr__internal_selection_column'}>
+                <div
+                  key={key}
+                  {...allCellProps}
+                  data-selection-cell={cell.column.id === '__ui5wcr__internal_selection_column'}
+                >
                   {popInRowHeight !== internalRowHeight && popInColumn.id === cell.column.id
                     ? cell.render('PopIn', { contentToRender, internalRowHeight })
                     : cell.render(contentToRender, isNavigatedCell === true ? { isNavigatedCell } : {})}