diff --git a/packages/main/src/components/AnalyticalTable/AnayticalTable.jss.ts b/packages/main/src/components/AnalyticalTable/AnayticalTable.jss.ts index b9b8157bf9d..dd25ffad51b 100644 --- a/packages/main/src/components/AnalyticalTable/AnayticalTable.jss.ts +++ b/packages/main/src/components/AnalyticalTable/AnayticalTable.jss.ts @@ -38,7 +38,9 @@ const styles = ({ parameters }: JSSTheme) => ({ tbody: { position: 'relative', zIndex: 0, - backgroundColor: parameters.sapUiListBackground + backgroundColor: parameters.sapUiListBackground, + overflowX: 'hidden !important', + overflowY: 'auto !important' }, alternateRowColor: { backgroundColor: parameters.sapUiListHeaderBackground @@ -97,10 +99,6 @@ const styles = ({ parameters }: JSSTheme) => ({ whiteSpace: 'nowrap', alignItems: 'center' }, - virtualTableBody: { - overflowX: 'hidden !important', - overflowY: 'auto !important' - }, noDataContainer: { display: 'flex', justifyContent: 'center', diff --git a/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap b/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap index 0399e532345..1bf294917bc 100644 --- a/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap +++ b/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap @@ -279,11 +279,10 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
{ selectedFlatRows } = props; - const innerDivRef = useRef(null); - - useEffect(() => { - if (innerDivRef.current) { - innerDivRef.current.classList = ''; - innerDivRef.current.classList.add(classes.tbody); - if (selectionMode === TableSelectionMode.SINGLE_SELECT || selectionMode === TableSelectionMode.MULTI_SELECT) { - innerDivRef.current.classList.add(classes.selectable); - } - } - }, [ - innerDivRef.current, - selectionMode, - classes.tbody, - classes.selectable, - alternateRowColor, - classes.alternateRowColor - ]); + const innerDivRef = useRef(); const itemCount = Math.max(minRows, rows.length); const overscan = overscanCount ? overscanCount : Math.floor(visibleRows / 2); @@ -74,9 +58,14 @@ export const VirtualTableBody = (props) => { [prepareRow] ); + const classNames = StyleClassHelper.of(classes.tbody); + if (selectionMode === TableSelectionMode.SINGLE_SELECT || selectionMode === TableSelectionMode.MULTI_SELECT) { + classNames.put(classes.selectable); + } + return (