fixup! fixup! fixup! feat(Table): support providing selected rows to …

…sync with external model

packages/react/src/components/table/table.tsx

@@ -17,7 +17,6 @@ import { Fragment, ReactElement, useEffect, useMemo, useRef, useState } from 're
 import styled from 'styled-components';
 import { useTranslation } from '../../i18n/use-translation';
 import { devConsole } from '../../utils/dev-console';
-import { isEqual } from '../../utils/object';
 import { v4 as uuid } from '../../utils/uuid';
 import { IconButton } from '../buttons';
 import { Checkbox } from '../checkbox/checkbox';
@@ -27,6 +26,7 @@ import { TableFooter } from './table-footer';
 import { TableHeader } from './table-header';
 import { StyledTableRow, TableRow } from './table-row';
 import { TableColumn, TableData } from './types';
+import { isSameRowSelectionState } from './utils/table-utils';
 
 type RowSize = 'small' | 'medium' | 'large';
 
@@ -479,7 +479,7 @@ export const Table = <T extends object>({
             return acc;
         }, {} satisfies RowSelectionState);
 
-        if (!isEqual(currentRowSelection, newSelection)) {
+        if (!isSameRowSelectionState(currentRowSelection, newSelection)) {
             setRowSelection(newSelection);
         }
         setPreviousSelectedRows(selectedRows);

packages/react/src/components/table/utils/table-utils.ts

@@ -1,4 +1,25 @@
-import { Column } from '@tanstack/react-table';
+import { type Column, type RowSelectionState } from '@tanstack/react-table';
+
+export function isSameRowSelectionState(obj1: RowSelectionState, obj2: RowSelectionState): boolean {
+    if (obj1 === obj2) {
+        return true;
+    }
+
+    const keys1 = Object.keys(obj1);
+    const keys2 = Object.keys(obj2);
+    if (keys1.length !== keys2.length) {
+        return false;
+    }
+
+    for (let i = 0; i < keys1.length; i++) {
+        const key = keys1[i];
+        if (obj1[key] !== obj2[key]) {
+            return false;
+        }
+    }
+
+    return true;
+}
 
 export function calculateStickyColumns(
     stickyColumns: boolean[],
@@ -32,40 +53,6 @@ export function calculateStickyHeader(
     });
 }
 
-export function calculateStickyFooter(
-    stickyColumns: boolean[],
-    footerCells: NodeListOf<HTMLTableCellElement>,
-): void {
-    Array.from(footerCells).forEach((footerCell, index) => {
-        footerCell.style.setProperty('bottom', '0px');
-        footerCell.style.setProperty('z-index', stickyColumns[index] ? '5' : '4');
-    });
-}
-
-export function calculateStickyPosition(
-    stickyColumns: boolean[],
-    stickyHeader: boolean,
-    stickyFooter: boolean,
-    tableRef: React.RefObject<HTMLTableElement>,
-): void {
-    if (tableRef.current === null) {
-        return;
-    }
-    const headerCells = tableRef.current.querySelectorAll('th');
-    const rows = tableRef.current.querySelectorAll<HTMLTableRowElement>('tbody > tr');
-    const footerCells = tableRef.current.querySelector('tfoot')?.querySelectorAll('td');
-
-    calculateStickyColumns(stickyColumns, headerCells, rows);
-
-    if (stickyHeader) {
-        calculateStickyHeader(stickyColumns, headerCells);
-    }
-
-    if (stickyFooter && footerCells !== null && footerCells !== undefined) {
-        calculateStickyFooter(stickyColumns, footerCells);
-    }
-}
-
 export function isAGroupColumn<TData, TValue>(column: Column<TData, TValue>): boolean {
     return column.columns.length > 0;
 }