Custom Reports: fix table rendering

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 function Block(props: BlockProps) {

packages/desktop-client/src/components/reports/ChooseGraph.tsx

@@ -12,7 +12,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';
 
@@ -42,6 +41,12 @@ export function ChooseGraph({
   viewLabels,
 }: 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);
@@ -128,16 +133,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}

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 = [

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;

packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTable.tsx

@@ -1,29 +1,42 @@
 // @ts-strict-ignore
 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: 'totalDebts' | 'totalTotals' | 'totalAssets';
+  data: GroupedEntity[];
+  mode: string;
+  monthsCount: number;
 };
 
 export function ReportTable({
   saveScrollWidth,
   listScrollRef,
-  style,
-  children,
   handleScroll,
+  style,
+  groupBy,
+  balanceTypeOp,
+  data,
+  mode,
+  monthsCount,
 }: ReportTableProps) {
   const contentRef = useRef<HTMLDivElement>(null);
 
@@ -33,25 +46,56 @@ export 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}
     >
-      <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>
   );
 }

packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableHeader.tsx

@@ -5,15 +5,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>;
 };
 
 export function ReportTableHeader({