fix(AnalyticalTable): Always respect Cell option (#359)

Closes #358

Author: MarcusNotheis

packages/main/src/components/AnalyticalTable/defaults/Column/Aggregated.tsx

@@ -2,7 +2,7 @@ import { Text } from '@ui5/webcomponents-react/lib/Text';
 import React from 'react';
 
 export const Cell = ({ cell: { value = '', isGrouped }, row }) => {
-  let cellContent = `${value}`;
+  let cellContent = `${value ?? ''}`;
   if (isGrouped) {
     cellContent += ` (${row.subRows.length})`;
   }

packages/main/src/components/AnalyticalTable/defaults/Column/Cell.tsx

@@ -68,7 +68,7 @@ export const Expandable = (props) => {
       ) : (
         <span style={{ paddingLeft }} />
       )}
-      {cell.value && cell.render('Cell')}
+      {cell.render('Cell')}
     </>
   );
 };

packages/main/src/components/AnalyticalTable/defaults/Column/Expandable.tsx

@@ -1,6 +1,5 @@
 import { VerticalAlign } from '@ui5/webcomponents-react/lib/VerticalAlign';
 import { DefaultFilterComponent } from '../FilterComponent';
-import { Aggregated } from './Aggregated';
 import { Cell } from './Cell';
 import { Expandable } from './Expandable';
 import { Grouped } from './Grouped';
@@ -18,7 +17,6 @@ export const DefaultColumn = {
   canReorder: true,
   minWidth: DEFAULT_COLUMN_WIDTH,
   vAlign: VerticalAlign.Middle,
-  Aggregated: Aggregated,
   defaultFilter: defaultFilterMethod,
   Grouped: Grouped,
   Cell: Cell,

packages/main/src/components/AnalyticalTable/defaults/Column/index.tsx

@@ -61,6 +61,9 @@ export const useRowSelectionColumn: PluginHook<{}> = (hooks) => {
         // to the render a checkbox
         // eslint-disable-next-line react/prop-types,react/display-name
         Cell: ({ row }) => {
+          if (row.isGrouped && selectionMode === TableSelectionMode.SINGLE_SELECT) {
+            return null;
+          }
           if (selectionMode === TableSelectionMode.SINGLE_SELECT) {
             // eslint-disable-next-line react/prop-types
             return <div style={divStyle} onClick={row.toggleRowSelected} />;
@@ -72,5 +75,23 @@ export const useRowSelectionColumn: PluginHook<{}> = (hooks) => {
       ...columns
     ];
   });
+
+  hooks.visibleColumnsDeps.push((deps, { instance }) => [
+    ...deps,
+    instance.webComponentsReactProperties.noSelectionColumn,
+    instance.webComponentsReactProperties.selectionMode
+  ]);
+
+  hooks.visibleColumns.push((columns, { instance: { webComponentsReactProperties } }) => {
+    if (
+      webComponentsReactProperties.noSelectionColumn ||
+      webComponentsReactProperties.selectionMode === TableSelectionMode.NONE
+    ) {
+      return columns;
+    }
+
+    const selectionColumn = columns.find(({ id }) => id === '__ui5wcr__internal_selection_column');
+    return [selectionColumn, ...columns.filter(({ id }) => id !== '__ui5wcr__internal_selection_column')];
+  });
 };
 useRowSelectionColumn.pluginName = 'useRowSelectionColumn';

packages/main/src/components/AnalyticalTable/hooks/useRowSelectionColumn.tsx

@@ -215,7 +215,6 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
       },
       ...reactTableOptions
     },
-    useRowSelectionColumn,
     useAbsoluteLayout,
     useFilters,
     useGroupBy,
@@ -232,6 +231,7 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
     useColumnsDependencies,
     useTableCellStyling,
     useToggleRowExpand,
+    useRowSelectionColumn,
     ...tableHooks
   );
 

packages/main/src/components/AnalyticalTable/index.tsx

@@ -25,7 +25,7 @@ export const VirtualTableRow = (props) => {
           contentToRender = 'Expandable';
         } else if (cell.isGrouped) {
           contentToRender = 'Grouped';
-        } else if (row.isGrouped) {
+        } else if (cell.isAggregated) {
           contentToRender = 'Aggregated';
         } else if (cell.isPlaceholder || cell.column.isGrouped) {
           contentToRender = 'RepeatedValue';