From 4cff28833ac8a7ee3da7b5374a87010d4229c2c5 Mon Sep 17 00:00:00 2001
From: carkom <neilmccreery@yahoo.com>
Date: Wed, 13 Dec 2023 14:16:00 +0000
Subject: [PATCH] update table layout

---
 .../src/components/reports/ChooseGraph.tsx    |  18 +-
 .../src/components/reports/ColumnPrimary.tsx  |  67 -------
 .../components/reports/ColumnScrollbar.tsx    |  56 ------
 .../src/components/reports/ReportTable.tsx    |  73 ++++---
 .../reports/ReportTableColumTotals.tsx        | 102 ++++++++++
 .../reports/ReportTableColumnIndex.tsx        |  81 ++++++++
 .../components/reports/ReportTableHeader.tsx  | 108 +++++------
 .../components/reports/ReportTableInner.tsx   |  89 ++++-----
 .../src/components/reports/ReportTableRow.tsx | 112 +++--------
 .../components/reports/ReportTableTotals.tsx  | 179 ++++++++++--------
 .../src/components/reports/TableRowIndex.tsx  |  41 ----
 .../spreadsheets/default-spreadsheet.tsx      |   4 +-
 .../spreadsheets/grouped-spreadsheet.ts       |   4 +-
 13 files changed, 459 insertions(+), 475 deletions(-)
 delete mode 100644 packages/desktop-client/src/components/reports/ColumnPrimary.tsx
 delete mode 100644 packages/desktop-client/src/components/reports/ColumnScrollbar.tsx
 create mode 100644 packages/desktop-client/src/components/reports/ReportTableColumTotals.tsx
 create mode 100644 packages/desktop-client/src/components/reports/ReportTableColumnIndex.tsx
 delete mode 100644 packages/desktop-client/src/components/reports/TableRowIndex.tsx

diff --git a/packages/desktop-client/src/components/reports/ChooseGraph.tsx b/packages/desktop-client/src/components/reports/ChooseGraph.tsx
index 12401ff91df..dcbc2c2cd48 100644
--- a/packages/desktop-client/src/components/reports/ChooseGraph.tsx
+++ b/packages/desktop-client/src/components/reports/ChooseGraph.tsx
@@ -65,18 +65,26 @@ function ChooseGraph({
       listScrollRef.current.scrollLeft = scroll.target.scrollLeft;
     }
     if (scroll.target.id === 'list') {
-      if (headerScrollRef.current.scrollLeft !== scroll.target.scrollLeft) {
-        headerScrollRef.current.scrollLeft = scroll.target.scrollLeft;
-        totalScrollRef.current.scrollLeft = scroll.target.scrollLeft;
-      } else {
+      if (indexScrollRef.current.scrollTop !== scroll.target.scrollTop) {
         indexScrollRef.current.scrollTop = scroll.target.scrollTop;
         scrollScrollRef.current.scrollTop = scroll.target.scrollTop;
+      } else {
+        if (headerScrollRef.current) {
+          headerScrollRef.current.scrollLeft = scroll.target.scrollLeft;
+        }
+        if (totalScrollRef.current) {
+          totalScrollRef.current.scrollLeft = scroll.target.scrollLeft;
+        }
       }
     }
     if (scroll.target.id === 'index') {
       listScrollRef.current.scrollTop = scroll.target.scrollTop;
       scrollScrollRef.current.scrollTop = scroll.target.scrollTop;
     }
+    if (scroll.target.id === 'scroll') {
+      listScrollRef.current.scrollTop = scroll.target.scrollTop;
+      indexScrollRef.current.scrollTop = scroll.target.scrollTop;
+    }
   };
 
   if (graphType === 'AreaGraph') {
@@ -123,7 +131,7 @@ function ChooseGraph({
         <ReportTableHeader
           headerScrollRef={headerScrollRef}
           handleScroll={handleScroll}
-          interval={mode === 'time' && months}
+          interval={mode === 'time' && data.monthData}
           scrollWidth={scrollWidth}
           groupBy={groupBy}
           balanceType={balanceType}
diff --git a/packages/desktop-client/src/components/reports/ColumnPrimary.tsx b/packages/desktop-client/src/components/reports/ColumnPrimary.tsx
deleted file mode 100644
index 5d79a3aed11..00000000000
--- a/packages/desktop-client/src/components/reports/ColumnPrimary.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import React from 'react';
-
-import { theme } from '../../style';
-import View from '../common/View';
-import { Row } from '../table';
-
-import { type GroupedEntity } from './entities';
-import TableRowIndex from './TableRowIndex';
-
-type ColumnPrimaryProps = {
-  item: GroupedEntity;
-  balanceTypeOp?: string | null;
-  groupByItem: string;
-  showEmpty: boolean;
-};
-
-function ColumnPrimary({
-  item,
-  balanceTypeOp,
-  groupByItem,
-  showEmpty,
-}: ColumnPrimaryProps) {
-  return (
-    <>
-      <TableRowIndex
-        key={item.id}
-        item={item}
-        groupByItem={groupByItem}
-        style={
-          item.categories && {
-            color: theme.tableRowHeaderText,
-            backgroundColor: theme.tableRowHeaderBackground,
-            fontWeight: 600,
-          }
-        }
-      />
-      {item.categories && (
-        <>
-          <View>
-            {item.categories
-              .filter(i =>
-                !showEmpty
-                  ? balanceTypeOp === 'totalTotals'
-                    ? i.totalAssets !== 0 ||
-                      i.totalDebts !== 0 ||
-                      i.totalTotals !== 0
-                    : i[balanceTypeOp] !== 0
-                  : true,
-              )
-              .map(cat => {
-                return (
-                  <TableRowIndex
-                    key={cat.id}
-                    item={cat}
-                    groupByItem={groupByItem}
-                  />
-                );
-              })}
-          </View>
-          <Row height={20} />
-        </>
-      )}
-    </>
-  );
-}
-
-export default ColumnPrimary;
diff --git a/packages/desktop-client/src/components/reports/ColumnScrollbar.tsx b/packages/desktop-client/src/components/reports/ColumnScrollbar.tsx
deleted file mode 100644
index b5b867b3d18..00000000000
--- a/packages/desktop-client/src/components/reports/ColumnScrollbar.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import React from 'react';
-
-import { theme } from '../../style';
-import View from '../common/View';
-import { Row } from '../table';
-
-import { type GroupedEntity } from './entities';
-import TableRowIndex from './TableRowIndex';
-
-type ColumnScrollbarProps = {
-  item: GroupedEntity;
-  balanceTypeOp: string;
-  showEmpty: boolean;
-};
-
-function ColumnScrollbar({
-  item,
-  balanceTypeOp,
-  showEmpty,
-}: ColumnScrollbarProps) {
-  return (
-    <>
-      <TableRowIndex
-        style={
-          item.categories && {
-            color: theme.tableRowHeaderText,
-            backgroundColor: theme.tableRowHeaderBackground,
-            fontWeight: 600,
-          }
-        }
-      />
-      {item.categories && (
-        <>
-          <View>
-            {item.categories
-              .filter(i =>
-                !showEmpty
-                  ? balanceTypeOp === 'totalTotals'
-                    ? i.totalAssets !== 0 ||
-                      i.totalDebts !== 0 ||
-                      i.totalTotals !== 0
-                    : i[balanceTypeOp] !== 0
-                  : true,
-              )
-              .map(cat => {
-                return <TableRowIndex key={cat.id} />;
-              })}
-          </View>
-          <Row height={20} />
-        </>
-      )}
-    </>
-  );
-}
-
-export default ColumnScrollbar;
diff --git a/packages/desktop-client/src/components/reports/ReportTable.tsx b/packages/desktop-client/src/components/reports/ReportTable.tsx
index 29df35c0343..76ec40cb690 100644
--- a/packages/desktop-client/src/components/reports/ReportTable.tsx
+++ b/packages/desktop-client/src/components/reports/ReportTable.tsx
@@ -5,13 +5,13 @@ import React, {
 } from 'react';
 import { type RefProp } from 'react-spring';
 
-import { type CSSProperties } from '../../style';
+import { theme, type CSSProperties } from '../../style';
 import Block from '../common/Block';
 import View from '../common/View';
 
-import ColumnPrimary from './ColumnPrimary';
-import ColumnScrollbar from './ColumnScrollbar';
 import { type GroupedEntity } from './entities';
+import ReportTableColumnIndex from './ReportTableColumnIndex';
+import ReportTableColumnTotals from './ReportTableColumTotals';
 import ReportTableInner from './ReportTableInner';
 import ReportTableRow from './ReportTableRow';
 
@@ -48,22 +48,25 @@ export default function ReportTable({
 
   useLayoutEffect(() => {
     if (scrollScrollRef.current && saveScrollWidth) {
-      saveScrollWidth(
-        scrollScrollRef.current ? scrollScrollRef.current.offsetWidth : 0,
-      );
+      const [parent, child] = [
+        scrollScrollRef.current.offsetWidth,
+        scrollScrollRef.current.clientWidth,
+      ];
+
+      saveScrollWidth(parent > 0 && child > 0 && parent - child);
     }
   });
 
-  const renderItem = useCallback(
-    ({ item, groupByItem, mode, monthsCount, style, key }) => {
+  const renderItemTotal = useCallback(
+    ({ item, groupByItem, monthsCount, style, key }) => {
       return (
-        <ReportTableRow
+        <ReportTableColumnTotals
           key={key}
           item={item}
           balanceTypeOp={balanceTypeOp}
+          monthsCount={monthsCount}
           groupByItem={groupByItem}
           mode={mode}
-          monthsCount={monthsCount}
           style={style}
         />
       );
@@ -71,13 +74,22 @@ export default function ReportTable({
     [],
   );
 
+  const renderItem = useCallback(({ item, groupByItem, mode, style, key }) => {
+    return (
+      <ReportTableRow
+        key={key}
+        item={item}
+        balanceTypeOp={balanceTypeOp}
+        groupByItem={groupByItem}
+        mode={mode}
+        style={style}
+      />
+    );
+  }, []);
+
   return (
     <View
-      innerRef={listScrollRef}
       style={{
-        overflowY: 'auto',
-        scrollbarWidth: 'none',
-        '::-webkit-scrollbar': { display: 'none' },
         flex: 1,
         flexDirection: 'row',
         outline: 'none',
@@ -102,19 +114,24 @@ export default function ReportTable({
       >
         {data.map(item => {
           return (
-            <ColumnPrimary
+            <ReportTableColumnIndex
               key={item.id}
               item={item}
-              balanceTypeOp={balanceTypeOp}
               groupByItem={groupByItem}
-              showEmpty={showEmpty}
+              headerStyle={
+                item.categories && {
+                  color: theme.tableRowHeaderText,
+                  backgroundColor: theme.tableRowHeaderBackground,
+                  fontWeight: 600,
+                }
+              }
             />
           );
         })}
       </Block>
       <Block
         style={{
-          overflowY: 'auto',
+          overflow: 'auto',
           flex: 1,
           scrollbarWidth: 'none',
           '::-webkit-scrollbar': { display: 'none' },
@@ -125,9 +142,7 @@ export default function ReportTable({
       >
         <ReportTableInner
           data={data}
-          showEmpty={showEmpty}
           monthsCount={monthsCount}
-          balanceTypeOp={balanceTypeOp}
           mode={mode}
           groupBy={groupBy}
           renderItem={renderItem}
@@ -139,18 +154,16 @@ export default function ReportTable({
         onScroll={handleScroll}
         style={{
           overflowY: 'auto',
+          flexShrink: 0,
         }}
       >
-        {data.map(item => {
-          return (
-            <ColumnScrollbar
-              key={item.id}
-              item={item}
-              balanceTypeOp={balanceTypeOp}
-              showEmpty={showEmpty}
-            />
-          );
-        })}
+        <ReportTableInner
+          data={data}
+          monthsCount={monthsCount}
+          mode={mode}
+          groupBy={groupBy}
+          renderItem={renderItemTotal}
+        />
       </Block>
     </View>
   );
diff --git a/packages/desktop-client/src/components/reports/ReportTableColumTotals.tsx b/packages/desktop-client/src/components/reports/ReportTableColumTotals.tsx
new file mode 100644
index 00000000000..bb1e108833a
--- /dev/null
+++ b/packages/desktop-client/src/components/reports/ReportTableColumTotals.tsx
@@ -0,0 +1,102 @@
+import React, { memo } from 'react';
+
+import {
+  amountToCurrency,
+  amountToInteger,
+  integerToCurrency,
+} from 'loot-core/src/shared/util';
+
+import { styles, theme } from '../../style';
+import { Row, Cell } from '../table';
+
+import { type GroupedEntity } from './entities';
+
+type ReportTableColumnTotalsProps = {
+  item: GroupedEntity;
+  balanceTypeOp?: string;
+  groupByItem: string;
+  monthsCount: number;
+  mode: string;
+  style?: object;
+};
+
+const ReportTableColumnTotals = memo(
+  ({
+    item,
+    balanceTypeOp,
+    groupByItem,
+    monthsCount,
+    mode,
+    style,
+  }: ReportTableColumnTotalsProps) => {
+    const average = amountToInteger(item[balanceTypeOp]) / monthsCount;
+    return (
+      <Row
+        key={item[groupByItem]}
+        collapsed={true}
+        style={{
+          color: theme.tableText,
+          backgroundColor: theme.tableBackground,
+          ...style,
+        }}
+      >
+        {balanceTypeOp === 'totalTotals' && (
+          <>
+            <Cell
+              value={amountToCurrency(item.totalAssets)}
+              title={
+                Math.abs(item.totalAssets) > 100000 &&
+                amountToCurrency(item.totalAssets)
+              }
+              width="flex"
+              style={{
+                width: 85,
+                ...styles.tnum,
+              }}
+            />
+            <Cell
+              value={amountToCurrency(item.totalDebts)}
+              title={
+                Math.abs(item.totalDebts) > 100000 &&
+                amountToCurrency(item.totalDebts)
+              }
+              width="flex"
+              style={{
+                width: 85,
+                ...styles.tnum,
+              }}
+            />
+          </>
+        )}
+        <Cell
+          value={amountToCurrency(item[balanceTypeOp])}
+          title={
+            Math.abs(item[balanceTypeOp]) > 100000 &&
+            amountToCurrency(item[balanceTypeOp])
+          }
+          style={{
+            fontWeight: 600,
+            width: 85,
+            ...styles.tnum,
+          }}
+          privacyFilter
+        />
+        <Cell
+          value={integerToCurrency(Math.round(average))}
+          title={
+            Math.abs(Math.round(average / 100)) > 100000 &&
+            integerToCurrency(Math.round(average))
+          }
+          style={{
+            fontWeight: 600,
+            width: 85,
+            ...styles.tnum,
+          }}
+          privacyFilter
+        />
+      </Row>
+    );
+  },
+);
+
+export default ReportTableColumnTotals;
diff --git a/packages/desktop-client/src/components/reports/ReportTableColumnIndex.tsx b/packages/desktop-client/src/components/reports/ReportTableColumnIndex.tsx
new file mode 100644
index 00000000000..be1e32d6c8f
--- /dev/null
+++ b/packages/desktop-client/src/components/reports/ReportTableColumnIndex.tsx
@@ -0,0 +1,81 @@
+import React from 'react';
+
+import { type CSSProperties, styles, theme } from '../../style';
+import View from '../common/View';
+import { Row, Cell } from '../table';
+
+import { type GroupedEntity } from './entities';
+
+type ReportTableColumnIndexProps = {
+  item?: GroupedEntity;
+  groupByItem?: string;
+  headerStyle?: CSSProperties;
+};
+
+function ReportTableColumnIndex({
+  item,
+  groupByItem,
+  headerStyle,
+}: ReportTableColumnIndexProps) {
+  return (
+    <>
+      <Row
+        collapsed={true}
+        style={{
+          color: theme.tableText,
+          backgroundColor: theme.tableBackground,
+          ...headerStyle,
+        }}
+      >
+        {item ? (
+          <Cell
+            value={item[groupByItem]}
+            width="flex"
+            title={item[groupByItem].length > 12 && item[groupByItem]}
+            style={{
+              minWidth: 125,
+              ...styles.tnum,
+            }}
+          />
+        ) : (
+          <Cell />
+        )}
+      </Row>
+      {item.categories && (
+        <>
+          <View>
+            {item.categories.map(cat => {
+              return (
+                <Row
+                  key={cat.id}
+                  collapsed={true}
+                  style={{
+                    color: theme.tableText,
+                    backgroundColor: theme.tableBackground,
+                  }}
+                >
+                  {cat ? (
+                    <Cell
+                      value={cat[groupByItem]}
+                      width="flex"
+                      title={cat[groupByItem].length > 12 && cat[groupByItem]}
+                      style={{
+                        minWidth: 125,
+                        ...styles.tnum,
+                      }}
+                    />
+                  ) : (
+                    <Cell />
+                  )}
+                </Row>
+              );
+            })}
+          </View>
+          <Row height={20} />
+        </>
+      )}
+    </>
+  );
+}
+
+export default ReportTableColumnIndex;
diff --git a/packages/desktop-client/src/components/reports/ReportTableHeader.tsx b/packages/desktop-client/src/components/reports/ReportTableHeader.tsx
index cf5377f0c90..20503097de4 100644
--- a/packages/desktop-client/src/components/reports/ReportTableHeader.tsx
+++ b/packages/desktop-client/src/components/reports/ReportTableHeader.tsx
@@ -1,18 +1,16 @@
 import React, { type UIEventHandler } from 'react';
 import { type RefProp } from 'react-spring';
 
-import * as d from 'date-fns';
-
 import { styles, theme } from '../../style';
 import View from '../common/View';
 import { Row, Cell } from '../table';
 
-import { type Month } from './entities';
+import { type GroupedEntity } from './entities';
 
 type ReportTableHeaderProps = {
   scrollWidth?: number;
   groupBy: string;
-  interval?: Month[];
+  interval?: GroupedEntity[];
   balanceType: string;
   headerScrollRef: RefProp<HTMLDivElement>;
   handleScroll: UIEventHandler<HTMLDivElement>;
@@ -29,11 +27,7 @@ function ReportTableHeader({
   return (
     <Row
       collapsed={true}
-      innerRef={headerScrollRef}
       style={{
-        overflowX: 'auto',
-        scrollbarWidth: 'none',
-        '::-webkit-scrollbar': { display: 'none' },
         justifyContent: 'center',
         borderTopWidth: 1,
         borderColor: theme.tableBorder,
@@ -47,68 +41,74 @@ function ReportTableHeader({
         }}
         value={groupBy}
       />
+      {interval ? (
+        <View
+          innerRef={headerScrollRef}
+          onScroll={handleScroll}
+          id={'header'}
+          style={{
+            overflowX: 'auto',
+            scrollbarWidth: 'none',
+            '::-webkit-scrollbar': { display: 'none' },
+            flexDirection: 'row',
+            flex: 1,
+            flexShrink: 1,
+          }}
+        >
+          {interval.map((header, index) => {
+            return (
+              <Cell
+                style={{
+                  minWidth: 85,
+                  ...styles.tnum,
+                }}
+                key={index}
+                value={header.date}
+                width="flex"
+              />
+            );
+          })}
+        </View>
+      ) : (
+        <Cell width="flex" />
+      )}
       <View
-        innerRef={headerScrollRef}
-        onScroll={handleScroll}
-        id={'header'}
         style={{
-          overflowX: 'auto',
-          scrollbarWidth: 'none',
-          '::-webkit-scrollbar': { display: 'none' },
           flexDirection: 'row',
-          flex: 1,
+          flexShrink: 0,
         }}
       >
-        {interval
-          ? interval.map((header, index) => {
-              return (
-                <Cell
-                  style={{
-                    minWidth: 85,
-                    ...styles.tnum,
-                  }}
-                  key={index}
-                  // eslint-disable-next-line rulesdir/typography
-                  value={d.format(d.parseISO(`${header}-01`), "MMM ''yy")}
-                  width="flex"
-                />
-              );
-            })
-          : balanceType === 'Net' && (
-              <>
-                <Cell
-                  style={{
-                    minWidth: 85,
-                    ...styles.tnum,
-                  }}
-                  value={'Deposits'}
-                  width="flex"
-                />
-                <Cell
-                  style={{
-                    minWidth: 85,
-                    ...styles.tnum,
-                  }}
-                  value={'Payments'}
-                  width="flex"
-                />
-              </>
-            )}
+        {balanceType === 'Net' && (
+          <>
+            <Cell
+              style={{
+                width: 85,
+                ...styles.tnum,
+              }}
+              value={'Deposits'}
+            />
+            <Cell
+              style={{
+                width: 85,
+                ...styles.tnum,
+              }}
+              value={'Payments'}
+            />
+          </>
+        )}
         <Cell
           style={{
-            minWidth: 85,
+            width: 85,
             ...styles.tnum,
           }}
           value={'Totals'}
-          width="flex"
         />
         <Cell
           style={{
-            minWidth: 85,
+            width: 85,
             ...styles.tnum,
           }}
           value={'Average'}
-          width="flex"
         />
         {scrollWidth > 0 && <Cell width={scrollWidth} />}
       </View>
diff --git a/packages/desktop-client/src/components/reports/ReportTableInner.tsx b/packages/desktop-client/src/components/reports/ReportTableInner.tsx
index 4297e2a15ca..fb2454e53ca 100644
--- a/packages/desktop-client/src/components/reports/ReportTableInner.tsx
+++ b/packages/desktop-client/src/components/reports/ReportTableInner.tsx
@@ -2,25 +2,21 @@ import React from 'react';
 
 import { type CSSProperties, theme } from '../../style';
 import View from '../common/View';
-import { Row } from '../table';
+import { Cell, Row } from '../table';
 
 import { type GroupedEntity } from './entities';
 
 type ReportTableInnerProps = {
   data: GroupedEntity[];
-  balanceTypeOp?: string;
-  mode: string;
-  monthsCount: number;
-  showEmpty: boolean;
+  mode?: string;
+  monthsCount?: number;
   groupBy: string;
   renderItem;
 };
 
 function ReportTableInner({
   data,
-  showEmpty,
   monthsCount,
-  balanceTypeOp,
   mode,
   groupBy,
   renderItem,
@@ -29,17 +25,16 @@ function ReportTableInner({
 
   type RenderRowProps = {
     key: string;
-    row;
     index: number;
     parent_index?: number;
     style?: CSSProperties;
   };
-  function RenderRow({ row, index, parent_index, style, key }: RenderRowProps) {
+  function RenderRow({ index, parent_index, style, key }: RenderRowProps) {
     let item;
-    if (row.categories) {
-      item = data[index];
-    } else {
+    if (parent_index != null) {
       item = data[parent_index].categories[index];
+    } else {
+      item = data[index];
     }
 
     const rendered_row = renderItem({
@@ -58,47 +53,41 @@ function ReportTableInner({
     <View>
       {data.map((item, index) => {
         return (
-          <>
-            <RenderRow
-              key={item.id}
-              row={item}
-              index={index}
-              style={
-                item.categories && {
-                  color: theme.tableRowHeaderText,
-                  backgroundColor: theme.tableRowHeaderBackground,
-                  fontWeight: 600,
-                }
-              }
-            />
-            {item.categories && (
+          <View>
+            {data ? (
               <>
-                <View>
-                  {item.categories
-                    .filter(i =>
-                      !showEmpty
-                        ? balanceTypeOp === 'totalTotals'
-                          ? i.totalAssets !== 0 ||
-                            i.totalDebts !== 0 ||
-                            i.totalTotals !== 0
-                          : i[balanceTypeOp] !== 0
-                        : true,
-                    )
-                    .map((category, i) => {
-                      return (
-                        <RenderRow
-                          key={category.id}
-                          row={category}
-                          index={i}
-                          parent_index={index}
-                        />
-                      );
-                    })}
-                </View>
-                <Row height={20} />
+                <RenderRow
+                  key={item.id}
+                  index={index}
+                  style={
+                    item.categories && {
+                      color: theme.tableRowHeaderText,
+                      backgroundColor: theme.tableRowHeaderBackground,
+                      fontWeight: 600,
+                    }
+                  }
+                />
+                {item.categories && (
+                  <>
+                    <View>
+                      {item.categories.map((category, i) => {
+                        return (
+                          <RenderRow
+                            key={category.id}
+                            index={i}
+                            parent_index={index}
+                          />
+                        );
+                      })}
+                    </View>
+                    <Row height={20} />
+                  </>
+                )}
               </>
+            ) : (
+              <Cell width="flex" />
             )}
-          </>
+          </View>
         );
       })}
     </View>
diff --git a/packages/desktop-client/src/components/reports/ReportTableRow.tsx b/packages/desktop-client/src/components/reports/ReportTableRow.tsx
index ba91ee2775b..942a92db25f 100644
--- a/packages/desktop-client/src/components/reports/ReportTableRow.tsx
+++ b/packages/desktop-client/src/components/reports/ReportTableRow.tsx
@@ -1,10 +1,6 @@
 import React, { memo } from 'react';
 
-import {
-  amountToCurrency,
-  amountToInteger,
-  integerToCurrency,
-} from 'loot-core/src/shared/util';
+import { amountToCurrency } from 'loot-core/src/shared/util';
 
 import { styles, theme } from '../../style';
 import { Row, Cell } from '../table';
@@ -16,20 +12,11 @@ type ReportTableRowProps = {
   balanceTypeOp?: string;
   groupByItem: string;
   mode: string;
-  monthsCount: number;
   style?: object;
 };
 
 const ReportTableRow = memo(
-  ({
-    item,
-    balanceTypeOp,
-    groupByItem,
-    mode,
-    monthsCount,
-    style,
-  }: ReportTableRowProps) => {
-    const average = amountToInteger(item[balanceTypeOp]) / monthsCount;
+  ({ item, balanceTypeOp, groupByItem, mode, style }: ReportTableRowProps) => {
     return (
       <Row
         key={item[groupByItem]}
@@ -40,81 +27,26 @@ const ReportTableRow = memo(
           ...style,
         }}
       >
-        {item.monthData && mode === 'time'
-          ? item.monthData.map(month => {
-              return (
-                <Cell
-                  style={{
-                    minWidth: 85,
-                    ...styles.tnum,
-                  }}
-                  key={amountToCurrency(month[balanceTypeOp])}
-                  value={amountToCurrency(month[balanceTypeOp])}
-                  title={
-                    Math.abs(month[balanceTypeOp]) > 100000 &&
-                    amountToCurrency(month[balanceTypeOp])
-                  }
-                  width="flex"
-                  privacyFilter
-                />
-              );
-            })
-          : balanceTypeOp === 'totalTotals' && (
-              <>
-                <Cell
-                  value={amountToCurrency(item.totalAssets)}
-                  title={
-                    Math.abs(item.totalAssets) > 100000 &&
-                    amountToCurrency(item.totalAssets)
-                  }
-                  width="flex"
-                  style={{
-                    minWidth: 85,
-                    ...styles.tnum,
-                  }}
-                />
-                <Cell
-                  value={amountToCurrency(item.totalDebts)}
-                  title={
-                    Math.abs(item.totalDebts) > 100000 &&
-                    amountToCurrency(item.totalDebts)
-                  }
-                  width="flex"
-                  style={{
-                    minWidth: 85,
-                    ...styles.tnum,
-                  }}
-                />
-              </>
-            )}
-        <Cell
-          value={amountToCurrency(item[balanceTypeOp])}
-          title={
-            Math.abs(item[balanceTypeOp]) > 100000 &&
-            amountToCurrency(item[balanceTypeOp])
-          }
-          style={{
-            fontWeight: 600,
-            minWidth: 85,
-            ...styles.tnum,
-          }}
-          width="flex"
-          privacyFilter
-        />
-        <Cell
-          value={integerToCurrency(Math.round(average))}
-          title={
-            Math.abs(Math.round(average / 100)) > 100000 &&
-            integerToCurrency(Math.round(average))
-          }
-          style={{
-            fontWeight: 600,
-            minWidth: 85,
-            ...styles.tnum,
-          }}
-          width="flex"
-          privacyFilter
-        />
+        {item.monthData &&
+          mode === 'time' &&
+          item.monthData.map(month => {
+            return (
+              <Cell
+                style={{
+                  minWidth: 85,
+                  ...styles.tnum,
+                }}
+                key={amountToCurrency(month[balanceTypeOp])}
+                value={amountToCurrency(month[balanceTypeOp])}
+                title={
+                  Math.abs(month[balanceTypeOp]) > 100000 &&
+                  amountToCurrency(month[balanceTypeOp])
+                }
+                width="flex"
+                privacyFilter
+              />
+            );
+          })}
       </Row>
     );
   },
diff --git a/packages/desktop-client/src/components/reports/ReportTableTotals.tsx b/packages/desktop-client/src/components/reports/ReportTableTotals.tsx
index e82cccfbfac..cac42a1b3da 100644
--- a/packages/desktop-client/src/components/reports/ReportTableTotals.tsx
+++ b/packages/desktop-client/src/components/reports/ReportTableTotals.tsx
@@ -81,91 +81,114 @@ function ReportTableTotals({
           />
         )}
       </View>
+      {mode === 'time' ? (
+        <View
+          innerRef={totalScrollRef}
+          onScroll={handleScroll}
+          id={'total'}
+          style={{
+            overflowX: 'auto',
+            flexDirection: 'row',
+            flex: 1,
+          }}
+        >
+          {data.monthData.map(item => {
+            return (
+              <Cell
+                style={{
+                  minWidth: 85,
+                  ...styles.tnum,
+                }}
+                key={amountToCurrency(item[balanceTypeOp])}
+                value={amountToCurrency(item[balanceTypeOp])}
+                title={
+                  Math.abs(item[balanceTypeOp]) > 100000 &&
+                  amountToCurrency(item[balanceTypeOp])
+                }
+                width="flex"
+                privacyFilter
+              />
+            );
+          })}
+        </View>
+      ) : (
+        <Cell width="flex" />
+      )}
       <View
-        innerRef={totalScrollRef}
-        onScroll={handleScroll}
-        id={'total'}
         style={{
-          overflowX: 'auto',
-          flexDirection: 'row',
-          flex: 1,
+          flexShrink: 0,
+          ...styles.tnum,
         }}
       >
-        {mode === 'time'
-          ? data.monthData.map(item => {
-              return (
-                <Cell
-                  style={{
-                    minWidth: 85,
-                    ...styles.tnum,
-                  }}
-                  key={amountToCurrency(item[balanceTypeOp])}
-                  value={amountToCurrency(item[balanceTypeOp])}
-                  title={
-                    Math.abs(item[balanceTypeOp]) > 100000 &&
-                    amountToCurrency(item[balanceTypeOp])
-                  }
-                  width="flex"
-                  privacyFilter
-                />
-              );
-            })
-          : balanceTypeOp === 'totalTotals' && (
-              <>
-                <Cell
-                  style={{
-                    minWidth: 85,
-                    ...styles.tnum,
-                  }}
-                  value={amountToCurrency(data.totalAssets)}
-                  title={
-                    Math.abs(data.totalAssets) > 100000 &&
-                    amountToCurrency(data.totalAssets)
-                  }
-                  width="flex"
-                />
-                <Cell
-                  style={{
-                    minWidth: 85,
-                    ...styles.tnum,
-                  }}
-                  value={amountToCurrency(data.totalDebts)}
-                  title={
-                    Math.abs(data.totalDebts) > 100000 &&
-                    amountToCurrency(data.totalDebts)
-                  }
-                  width="flex"
-                />
-              </>
-            )}
-        <Cell
+        <View
           style={{
-            minWidth: 85,
-            ...styles.tnum,
-          }}
-          value={amountToCurrency(data[balanceTypeOp])}
-          title={
-            Math.abs(data[balanceTypeOp]) > 100000 &&
-            amountToCurrency(data[balanceTypeOp])
-          }
-          width="flex"
-          privacyFilter
-        />
-        <Cell
-          style={{
-            minWidth: 85,
-            ...styles.tnum,
+            flexDirection: 'row',
+            height: 32,
           }}
-          value={integerToCurrency(Math.round(average))}
-          title={
-            Math.abs(Math.round(average / 100)) > 100000 &&
-            integerToCurrency(Math.round(average))
-          }
-          width="flex"
-          privacyFilter
-        />
+        >
+          {balanceTypeOp === 'totalTotals' && (
+            <>
+              <Cell
+                style={{
+                  width: 85,
+                  ...styles.tnum,
+                }}
+                value={amountToCurrency(data.totalAssets)}
+                title={
+                  Math.abs(data.totalAssets) > 100000 &&
+                  amountToCurrency(data.totalAssets)
+                }
+              />
+              <Cell
+                style={{
+                  width: 85,
+                  ...styles.tnum,
+                }}
+                value={amountToCurrency(data.totalDebts)}
+                title={
+                  Math.abs(data.totalDebts) > 100000 &&
+                  amountToCurrency(data.totalDebts)
+                }
+              />
+            </>
+          )}
+          <Cell
+            style={{
+              width: 85,
+              ...styles.tnum,
+            }}
+            value={amountToCurrency(data[balanceTypeOp])}
+            title={
+              Math.abs(data[balanceTypeOp]) > 100000 &&
+              amountToCurrency(data[balanceTypeOp])
+            }
+            privacyFilter
+          />
+          <Cell
+            style={{
+              width: 85,
+              ...styles.tnum,
+            }}
+            value={integerToCurrency(Math.round(average))}
+            title={
+              Math.abs(Math.round(average / 100)) > 100000 &&
+              integerToCurrency(Math.round(average))
+            }
+            privacyFilter
+          />
 
-        {scrollWidth > 0 && <Cell width={scrollWidth} />}
+          {scrollWidth > 0 && <Cell width={scrollWidth} />}
+        </View>
+        {scrollWidthTotals > 0 && (
+          <Cell
+            style={{
+              height: scrollWidthTotals,
+              color: theme.tableText,
+              backgroundColor: theme.tableBackground,
+              border: 'none',
+            }}
+          />
+        )}
       </View>
     </Row>
   );
diff --git a/packages/desktop-client/src/components/reports/TableRowIndex.tsx b/packages/desktop-client/src/components/reports/TableRowIndex.tsx
deleted file mode 100644
index 333f5ed36cb..00000000000
--- a/packages/desktop-client/src/components/reports/TableRowIndex.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from 'react';
-
-import { type CSSProperties, styles, theme } from '../../style';
-import { Row, Cell } from '../table';
-
-import { type GroupedEntity } from './entities';
-
-type TableRowIndexProps = {
-  item?: GroupedEntity;
-  groupByItem?: string;
-  style?: CSSProperties;
-};
-
-const TableRowIndex = ({ item, groupByItem, style }: TableRowIndexProps) => {
-  return (
-    <Row
-      collapsed={true}
-      style={{
-        color: theme.tableText,
-        backgroundColor: theme.tableBackground,
-        ...style,
-      }}
-    >
-      {item ? (
-        <Cell
-          value={item[groupByItem]}
-          width="flex"
-          title={item[groupByItem].length > 12 && item[groupByItem]}
-          style={{
-            minWidth: 125,
-            ...styles.tnum,
-          }}
-        />
-      ) : (
-        <Cell />
-      )}
-    </Row>
-  );
-};
-
-export default TableRowIndex;
diff --git a/packages/desktop-client/src/components/reports/spreadsheets/default-spreadsheet.tsx b/packages/desktop-client/src/components/reports/spreadsheets/default-spreadsheet.tsx
index 4d17270d4c5..23fcf52c931 100644
--- a/packages/desktop-client/src/components/reports/spreadsheets/default-spreadsheet.tsx
+++ b/packages/desktop-client/src/components/reports/spreadsheets/default-spreadsheet.tsx
@@ -170,9 +170,7 @@ export default function createSpreadsheet({
 
     setData({
       data: calcData.filter(i => (!showEmpty ? i[balanceTypeOp] !== 0 : true)),
-      monthData: monthData.filter(i =>
-        !showEmpty ? i[balanceTypeOp] !== 0 : true,
-      ),
+      monthData,
       startDate,
       endDate,
       totalDebts: integerToAmount(totalDebts),
diff --git a/packages/desktop-client/src/components/reports/spreadsheets/grouped-spreadsheet.ts b/packages/desktop-client/src/components/reports/spreadsheets/grouped-spreadsheet.ts
index c0199b5a79c..49e7bd82e53 100644
--- a/packages/desktop-client/src/components/reports/spreadsheets/grouped-spreadsheet.ts
+++ b/packages/desktop-client/src/components/reports/spreadsheets/grouped-spreadsheet.ts
@@ -134,7 +134,9 @@ function createGroupedSpreadsheet({
           totalDebts: integerToAmount(totalDebts),
           totalTotals: integerToAmount(totalAssets + totalDebts),
           monthData,
-          categories: stackedCategories,
+          categories: stackedCategories.filter(i =>
+            !showEmpty ? i[balanceTypeOp] !== 0 : true,
+          ),
         };
       },
       [startDate, endDate],