@@ -3057,7 +3057,7 @@ exports[`AnalyticalTable render without data 1`] = `
style="position: relative; height: 220px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
>
@@ -3203,7 +3203,7 @@ exports[`AnalyticalTable render without data 1`] = `
diff --git a/packages/main/src/components/AnalyticalTable/hooks/useTableRowStyling.ts b/packages/main/src/components/AnalyticalTable/hooks/useTableRowStyling.ts
index 142fc2b3061..58abb9b18c0 100644
--- a/packages/main/src/components/AnalyticalTable/hooks/useTableRowStyling.ts
+++ b/packages/main/src/components/AnalyticalTable/hooks/useTableRowStyling.ts
@@ -4,19 +4,22 @@ import { TableSelectionMode } from '@ui5/webcomponents-react/lib/TableSelectionM
const ROW_SELECTION_ATTRIBUTE = 'data-is-selected';
export const useTableRowStyling = (hooks) => {
-
hooks.getRowProps.push((passedRowProps, { instance, row }) => {
- const { classes, selectionMode, onRowSelected } = instance.webComponentsReactProperties;
+ const { classes, selectionMode, onRowSelected, alternateRowColor } = instance.webComponentsReactProperties;
const isEmptyRow = row.original?.emptyRow;
let className = classes.tr;
if (row.isGrouped) {
className += ` ${classes.tableGroupHeader}`;
}
- if(isEmptyRow) {
+ if (isEmptyRow) {
className += ` ${classes.emptyRow}`;
}
+ if (alternateRowColor && row.index % 2 !== 0) {
+ className += ` ${classes.alternateRowColor}`;
+ }
+
const rowProps: any = {
...passedRowProps,
className,
diff --git a/packages/main/src/components/AnalyticalTable/index.tsx b/packages/main/src/components/AnalyticalTable/index.tsx
index 08ef94f66a6..7f4bec47df2 100644
--- a/packages/main/src/components/AnalyticalTable/index.tsx
+++ b/packages/main/src/components/AnalyticalTable/index.tsx
@@ -52,7 +52,7 @@ import { TitleBar } from './TitleBar';
import { VirtualTableBody } from './virtualization/VirtualTableBody';
import { useDynamicColumnWidths } from './hooks/useDynamicColumnWidths';
import { TableScaleWidthMode } from '../../enums/TableScaleWidthMode';
-import {useColumnsDependencies} from "./hooks/useColumnsDependencies";
+import { useColumnsDependencies } from './hooks/useColumnsDependencies';
export interface ColumnConfiguration extends Column {
accessor?: string;
@@ -181,7 +181,6 @@ const AnalyticalTable: FC
= forwardRef((props: TableProps, ref: Ref<
return props.data;
}, [props.data, minRows]);
-
const {
getTableProps,
headerGroups,
@@ -205,6 +204,7 @@ const AnalyticalTable: FC = forwardRef((props: TableProps, ref: Ref<
onRowSelected,
onRowExpandChange,
isTreeTable,
+ alternateRowColor,
// tableClientWidth,
scaleWidthMode
},
@@ -232,7 +232,7 @@ const AnalyticalTable: FC = forwardRef((props: TableProps, ref: Ref<
const updateTableClientWidth = useCallback(() => {
requestAnimationFrame(() => {
if (tableRef.current) {
- dispatch({ type: 'TABLE_RESIZE', payload: { tableClientWidth: tableRef.current.clientWidth }});
+ dispatch({ type: 'TABLE_RESIZE', payload: { tableClientWidth: tableRef.current.clientWidth } });
}
});
}, []);
@@ -326,7 +326,7 @@ const AnalyticalTable: FC = forwardRef((props: TableProps, ref: Ref<
{title && {title}}
{typeof renderExtension === 'function' && {renderExtension()}
}
- {(
+ {
{headerGroups.map((headerGroup) => {
let headerProps = {};
@@ -395,7 +395,7 @@ const AnalyticalTable: FC
= forwardRef((props: TableProps, ref: Ref<
/>
)}
- )}
+ }
);
diff --git a/packages/main/src/components/AnalyticalTable/virtualization/VirtualTableBody.tsx b/packages/main/src/components/AnalyticalTable/virtualization/VirtualTableBody.tsx
index 045b498e40a..35a4e642323 100644
--- a/packages/main/src/components/AnalyticalTable/virtualization/VirtualTableBody.tsx
+++ b/packages/main/src/components/AnalyticalTable/virtualization/VirtualTableBody.tsx
@@ -33,9 +33,6 @@ export const VirtualTableBody = (props) => {
if (selectionMode === TableSelectionMode.SINGLE_SELECT || selectionMode === TableSelectionMode.MULTI_SELECT) {
innerDivRef.current.classList.add(classes.selectable);
}
- if (alternateRowColor) {
- innerDivRef.current.classList.add(classes.alternateRowColor);
- }
}
}, [
innerDivRef.current,