From baa002e95394a0df71ccf3d82e1d25f5a72ef7ac Mon Sep 17 00:00:00 2001
From: carkom <neilmccreery@yahoo.com>
Date: Mon, 1 Jan 2024 18:56:12 +0000
Subject: [PATCH 1/9] reorg

---
 .../src/components/reports/ChooseGraph.tsx               | 8 ++++----
 .../reports/{ => graphs/tableGraph}/ReportTable.tsx      | 4 ++--
 .../{ => graphs/tableGraph}/ReportTableHeader.tsx        | 9 ++++-----
 .../reports/{ => graphs/tableGraph}/ReportTableList.tsx  | 6 +++---
 .../{ => graphs/tableGraph}/ReportTableTotals.tsx        | 9 ++++-----
 5 files changed, 17 insertions(+), 19 deletions(-)
 rename packages/desktop-client/src/components/reports/{ => graphs/tableGraph}/ReportTable.tsx (92%)
 rename packages/desktop-client/src/components/reports/{ => graphs/tableGraph}/ReportTableHeader.tsx (93%)
 rename packages/desktop-client/src/components/reports/{ => graphs/tableGraph}/ReportTableList.tsx (97%)
 rename packages/desktop-client/src/components/reports/{ => graphs/tableGraph}/ReportTableTotals.tsx (95%)

diff --git a/packages/desktop-client/src/components/reports/ChooseGraph.tsx b/packages/desktop-client/src/components/reports/ChooseGraph.tsx
index 66574f564d7..0987fcf9d41 100644
--- a/packages/desktop-client/src/components/reports/ChooseGraph.tsx
+++ b/packages/desktop-client/src/components/reports/ChooseGraph.tsx
@@ -9,11 +9,11 @@ import BarLineGraph from './graphs/BarLineGraph';
 import DonutGraph from './graphs/DonutGraph';
 import LineGraph from './graphs/LineGraph';
 import StackedBarGraph from './graphs/StackedBarGraph';
+import ReportTable from './graphs/tableGraph/ReportTable';
+import ReportTableHeader from './graphs/tableGraph/ReportTableHeader';
+import ReportTableList from './graphs/tableGraph/ReportTableList';
+import ReportTableTotals from './graphs/tableGraph/ReportTableTotals';
 import { ReportOptions } from './ReportOptions';
-import ReportTable from './ReportTable';
-import ReportTableHeader from './ReportTableHeader';
-import ReportTableList from './ReportTableList';
-import ReportTableTotals from './ReportTableTotals';
 
 type ChooseGraphProps = {
   data: DataEntity;
diff --git a/packages/desktop-client/src/components/reports/ReportTable.tsx b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTable.tsx
similarity index 92%
rename from packages/desktop-client/src/components/reports/ReportTable.tsx
rename to packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTable.tsx
index d2d4e5d209b..5f30b471753 100644
--- a/packages/desktop-client/src/components/reports/ReportTable.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTable.tsx
@@ -6,8 +6,8 @@ import React, {
 } from 'react';
 import { type RefProp } from 'react-spring';
 
-import { type CSSProperties } from '../../style';
-import View from '../common/View';
+import { type CSSProperties } from '../../../../style';
+import View from '../../../common/View';
 
 type ReportTableProps = {
   saveScrollWidth?: (value: number) => void;
diff --git a/packages/desktop-client/src/components/reports/ReportTableHeader.tsx b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableHeader.tsx
similarity index 93%
rename from packages/desktop-client/src/components/reports/ReportTableHeader.tsx
rename to packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableHeader.tsx
index da1e795258a..565f1d7de60 100644
--- a/packages/desktop-client/src/components/reports/ReportTableHeader.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableHeader.tsx
@@ -1,11 +1,10 @@
 import React, { type UIEventHandler } from 'react';
 import { type RefProp } from 'react-spring';
 
-import { styles, theme } from '../../style';
-import View from '../common/View';
-import { Row, Cell } from '../table';
-
-import { type MonthData } from './entities';
+import { styles, theme } from '../../../../style';
+import View from '../../../common/View';
+import { Row, Cell } from '../../../table';
+import { type MonthData } from '../../entities';
 
 type ReportTableHeaderProps = {
   scrollWidth?: number;
diff --git a/packages/desktop-client/src/components/reports/ReportTableList.tsx b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableList.tsx
similarity index 97%
rename from packages/desktop-client/src/components/reports/ReportTableList.tsx
rename to packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableList.tsx
index 40939b0e640..3a332bbd081 100644
--- a/packages/desktop-client/src/components/reports/ReportTableList.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableList.tsx
@@ -6,9 +6,9 @@ import {
   integerToCurrency,
 } from 'loot-core/src/shared/util';
 
-import { type CSSProperties, styles, theme } from '../../style';
-import View from '../common/View';
-import { Row, Cell } from '../table';
+import { type CSSProperties, styles, theme } from '../../../../style';
+import View from '../../../common/View';
+import { Row, Cell } from '../../../table';
 
 type TableRowProps = {
   item: {
diff --git a/packages/desktop-client/src/components/reports/ReportTableTotals.tsx b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableTotals.tsx
similarity index 95%
rename from packages/desktop-client/src/components/reports/ReportTableTotals.tsx
rename to packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableTotals.tsx
index 3fa158a03b9..1b168740c04 100644
--- a/packages/desktop-client/src/components/reports/ReportTableTotals.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableTotals.tsx
@@ -7,11 +7,10 @@ import {
   integerToCurrency,
 } from 'loot-core/src/shared/util';
 
-import { styles, theme } from '../../style';
-import View from '../common/View';
-import { Row, Cell } from '../table';
-
-import { type DataEntity } from './entities';
+import { styles, theme } from '../../../../style';
+import View from '../../../common/View';
+import { Row, Cell } from '../../../table';
+import { type DataEntity } from '../../entities';
 
 type ReportTableTotalsProps = {
   data: DataEntity;

From 4543243e00dc6606c7679fa89da0e001fa95f833 Mon Sep 17 00:00:00 2001
From: carkom <neilmccreery@yahoo.com>
Date: Mon, 1 Jan 2024 19:00:23 +0000
Subject: [PATCH 2/9] notes

---
 upcoming-release-notes/2153.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 upcoming-release-notes/2153.md

diff --git a/upcoming-release-notes/2153.md b/upcoming-release-notes/2153.md
new file mode 100644
index 00000000000..776b7b3cd76
--- /dev/null
+++ b/upcoming-release-notes/2153.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [carkom]
+---
+
+Reorganize tableGraph files for custom reports.

From 4b3e06f997b032ba0cfdc29d288eeefbfcfce69d Mon Sep 17 00:00:00 2001
From: carkom <neilmccreery@yahoo.com>
Date: Tue, 2 Jan 2024 00:31:01 +0000
Subject: [PATCH 3/9] Add render

---
 .../src/components/common/Block.tsx           |   3 +
 .../src/components/reports/ChooseGraph.tsx    |  23 +-
 .../src/components/reports/entities.d.ts      |   8 +-
 .../reports/graphs/tableGraph/ReportTable.tsx |  79 ++++-
 .../graphs/tableGraph/ReportTableHeader.tsx   |   6 +-
 .../graphs/tableGraph/ReportTableList.tsx     | 305 +++++-------------
 .../graphs/tableGraph/ReportTableRow.tsx      | 129 ++++++++
 7 files changed, 291 insertions(+), 262 deletions(-)
 create mode 100644 packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableRow.tsx

diff --git a/packages/desktop-client/src/components/common/Block.tsx b/packages/desktop-client/src/components/common/Block.tsx
index 4a4db9b9686..38b99615043 100644
--- a/packages/desktop-client/src/components/common/Block.tsx
+++ b/packages/desktop-client/src/components/common/Block.tsx
@@ -2,8 +2,11 @@ import { type HTMLProps, type Ref } from 'react';
 
 import { css } from 'glamor';
 
+import { type CSSProperties } from '../../style';
+
 type BlockProps = HTMLProps<HTMLDivElement> & {
   innerRef?: Ref<HTMLDivElement>;
+  style?: CSSProperties;
 };
 
 export default function Block(props: BlockProps) {
diff --git a/packages/desktop-client/src/components/reports/ChooseGraph.tsx b/packages/desktop-client/src/components/reports/ChooseGraph.tsx
index 0987fcf9d41..3434f57d723 100644
--- a/packages/desktop-client/src/components/reports/ChooseGraph.tsx
+++ b/packages/desktop-client/src/components/reports/ChooseGraph.tsx
@@ -11,7 +11,6 @@ import LineGraph from './graphs/LineGraph';
 import StackedBarGraph from './graphs/StackedBarGraph';
 import ReportTable from './graphs/tableGraph/ReportTable';
 import ReportTableHeader from './graphs/tableGraph/ReportTableHeader';
-import ReportTableList from './graphs/tableGraph/ReportTableList';
 import ReportTableTotals from './graphs/tableGraph/ReportTableTotals';
 import { ReportOptions } from './ReportOptions';
 
@@ -39,6 +38,12 @@ function ChooseGraph({
   months,
 }: ChooseGraphProps) {
   const balanceTypeOp = ReportOptions.balanceTypeMap.get(balanceType);
+  const groupByData =
+    groupBy === 'Category'
+      ? 'groupedData'
+      : ['Month', 'Year'].includes(groupBy)
+      ? 'monthData'
+      : 'data';
 
   const saveScrollWidth = value => {
     setScrollWidth(!value ? 0 : value);
@@ -116,16 +121,12 @@ function ChooseGraph({
           saveScrollWidth={saveScrollWidth}
           listScrollRef={listScrollRef}
           handleScroll={handleScroll}
-        >
-          <ReportTableList
-            data={data}
-            empty={showEmpty}
-            monthsCount={months.length}
-            balanceTypeOp={balanceTypeOp}
-            mode={mode}
-            groupBy={groupBy}
-          />
-        </ReportTable>
+          balanceTypeOp={balanceTypeOp}
+          groupBy={groupBy}
+          data={data[groupByData]}
+          mode={mode}
+          monthsCount={months.length}
+        />
         <ReportTableTotals
           totalScrollRef={totalScrollRef}
           handleScroll={handleScroll}
diff --git a/packages/desktop-client/src/components/reports/entities.d.ts b/packages/desktop-client/src/components/reports/entities.d.ts
index db251812ee7..753ec938a36 100644
--- a/packages/desktop-client/src/components/reports/entities.d.ts
+++ b/packages/desktop-client/src/components/reports/entities.d.ts
@@ -1,7 +1,7 @@
 export type DataEntity = {
-  data: Array<ItemEntity>;
-  monthData: Array<MonthData>;
-  groupedData: Array<GroupedEntity>;
+  data: GroupedEntity[];
+  monthData: GroupedEntity[];
+  groupedData: GroupedEntity[];
   legend: LegendEntity[];
   startDate: string;
   endDate: string;
@@ -31,7 +31,7 @@ export type MonthData = {
   totalTotals: number;
 };
 
-type GroupedEntity = {
+export type GroupedEntity = {
   id: string;
   name: string;
   date?: string;
diff --git a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTable.tsx b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTable.tsx
index 5f30b471753..8f91ac9b50d 100644
--- a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTable.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTable.tsx
@@ -1,28 +1,41 @@
 import React, {
-  type UIEventHandler,
+  useCallback,
   useLayoutEffect,
   useRef,
-  type ReactNode,
+  type UIEventHandler,
 } from 'react';
 import { type RefProp } from 'react-spring';
 
 import { type CSSProperties } from '../../../../style';
+import Block from '../../../common/Block';
 import View from '../../../common/View';
+import { type GroupedEntity } from '../../entities';
+
+import { ReportTableList } from './ReportTableList';
+import { ReportTableRow } from './ReportTableRow';
 
 type ReportTableProps = {
-  saveScrollWidth?: (value: number) => void;
-  listScrollRef?: RefProp<HTMLDivElement>;
+  saveScrollWidth: (value: number) => void;
+  listScrollRef: RefProp<HTMLDivElement>;
+  handleScroll: UIEventHandler<HTMLDivElement>;
   style?: CSSProperties;
-  children?: ReactNode;
-  handleScroll?: UIEventHandler<HTMLDivElement>;
+  groupBy: string;
+  balanceTypeOp: string;
+  data: GroupedEntity[];
+  mode: string;
+  monthsCount: number;
 };
 
 export default function ReportTable({
   saveScrollWidth,
   listScrollRef,
-  style,
-  children,
   handleScroll,
+  style,
+  groupBy,
+  balanceTypeOp,
+  data,
+  mode,
+  monthsCount,
 }: ReportTableProps) {
   const contentRef = useRef<HTMLDivElement>(null);
 
@@ -32,25 +45,57 @@ export default function ReportTable({
     }
   });
 
+  const renderItem = useCallback(
+    ({ item, groupByItem, mode, style, key, monthsCount }) => {
+      return (
+        <ReportTableRow
+          key={key}
+          item={item}
+          balanceTypeOp={balanceTypeOp}
+          groupByItem={groupByItem}
+          mode={mode}
+          style={style}
+          monthsCount={monthsCount}
+        />
+      );
+    },
+    [],
+  );
+
   return (
     <View
-      innerRef={listScrollRef}
-      onScroll={handleScroll}
-      id="list"
       style={{
-        overflowY: 'auto',
-        scrollbarWidth: 'none',
-        '::-webkit-scrollbar': { display: 'none' },
         flex: 1,
+        flexDirection: 'row',
         outline: 'none',
         '& .animated .animated-row': { transition: '.25s transform' },
         ...style,
       }}
       tabIndex={1}
+      data-testid="table"
     >
-      <View>
-        <div ref={contentRef}>{children}</div>
-      </View>
+      <Block
+        innerRef={listScrollRef}
+        onScroll={handleScroll}
+        id="list"
+        style={{
+          overflowY: 'auto',
+          scrollbarWidth: 'none',
+          '::-webkit-scrollbar': { display: 'none' },
+          flex: 1,
+          outline: 'none',
+          '& .animated .animated-row': { transition: '.25s transform' },
+          ...style,
+        }}
+      >
+        <ReportTableList
+          data={data}
+          monthsCount={monthsCount}
+          mode={mode}
+          groupBy={groupBy}
+          renderItem={renderItem}
+        />
+      </Block>
     </View>
   );
 }
diff --git a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableHeader.tsx b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableHeader.tsx
index 565f1d7de60..21811b88284 100644
--- a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableHeader.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableHeader.tsx
@@ -4,15 +4,15 @@ import { type RefProp } from 'react-spring';
 import { styles, theme } from '../../../../style';
 import View from '../../../common/View';
 import { Row, Cell } from '../../../table';
-import { type MonthData } from '../../entities';
+import { type GroupedEntity } from '../../entities';
 
 type ReportTableHeaderProps = {
   scrollWidth?: number;
   groupBy: string;
-  interval?: MonthData[];
+  interval?: GroupedEntity[];
   balanceType: string;
   headerScrollRef: RefProp<HTMLDivElement>;
-  handleScroll?: UIEventHandler<HTMLDivElement>;
+  handleScroll: UIEventHandler<HTMLDivElement>;
 };
 
 function ReportTableHeader({
diff --git a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableList.tsx b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableList.tsx
index 3a332bbd081..9e8169d0418 100644
--- a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableList.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableList.tsx
@@ -1,243 +1,94 @@
-import React, { memo } from 'react';
+import React from 'react';
 
-import {
-  amountToCurrency,
-  amountToInteger,
-  integerToCurrency,
-} from 'loot-core/src/shared/util';
-
-import { type CSSProperties, styles, theme } from '../../../../style';
+import { type CSSProperties, theme } from '../../../../style';
 import View from '../../../common/View';
-import { Row, Cell } from '../../../table';
+import { Cell, Row } from '../../../table';
+import { type GroupedEntity } from '../../entities';
 
-type TableRowProps = {
-  item: {
-    date: string;
-    name: string;
-    monthData: [];
-    totalAssets: number;
-    totalDebts: number;
-  };
-  balanceTypeOp?: string;
-  groupByItem: string;
-  mode: string;
-  monthsCount: number;
-  style?: CSSProperties;
+type ReportTableListProps = {
+  data: GroupedEntity[];
+  mode?: string;
+  monthsCount?: number;
+  groupBy: string;
+  renderItem;
 };
 
-const TableRow = memo(
-  ({
-    item,
-    balanceTypeOp,
-    groupByItem,
-    mode,
-    monthsCount,
-    style,
-  }: TableRowProps) => {
-    const average = amountToInteger(item[balanceTypeOp]) / monthsCount;
-    return (
-      <Row
-        key={item[groupByItem]}
-        collapsed={true}
-        style={{
-          color: theme.tableText,
-          backgroundColor: theme.tableBackground,
-          ...style,
-        }}
-      >
-        <Cell
-          value={item[groupByItem]}
-          title={item[groupByItem].length > 12 && item[groupByItem]}
-          style={{
-            width: 120,
-            flexShrink: 0,
-            ...styles.tnum,
-          }}
-        />
-        {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
-        />
-      </Row>
-    );
-  },
-);
-
-function GroupedTableRow({
-  item,
-  balanceTypeOp,
-  groupByItem,
-  mode,
-  monthsCount,
-  empty,
-}) {
-  return (
-    <>
-      <TableRow
-        key={item.id}
-        item={item}
-        balanceTypeOp={balanceTypeOp}
-        groupByItem={groupByItem}
-        mode={mode}
-        monthsCount={monthsCount}
-        style={{
-          color: theme.tableRowHeaderText,
-          backgroundColor: theme.tableRowHeaderBackground,
-          fontWeight: 600,
-        }}
-      />
-      <View>
-        {item.categories
-          .filter(i =>
-            !empty
-              ? balanceTypeOp === 'totalTotals'
-                ? i.totalAssets !== 0 ||
-                  i.totalDebts !== 0 ||
-                  i.totalTotals !== 0
-                : i[balanceTypeOp] !== 0
-              : true,
-          )
-          .map(cat => {
-            return (
-              <TableRow
-                key={cat.id}
-                item={cat}
-                balanceTypeOp={balanceTypeOp}
-                groupByItem={groupByItem}
-                mode={mode}
-                monthsCount={monthsCount}
-              />
-            );
-          })}
-      </View>
-      <Row height={20} />
-    </>
-  );
-}
-
-export default function ReportTableList({
+export function ReportTableList({
   data,
-  empty,
   monthsCount,
-  balanceTypeOp,
   mode,
   groupBy,
-}) {
+  renderItem,
+}: ReportTableListProps) {
   const groupByItem = ['Month', 'Year'].includes(groupBy) ? 'date' : 'name';
-  const groupByData =
-    groupBy === 'Category'
-      ? 'groupedData'
-      : ['Month', 'Year'].includes(groupBy)
-      ? 'monthData'
-      : 'data';
+
+  type RenderRowProps = {
+    key: string;
+    index: number;
+    parent_index?: number;
+    style?: CSSProperties;
+  };
+  function RenderRow({ index, parent_index, style, key }: RenderRowProps) {
+    let item;
+    if (parent_index != null) {
+      item = data[parent_index].categories[index];
+    } else {
+      item = data[index];
+    }
+
+    const rendered_row = renderItem({
+      item,
+      groupByItem,
+      mode,
+      style,
+      key,
+      monthsCount,
+    });
+
+    return rendered_row;
+  }
 
   return (
     <View>
-      {data[groupByData]
-        .filter(i =>
-          !empty
-            ? balanceTypeOp === 'totalTotals'
-              ? i.totalAssets !== 0 || i.totalDebts !== 0 || i.totalTotals !== 0
-              : i[balanceTypeOp] !== 0
-            : true,
-        )
-        .map(item => {
-          if (groupBy === 'Category') {
-            return (
-              <GroupedTableRow
-                key={item.id}
-                item={item}
-                balanceTypeOp={balanceTypeOp}
-                groupByItem={groupByItem}
-                mode={mode}
-                monthsCount={monthsCount}
-                empty={empty}
-              />
-            );
-          } else {
-            return (
-              <TableRow
-                key={item.id}
-                item={item}
-                balanceTypeOp={balanceTypeOp}
-                groupByItem={groupByItem}
-                mode={mode}
-                monthsCount={monthsCount}
-              />
-            );
-          }
-        })}
+      {data.map((item, index) => {
+        return (
+          <View key={item.id}>
+            {data ? (
+              <>
+                <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/graphs/tableGraph/ReportTableRow.tsx b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableRow.tsx
new file mode 100644
index 00000000000..3d5eb7798e9
--- /dev/null
+++ b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableRow.tsx
@@ -0,0 +1,129 @@
+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 ReportTableRowProps = {
+  item: GroupedEntity;
+  balanceTypeOp?: string;
+  groupByItem: string;
+  mode: string;
+  style?: object;
+  monthsCount: number;
+};
+
+export const ReportTableRow = memo(
+  ({
+    item,
+    balanceTypeOp,
+    groupByItem,
+    mode,
+    style,
+    monthsCount,
+  }: ReportTableRowProps) => {
+    const average = amountToInteger(item[balanceTypeOp]) / monthsCount;
+    return (
+      <Row
+        key={item[groupByItem]}
+        collapsed={true}
+        style={{
+          color: theme.tableText,
+          backgroundColor: theme.tableBackground,
+          ...style,
+        }}
+      >
+        <Cell
+          value={item[groupByItem]}
+          title={item[groupByItem].length > 12 && item[groupByItem]}
+          style={{
+            width: 120,
+            flexShrink: 0,
+            ...styles.tnum,
+          }}
+        />
+        {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
+        />
+      </Row>
+    );
+  },
+);

From 55979c05aec9b827ff159a375231d7caacd37d0c Mon Sep 17 00:00:00 2001
From: carkom <neilmccreery@yahoo.com>
Date: Fri, 5 Jan 2024 10:16:23 +0000
Subject: [PATCH 4/9] privacy Filter additions

---
 .../src/components/reports/graphs/tableGraph/ReportTableRow.tsx | 2 ++
 .../components/reports/graphs/tableGraph/ReportTableTotals.tsx  | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableRow.tsx b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableRow.tsx
index 3d5eb7798e9..3db5ac9fe5a 100644
--- a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableRow.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableRow.tsx
@@ -76,6 +76,7 @@ export const ReportTableRow = memo(
                     amountToCurrency(item.totalAssets)
                   }
                   width="flex"
+                  privacyFilter
                   style={{
                     minWidth: 85,
                     ...styles.tnum,
@@ -88,6 +89,7 @@ export const ReportTableRow = memo(
                     amountToCurrency(item.totalDebts)
                   }
                   width="flex"
+                  privacyFilter
                   style={{
                     minWidth: 85,
                     ...styles.tnum,
diff --git a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableTotals.tsx b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableTotals.tsx
index 1b168740c04..1cb42ad8627 100644
--- a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableTotals.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableTotals.tsx
@@ -109,6 +109,7 @@ function ReportTableTotals({
                     amountToCurrency(data.totalAssets)
                   }
                   width="flex"
+                  privacyFilter
                 />
                 <Cell
                   style={{
@@ -121,6 +122,7 @@ function ReportTableTotals({
                     amountToCurrency(data.totalDebts)
                   }
                   width="flex"
+                  privacyFilter
                 />
               </>
             )}

From 3e050893619cc08811028fbef6c421ab7aca733f Mon Sep 17 00:00:00 2001
From: carkom <neilmccreery@yahoo.com>
Date: Sun, 7 Jan 2024 22:42:25 +0000
Subject: [PATCH 5/9] merge fixes

---
 .../src/components/reports/ChooseGraph.tsx    |  23 ++--
 .../reports/graphs/tableGraph/ReportTable.tsx |   6 +-
 .../graphs/tableGraph/ReportTableList.tsx     |   2 +-
 .../graphs/tableGraph/ReportTableRow.tsx      | 117 ------------------
 4 files changed, 16 insertions(+), 132 deletions(-)

diff --git a/packages/desktop-client/src/components/reports/ChooseGraph.tsx b/packages/desktop-client/src/components/reports/ChooseGraph.tsx
index c1da3e8b8a5..40ceae91244 100644
--- a/packages/desktop-client/src/components/reports/ChooseGraph.tsx
+++ b/packages/desktop-client/src/components/reports/ChooseGraph.tsx
@@ -11,7 +11,6 @@ import { LineGraph } from './graphs/LineGraph';
 import { StackedBarGraph } from './graphs/StackedBarGraph';
 import { ReportTable } from './graphs/tableGraph/ReportTable';
 import { ReportTableHeader } from './graphs/tableGraph/ReportTableHeader';
-import { ReportTableList } from './graphs/tableGraph/ReportTableList';
 import { ReportTableTotals } from './graphs/tableGraph/ReportTableTotals';
 import { ReportOptions } from './ReportOptions';
 
@@ -39,6 +38,12 @@ export function ChooseGraph({
   months,
 }: ChooseGraphProps) {
   const balanceTypeOp = ReportOptions.balanceTypeMap.get(balanceType);
+  const groupByData =
+    groupBy === 'Category'
+      ? 'groupedData'
+      : ['Month', 'Year'].includes(groupBy)
+      ? 'monthData'
+      : 'data';
 
   const saveScrollWidth = value => {
     setScrollWidth(!value ? 0 : value);
@@ -116,16 +121,12 @@ export function ChooseGraph({
           saveScrollWidth={saveScrollWidth}
           listScrollRef={listScrollRef}
           handleScroll={handleScroll}
-        >
-          <ReportTableList
-            data={data}
-            empty={showEmpty}
-            monthsCount={months.length}
-            balanceTypeOp={balanceTypeOp}
-            mode={mode}
-            groupBy={groupBy}
-          />
-        </ReportTable>
+          balanceTypeOp={balanceTypeOp}
+          groupBy={groupBy}
+          data={data[groupByData]}
+          mode={mode}
+          monthsCount={months.length}
+        />
         <ReportTableTotals
           totalScrollRef={totalScrollRef}
           handleScroll={handleScroll}
diff --git a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTable.tsx b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTable.tsx
index 8f91ac9b50d..de506aa87ff 100644
--- a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTable.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTable.tsx
@@ -7,8 +7,8 @@ import React, {
 import { type RefProp } from 'react-spring';
 
 import { type CSSProperties } from '../../../../style';
-import Block from '../../../common/Block';
-import View from '../../../common/View';
+import { Block } from '../../../common/Block';
+import { View } from '../../../common/View';
 import { type GroupedEntity } from '../../entities';
 
 import { ReportTableList } from './ReportTableList';
@@ -26,7 +26,7 @@ type ReportTableProps = {
   monthsCount: number;
 };
 
-export default function ReportTable({
+export function ReportTable({
   saveScrollWidth,
   listScrollRef,
   handleScroll,
diff --git a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableList.tsx b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableList.tsx
index 9e8169d0418..08b42cd976e 100644
--- a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableList.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableList.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { type CSSProperties, theme } from '../../../../style';
-import View from '../../../common/View';
+import { View } from '../../../common/View';
 import { Cell, Row } from '../../../table';
 import { type GroupedEntity } from '../../entities';
 
diff --git a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableRow.tsx b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableRow.tsx
index b02d6653bcf..3db5ac9fe5a 100644
--- a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableRow.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableRow.tsx
@@ -6,15 +6,9 @@ import {
   integerToCurrency,
 } from 'loot-core/src/shared/util';
 
-<<<<<<<< HEAD:packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableRow.tsx
 import { styles, theme } from '../../../../style';
 import { Row, Cell } from '../../../table';
 import { type GroupedEntity } from '../../entities';
-========
-import { type CSSProperties, styles, theme } from '../../../../style';
-import { View } from '../../../common/View';
-import { Row, Cell } from '../../../table';
->>>>>>>> upstream/master:packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableList.tsx
 
 type ReportTableRowProps = {
   item: GroupedEntity;
@@ -135,114 +129,3 @@ export const ReportTableRow = memo(
     );
   },
 );
-<<<<<<<< HEAD:packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableRow.tsx
-========
-
-function GroupedTableRow({
-  item,
-  balanceTypeOp,
-  groupByItem,
-  mode,
-  monthsCount,
-  empty,
-}) {
-  return (
-    <>
-      <TableRow
-        key={item.id}
-        item={item}
-        balanceTypeOp={balanceTypeOp}
-        groupByItem={groupByItem}
-        mode={mode}
-        monthsCount={monthsCount}
-        style={{
-          color: theme.tableRowHeaderText,
-          backgroundColor: theme.tableRowHeaderBackground,
-          fontWeight: 600,
-        }}
-      />
-      <View>
-        {item.categories
-          .filter(i =>
-            !empty
-              ? balanceTypeOp === 'totalTotals'
-                ? i.totalAssets !== 0 ||
-                  i.totalDebts !== 0 ||
-                  i.totalTotals !== 0
-                : i[balanceTypeOp] !== 0
-              : true,
-          )
-          .map(cat => {
-            return (
-              <TableRow
-                key={cat.id}
-                item={cat}
-                balanceTypeOp={balanceTypeOp}
-                groupByItem={groupByItem}
-                mode={mode}
-                monthsCount={monthsCount}
-              />
-            );
-          })}
-      </View>
-      <Row height={20} />
-    </>
-  );
-}
-
-export function ReportTableList({
-  data,
-  empty,
-  monthsCount,
-  balanceTypeOp,
-  mode,
-  groupBy,
-}) {
-  const groupByItem = ['Month', 'Year'].includes(groupBy) ? 'date' : 'name';
-  const groupByData =
-    groupBy === 'Category'
-      ? 'groupedData'
-      : ['Month', 'Year'].includes(groupBy)
-      ? 'monthData'
-      : 'data';
-
-  return (
-    <View>
-      {data[groupByData]
-        .filter(i =>
-          !empty
-            ? balanceTypeOp === 'totalTotals'
-              ? i.totalAssets !== 0 || i.totalDebts !== 0 || i.totalTotals !== 0
-              : i[balanceTypeOp] !== 0
-            : true,
-        )
-        .map(item => {
-          if (groupBy === 'Category') {
-            return (
-              <GroupedTableRow
-                key={item.id}
-                item={item}
-                balanceTypeOp={balanceTypeOp}
-                groupByItem={groupByItem}
-                mode={mode}
-                monthsCount={monthsCount}
-                empty={empty}
-              />
-            );
-          } else {
-            return (
-              <TableRow
-                key={item.id}
-                item={item}
-                balanceTypeOp={balanceTypeOp}
-                groupByItem={groupByItem}
-                mode={mode}
-                monthsCount={monthsCount}
-              />
-            );
-          }
-        })}
-    </View>
-  );
-}
->>>>>>>> upstream/master:packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableList.tsx

From ad4851aacd6b53fbddaab7b092183206038e56cc Mon Sep 17 00:00:00 2001
From: carkom <neilmccreery@yahoo.com>
Date: Sun, 7 Jan 2024 22:44:49 +0000
Subject: [PATCH 6/9] notes

---
 upcoming-release-notes/2192.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 upcoming-release-notes/2192.md

diff --git a/upcoming-release-notes/2192.md b/upcoming-release-notes/2192.md
new file mode 100644
index 00000000000..ff341b26d62
--- /dev/null
+++ b/upcoming-release-notes/2192.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [carkom]
+---
+
+Fix table graph rendering issue for custom reports.

From e07985acd98bd7a71814448f44ea7d012211ca38 Mon Sep 17 00:00:00 2001
From: carkom <neilmccreery@yahoo.com>
Date: Mon, 15 Jan 2024 21:16:03 +0000
Subject: [PATCH 7/9] merge fixes

---
 .../reports/graphs/tableGraph/ReportTableList.tsx      |  3 +--
 .../reports/graphs/tableGraph/ReportTableRow.tsx       | 10 +++++-----
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableList.tsx b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableList.tsx
index 09b8a5575a4..a8bdd771e27 100644
--- a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableList.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableList.tsx
@@ -1,6 +1,5 @@
-
 // @ts-strict-ignore
-import React, { memo } from 'react';
+import React from 'react';
 
 import { type CSSProperties, theme } from '../../../../style';
 import { View } from '../../../common/View';
diff --git a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableRow.tsx b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableRow.tsx
index 3db5ac9fe5a..20aa7639076 100644
--- a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableRow.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableRow.tsx
@@ -1,3 +1,4 @@
+// @ts-strict-ignore
 import React, { memo } from 'react';
 
 import {
@@ -6,7 +7,7 @@ import {
   integerToCurrency,
 } from 'loot-core/src/shared/util';
 
-import { styles, theme } from '../../../../style';
+import { type CSSProperties, styles, theme } from '../../../../style';
 import { Row, Cell } from '../../../table';
 import { type GroupedEntity } from '../../entities';
 
@@ -15,7 +16,7 @@ type ReportTableRowProps = {
   balanceTypeOp?: string;
   groupByItem: string;
   mode: string;
-  style?: object;
+  style?: CSSProperties;
   monthsCount: number;
 };
 
@@ -28,10 +29,9 @@ export const ReportTableRow = memo(
     style,
     monthsCount,
   }: ReportTableRowProps) => {
-    const average = amountToInteger(item[balanceTypeOp]) / monthsCount;
+    const average: number = amountToInteger(item[balanceTypeOp]) / monthsCount;
     return (
       <Row
-        key={item[groupByItem]}
         collapsed={true}
         style={{
           color: theme.tableText,
@@ -52,11 +52,11 @@ export const ReportTableRow = memo(
           ? item.monthData.map(month => {
               return (
                 <Cell
+                  key={amountToCurrency(month[balanceTypeOp])}
                   style={{
                     minWidth: 85,
                     ...styles.tnum,
                   }}
-                  key={amountToCurrency(month[balanceTypeOp])}
                   value={amountToCurrency(month[balanceTypeOp])}
                   title={
                     Math.abs(month[balanceTypeOp]) > 100000 &&

From 267f03d209cb8cfd3cc250e3998f6b6832c66c3a Mon Sep 17 00:00:00 2001
From: Matiss Janis Aboltins <matiss@mja.lv>
Date: Tue, 16 Jan 2024 18:41:04 +0000
Subject: [PATCH 8/9] Apply patches for strict mode

---
 .../src/components/reports/ReportOptions.ts   |  6 ++--
 .../reports/graphs/tableGraph/ReportTable.tsx |  2 +-
 .../graphs/tableGraph/ReportTableRow.tsx      | 34 +++++++++++--------
 3 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/packages/desktop-client/src/components/reports/ReportOptions.ts b/packages/desktop-client/src/components/reports/ReportOptions.ts
index 0d4c6f6a4a5..f32dbe5e1fe 100644
--- a/packages/desktop-client/src/components/reports/ReportOptions.ts
+++ b/packages/desktop-client/src/components/reports/ReportOptions.ts
@@ -7,9 +7,9 @@ import {
 } from 'loot-core/src/types/models';
 
 const balanceTypeOptions = [
-  { description: 'Payment', format: 'totalDebts' },
-  { description: 'Deposit', format: 'totalAssets' },
-  { description: 'Net', format: 'totalTotals' },
+  { description: 'Payment', format: 'totalDebts' as const },
+  { description: 'Deposit', format: 'totalAssets' as const },
+  { description: 'Net', format: 'totalTotals' as const },
 ];
 
 const groupByOptions = [
diff --git a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTable.tsx b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTable.tsx
index 1a6db296ce8..07af080255d 100644
--- a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTable.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTable.tsx
@@ -21,7 +21,7 @@ type ReportTableProps = {
   handleScroll: UIEventHandler<HTMLDivElement>;
   style?: CSSProperties;
   groupBy: string;
-  balanceTypeOp: string;
+  balanceTypeOp: 'totalDebts' | 'totalTotals' | 'totalAssets';
   data: GroupedEntity[];
   mode: string;
   monthsCount: number;
diff --git a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableRow.tsx b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableRow.tsx
index 20aa7639076..63c275a6e29 100644
--- a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableRow.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableRow.tsx
@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import React, { memo } from 'react';
 
 import {
@@ -13,8 +12,8 @@ import { type GroupedEntity } from '../../entities';
 
 type ReportTableRowProps = {
   item: GroupedEntity;
-  balanceTypeOp?: string;
-  groupByItem: string;
+  balanceTypeOp: 'totalAssets' | 'totalDebts' | 'totalTotals';
+  groupByItem: 'id' | 'name';
   mode: string;
   style?: CSSProperties;
   monthsCount: number;
@@ -29,7 +28,7 @@ export const ReportTableRow = memo(
     style,
     monthsCount,
   }: ReportTableRowProps) => {
-    const average: number = amountToInteger(item[balanceTypeOp]) / monthsCount;
+    const average = amountToInteger(item[balanceTypeOp]) / monthsCount;
     return (
       <Row
         collapsed={true}
@@ -41,7 +40,7 @@ export const ReportTableRow = memo(
       >
         <Cell
           value={item[groupByItem]}
-          title={item[groupByItem].length > 12 && item[groupByItem]}
+          title={item[groupByItem].length > 12 ? item[groupByItem] : undefined}
           style={{
             width: 120,
             flexShrink: 0,
@@ -59,8 +58,9 @@ export const ReportTableRow = memo(
                   }}
                   value={amountToCurrency(month[balanceTypeOp])}
                   title={
-                    Math.abs(month[balanceTypeOp]) > 100000 &&
-                    amountToCurrency(month[balanceTypeOp])
+                    Math.abs(month[balanceTypeOp]) > 100000
+                      ? amountToCurrency(month[balanceTypeOp])
+                      : undefined
                   }
                   width="flex"
                   privacyFilter
@@ -72,8 +72,9 @@ export const ReportTableRow = memo(
                 <Cell
                   value={amountToCurrency(item.totalAssets)}
                   title={
-                    Math.abs(item.totalAssets) > 100000 &&
-                    amountToCurrency(item.totalAssets)
+                    Math.abs(item.totalAssets) > 100000
+                      ? amountToCurrency(item.totalAssets)
+                      : undefined
                   }
                   width="flex"
                   privacyFilter
@@ -85,8 +86,9 @@ export const ReportTableRow = memo(
                 <Cell
                   value={amountToCurrency(item.totalDebts)}
                   title={
-                    Math.abs(item.totalDebts) > 100000 &&
-                    amountToCurrency(item.totalDebts)
+                    Math.abs(item.totalDebts) > 100000
+                      ? amountToCurrency(item.totalDebts)
+                      : undefined
                   }
                   width="flex"
                   privacyFilter
@@ -100,8 +102,9 @@ export const ReportTableRow = memo(
         <Cell
           value={amountToCurrency(item[balanceTypeOp])}
           title={
-            Math.abs(item[balanceTypeOp]) > 100000 &&
-            amountToCurrency(item[balanceTypeOp])
+            Math.abs(item[balanceTypeOp]) > 100000
+              ? amountToCurrency(item[balanceTypeOp])
+              : undefined
           }
           style={{
             fontWeight: 600,
@@ -114,8 +117,9 @@ export const ReportTableRow = memo(
         <Cell
           value={integerToCurrency(Math.round(average))}
           title={
-            Math.abs(Math.round(average / 100)) > 100000 &&
-            integerToCurrency(Math.round(average))
+            Math.abs(Math.round(average / 100)) > 100000
+              ? integerToCurrency(Math.round(average))
+              : undefined
           }
           style={{
             fontWeight: 600,

From 52628f382862eebabf2178798dcd315620308990 Mon Sep 17 00:00:00 2001
From: carkom <neilmccreery@yahoo.com>
Date: Tue, 16 Jan 2024 19:57:51 +0000
Subject: [PATCH 9/9] review fixes

---
 .../reports/graphs/tableGraph/ReportTable.tsx       |  1 -
 .../reports/graphs/tableGraph/ReportTableList.tsx   | 13 ++++---------
 2 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTable.tsx b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTable.tsx
index 07af080255d..d087bea38ad 100644
--- a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTable.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTable.tsx
@@ -73,7 +73,6 @@ export function ReportTable({
         ...style,
       }}
       tabIndex={1}
-      data-testid="table"
     >
       <Block
         innerRef={listScrollRef}
diff --git a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableList.tsx b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableList.tsx
index a8bdd771e27..8d27ccfeb36 100644
--- a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableList.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableList.tsx
@@ -30,14 +30,11 @@ export function ReportTableList({
     style?: CSSProperties;
   };
   function RenderRow({ index, parent_index, style, key }: RenderRowProps) {
-    let item;
-    if (parent_index != null) {
-      item = data[parent_index].categories[index];
-    } else {
-      item = data[index];
-    }
+    const item = parent_index
+      ? data[parent_index].categories[index]
+      : data[index];
 
-    const rendered_row = renderItem({
+    return renderItem({
       item,
       groupByItem,
       mode,
@@ -45,8 +42,6 @@ export function ReportTableList({
       key,
       monthsCount,
     });
-
-    return rendered_row;
   }
 
   return (