diff --git a/packages/main/src/components/AnalyticalTable/AnayticalTable.jss.ts b/packages/main/src/components/AnalyticalTable/AnayticalTable.jss.ts index 40f58eaa659..b9b8157bf9d 100644 --- a/packages/main/src/components/AnalyticalTable/AnayticalTable.jss.ts +++ b/packages/main/src/components/AnalyticalTable/AnayticalTable.jss.ts @@ -41,14 +41,11 @@ const styles = ({ parameters }: JSSTheme) => ({ backgroundColor: parameters.sapUiListBackground }, alternateRowColor: { - '& $tr:nth-child(even)': { - backgroundColor: parameters.sapUiListHeaderBackground - } + backgroundColor: parameters.sapUiListHeaderBackground }, emptyRow: {}, tr: { zIndex: 0, - backgroundColor: parameters.sapUiListBackground, color: parameters.sapUiListTextColor, '&[data-is-selected]': { backgroundColor: `${parameters.sapUiListSelectionBackgroundColor} !important` 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 26233fd101a..cf0fffb4a84 100644 --- a/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap +++ b/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap @@ -283,7 +283,7 @@ exports[`AnalyticalTable Alternate Row Color 1`] = ` style="position: relative; height: 220px; width: 600px; overflow: auto; will-change: transform; direction: ltr;" >
@@ -445,7 +445,7 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
@@ -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,