[CFI] [$1000] Add custom columns to the report details view

[JS00001]

Coming from: expensify.slack.com/archives/C03U7DCU4/p1768343665411189

We'd like to add support for custom columns in the report details page

---

Updating the design for the report details page layout

Start by removing the 'Report Layout' option from the 'More' menu in the report details RHP
Move the group by category/tag list option to the report details page as a dropdown
Add the 'Columns' button to the top of the report details page as well

---

Adding functionality

When the user clicks Customize columns, we will open the same columns RHP as we do on the search page.

We will refactor SearchColumnsPage.tsx to be a common component (which will take in a list of current columns). When the user saves the changes in the report details column RHP, we will call SetReportDetailsColumns with the new value for the columns

We will support the same columns functionality as the reports page, including dragging to re-order, selecting and un-selecting columns, and horizontal scrolling (when needed) in the report view

---

Storing the users preferences

Unlike custom columns in the reports page, we will store the users report layout preferences (column-wise) on the account level. We return a NVP named reportDetailsColumns that is an array of strings (column Ids). To store the users preferences/update the NVP, we've added a new command:

New API Command Details
Command Name: SetReportDetailsColumns
Params:
string authToken
string columns - The json stringified value of the columns to show. This is an array of column ids (strings)

Issue Owner

Current Issue Owner: @truph01

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @truph01 (External)

[melvin-bot]

Current assignee @trjExpensify is eligible for the NewFeature assigner, not assigning anyone new.

[melvin-bot]

Unable to auto-create job on Upwork. The BZ team member should create it manually for this issue.

[melvin-bot]

Triggered auto assignment to Design team member for new feature review - @dannymcclain (NewFeature)

[mukhrr]

Proposal

Please re-state the problem that we are trying to solve in this issue.

When users view the report details page, they cannot customize which columns are displayed in the expense table, nor can they easily control grouping preferences inline. The "Report Layout" option is buried in the "More" menu as a separate RHP page, and there is no column customization support at all for the report view—it always shows default columns. This prevents users from tailoring the report details view to show the information most relevant to their workflow.

What is the root cause of that problem?

The report details transaction list (MoneyRequestReportTransactionList) currently hardcodes default columns by passing an empty array to getColumnsToShow(), which forces it to always return the default column set.

App/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx

Lines 287 to 300 in 69e4246

	// Always use default columns for money request report view (don't use user-customized search columns)
	const columnsToShow = useMemo(() => {
	return getColumnsToShow(
	currentUserDetails?.accountID,
	transactions,
	[],
	true,
	undefined,
	undefined,
	isIOUReport(report),
	isBillableEnabledOnPolicy(policy),
	hasNonReimbursableTransactions(transactions),
	);
	}, [transactions, currentUserDetails?.accountID, report, policy]);

The "Report Layout" (group by) option only exists as a secondary action in the "More" menu, navigating to a separate RHP page, rather than being an inline control on the report details page itself.

App/src/components/MoneyReportHeader.tsx

Lines 1449 to 1460 in 69e4246

	[CONST.REPORT.SECONDARY_ACTIONS.REPORT_LAYOUT]: {
	text: translate('reportLayout.reportLayout'),
	icon: expensifyIcons.Feed,
	value: CONST.REPORT.SECONDARY_ACTIONS.REPORT_LAYOUT,
	sentryLabel: CONST.SENTRY_LABEL.MORE_MENU.REPORT_LAYOUT,
	onSelected: () => {
	if (!moneyRequestReport) {
	return;
	}
	Navigation.navigate(ROUTES.REPORT_SETTINGS_REPORT_LAYOUT.getRoute(moneyRequestReport.reportID));
	},
	},

The SearchColumnsPage is tightly coupled to the search workflow—it reads from SEARCH_ADVANCED_FILTERS_FORM and saves back to a search query string—so it cannot be reused for report details columns.

App/src/pages/Search/SearchColumnsPage.tsx

Lines 43 to 46 in 69e4246

	const [searchAdvancedFiltersForm] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM, {canBeMissing: true});
	const groupBy = searchAdvancedFiltersForm?.groupBy;
	const queryType = searchAdvancedFiltersForm?.type ?? CONST.SEARCH.DATA_TYPES.EXPENSE;

App/src/pages/Search/SearchColumnsPage.tsx

Lines 187 to 201 in 69e4246

	const applyChanges = () => {
	const updatedAdvancedFilters: Partial<SearchAdvancedFiltersForm> = {
	...searchAdvancedFiltersForm,
	columns: selectedColumnIds,
	};
	const currentQueryJSON = getCurrentSearchQueryJSON();
	const queryString = buildQueryStringFromFilterFormValues(updatedAdvancedFilters, {
	sortBy: currentQueryJSON?.sortBy,
	sortOrder: currentQueryJSON?.sortOrder,
	limit: currentQueryJSON?.limit,
	});
	Navigation.navigate(ROUTES.SEARCH_ROOT.getRoute({query: queryString}), {forceReplace: true});
	};

There is no API command or NVP to persist the user's preferred report details columns—only expensify_groupByOption exists for group-by preference.

App/src/libs/actions/ReportLayout.ts

Lines 12 to 35 in 69e4246

	function setReportLayoutGroupBy(groupBy: ReportLayoutGroupBy, previousValue?: string | null) {
	const optimisticData: Array<OnyxUpdate<typeof ONYXKEYS.NVP_REPORT_LAYOUT_GROUP_BY>> = [
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: ONYXKEYS.NVP_REPORT_LAYOUT_GROUP_BY,
	value: groupBy,
	},
	];
	const failureData: Array<OnyxUpdate<typeof ONYXKEYS.NVP_REPORT_LAYOUT_GROUP_BY>> = [
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: ONYXKEYS.NVP_REPORT_LAYOUT_GROUP_BY,
	value: previousValue ?? null,
	},
	];
	const parameters = {
	name: 'expensify_groupByOption',
	value: groupBy,
	};
	API.write(WRITE_COMMANDS.SET_NAME_VALUE_PAIR, parameters, {optimisticData, failureData});
	}

What changes do you think we should make in order to solve the problem?

1. Add NVP and Onyx key for report details columns preference

Add a new Onyx key NVP_REPORT_DETAILS_COLUMNS to store the user's preferred column list.

App/src/ONYXKEYS.ts

Line 656 in 69e4246

NVP_REPORT_LAYOUT_GROUP_BY: 'nvp_expensify_groupByOption',

--- a/src/ONYXKEYS.ts
+++ b/src/ONYXKEYS.ts
@@ -656,6 +656,9 @@
     NVP_REPORT_LAYOUT_GROUP_BY: 'nvp_expensify_groupByOption',
+
+    /** The user's preferred columns for the report details view */
+    NVP_REPORT_DETAILS_COLUMNS: 'nvp_expensify_reportDetailsColumns',

Also add the type mapping in the OnyxValuesMapping:

--- a/src/ONYXKEYS.ts
+++ b/src/ONYXKEYS.ts
@@ -1432,6 +1432,7 @@
     [ONYXKEYS.NVP_REPORT_LAYOUT_GROUP_BY]: string;
+    [ONYXKEYS.NVP_REPORT_DETAILS_COLUMNS]: string[];

2. Add setReportDetailsColumns action in ReportLayout.ts

Create a new action that calls the SetReportDetailsColumns API command with optimistic/failure data.

App/src/libs/actions/ReportLayout.ts

Lines 1 to 47 in 69e4246

	import Onyx from 'react-native-onyx';
	import type {OnyxUpdate} from 'react-native-onyx';
	import * as API from '@libs/API';
	import {WRITE_COMMANDS} from '@libs/API/types';
	import CONST from '@src/CONST';
	import ONYXKEYS from '@src/ONYXKEYS';
	import type {ReportLayoutGroupBy} from '@src/types/onyx';
	/**
	* Set the user's report layout group-by preference
	*/
	function setReportLayoutGroupBy(groupBy: ReportLayoutGroupBy, previousValue?: string | null) {
	const optimisticData: Array<OnyxUpdate<typeof ONYXKEYS.NVP_REPORT_LAYOUT_GROUP_BY>> = [
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: ONYXKEYS.NVP_REPORT_LAYOUT_GROUP_BY,
	value: groupBy,
	},
	];
	const failureData: Array<OnyxUpdate<typeof ONYXKEYS.NVP_REPORT_LAYOUT_GROUP_BY>> = [
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: ONYXKEYS.NVP_REPORT_LAYOUT_GROUP_BY,
	value: previousValue ?? null,
	},
	];
	const parameters = {
	name: 'expensify_groupByOption',
	value: groupBy,
	};
	API.write(WRITE_COMMANDS.SET_NAME_VALUE_PAIR, parameters, {optimisticData, failureData});
	}
	/**
	* Get the current group-by preference, defaulting to category
	*/
	function getReportLayoutGroupBy(storedValue: string | null | undefined): ReportLayoutGroupBy {
	if (!storedValue) {
	return CONST.REPORT_LAYOUT.GROUP_BY.CATEGORY;
	}
	return storedValue as ReportLayoutGroupBy;
	}
	export {setReportLayoutGroupBy, getReportLayoutGroupBy};

--- a/src/libs/actions/ReportLayout.ts
+++ b/src/libs/actions/ReportLayout.ts
@@ -5,6 +5,7 @@
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {ReportLayoutGroupBy} from '@src/types/onyx';
+import type {SearchCustomColumnIds} from '@components/Search/types';

 ...

+/**
+ * Set the user's preferred columns for the report details view
+ */
+function setReportDetailsColumns(columns: SearchCustomColumnIds[], previousValue?: string[] | null) {
+    const optimisticData: Array<OnyxUpdate<typeof ONYXKEYS.NVP_REPORT_DETAILS_COLUMNS>> = [
+        {
+            onyxMethod: Onyx.METHOD.SET,
+            key: ONYXKEYS.NVP_REPORT_DETAILS_COLUMNS,
+            value: columns,
+        },
+    ];
+
+    const failureData: Array<OnyxUpdate<typeof ONYXKEYS.NVP_REPORT_DETAILS_COLUMNS>> = [
+        {
+            onyxMethod: Onyx.METHOD.SET,
+            key: ONYXKEYS.NVP_REPORT_DETAILS_COLUMNS,
+            value: previousValue ?? null,
+        },
+    ];
+
+    const parameters = {
+        columns: JSON.stringify(columns),
+    };
+
+    API.write(WRITE_COMMANDS.SET_REPORT_DETAILS_COLUMNS, parameters, {optimisticData, failureData});
+}

-export {setReportLayoutGroupBy, getReportLayoutGroupBy};
+export {setReportLayoutGroupBy, getReportLayoutGroupBy, setReportDetailsColumns};

3. Register the new write command

Add SET_REPORT_DETAILS_COLUMNS to WRITE_COMMANDS and its parameter type.

App/src/libs/API/types.ts

Line 198 in 69e4246

SET_NAME_VALUE_PAIR: 'SetNameValuePair',

--- a/src/libs/API/types.ts
+++ b/src/libs/API/types.ts
@@ -198,6 +198,7 @@
     SET_NAME_VALUE_PAIR: 'SetNameValuePair',
+    SET_REPORT_DETAILS_COLUMNS: 'SetReportDetailsColumns',

And add the parameter type mapping:

+    [WRITE_COMMANDS.SET_REPORT_DETAILS_COLUMNS]: {columns: string};

4. Refactor SearchColumnsPage into a reusable ColumnsPage component

Extract the core column selection/reordering UI from SearchColumnsPage into a new shared component that accepts columns and an onSave callback, then have both SearchColumnsPage and ReportDetailsColumnsPage use it.

App/src/pages/Search/SearchColumnsPage.tsx

Lines 37 to 273 in 69e4246

	function SearchColumnsPage() {
	const theme = useTheme();
	const styles = useThemeStyles();
	const icons = useMemoizedLazyExpensifyIcons(['DragHandles']);
	const {translate, localeCompare} = useLocalize();
	const [searchAdvancedFiltersForm] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM, {canBeMissing: true});
	const groupBy = searchAdvancedFiltersForm?.groupBy;
	const queryType = searchAdvancedFiltersForm?.type ?? CONST.SEARCH.DATA_TYPES.EXPENSE;
	const allTypeCustomColumns = getCustomColumns(queryType);
	const allGroupCustomColumns = getCustomColumns(groupBy);
	const defaultGroupCustomColumns = getCustomColumnDefault(groupBy);
	const defaultTypeCustomColumns = getCustomColumnDefault(queryType);
	const allCustomColumns = [...allGroupCustomColumns, ...allTypeCustomColumns];
	const defaultCustomColumns = new Set([...defaultGroupCustomColumns, ...defaultTypeCustomColumns]);
	// We need at least one element with flex1 in the table to ensure the table looks good in the UI, so we don't allow removing the total columns
	// since it makes sense for them to show up in an expense management App and it fixes the layout issues.
	const requiredColumns = new Set<SearchCustomColumnIds>([
	CONST.SEARCH.TABLE_COLUMNS.TOTAL_AMOUNT,
	CONST.SEARCH.TABLE_COLUMNS.TOTAL,
	CONST.SEARCH.TABLE_COLUMNS.GROUP_CARD,
	CONST.SEARCH.TABLE_COLUMNS.GROUP_WITHDRAWAL_ID,
	CONST.SEARCH.TABLE_COLUMNS.GROUP_FROM,
	CONST.SEARCH.TABLE_COLUMNS.GROUP_CATEGORY,
	CONST.SEARCH.TABLE_COLUMNS.GROUP_MERCHANT,
	CONST.SEARCH.TABLE_COLUMNS.GROUP_TAG,
	CONST.SEARCH.TABLE_COLUMNS.GROUP_MONTH,
	CONST.SEARCH.TABLE_COLUMNS.GROUP_WEEK,
	CONST.SEARCH.TABLE_COLUMNS.GROUP_YEAR,
	CONST.SEARCH.TABLE_COLUMNS.GROUP_QUARTER,
	]);
	const sortColumns = (columnsToSort: ColumnItem[]): ColumnItem[] => {
	const selected = columnsToSort.filter((col) => col.isSelected);
	const unselected = columnsToSort
	.filter((col) => !col.isSelected)
	.sort((a, b) => {
	const textA = translate(getSearchColumnTranslationKey(a.value));
	const textB = translate(getSearchColumnTranslationKey(b.value));
	return localeCompare(textA, textB);
	});
	return [...selected, ...unselected];
	};
	const defaultColumns = allCustomColumns.map((columnId) => ({
	columnId,
	isSelected: defaultCustomColumns.has(columnId),
	}));
	const [columns, setColumns] = useState(() => {
	const selectedColumnIds = searchAdvancedFiltersForm?.columns?.filter((columnId) => allCustomColumns.includes(columnId)) ?? [];
	if (!selectedColumnIds.length) {
	return defaultColumns;
	}
	const selected = selectedColumnIds.map((columnId) => ({columnId, isSelected: true}));
	const unselected = allCustomColumns.filter((columnId) => !selectedColumnIds.includes(columnId)).map((columnId) => ({columnId, isSelected: false}));
	return [...selected, ...unselected];
	});
	const selectedColumnIds = columns.filter((col) => col.isSelected).map((col) => col.columnId);
	const allColumnsList = sortColumns(
	columns.map(({columnId, isSelected}) => {
	const isRequired = requiredColumns.has(columnId);
	const isEffectivelySelected = isRequired || isSelected;
	const isDragDisabled = !isEffectivelySelected;
	return {
	text: translate(getSearchColumnTranslationKey(columnId)),
	value: columnId,
	keyForList: columnId,
	isSelected: isEffectivelySelected,
	isDisabled: isRequired,
	isDragDisabled,
	leftElement: (
	<View style={[styles.mr3, isDragDisabled && styles.cursorDisabled]}>
	<Icon
	src={icons.DragHandles}
	fill={theme.icon}
	additionalStyles={isDragDisabled && styles.opacitySemiTransparent}
	/>
	</View>
	),
	};
	}),
	);
	const typeColumnsList = allColumnsList.filter((column) => allTypeCustomColumns.includes(column.keyForList));
	const groupColumnsList = allColumnsList.filter((column) => allGroupCustomColumns.includes(column.keyForList));
	const isDefaultState =
	columns.length === defaultColumns.length &&
	columns.every((col, index) => col.columnId === defaultColumns.at(index)?.columnId && col.isSelected === defaultColumns.at(index)?.isSelected);
	const onSelectItem = (item: ListItem) => {
	const updatedColumnId = item.keyForList as SearchCustomColumnIds;
	if (requiredColumns.has(updatedColumnId)) {
	return;
	}
	setColumns((prevColumns) => {
	const columnToUpdate = prevColumns.find((col) => col.columnId === updatedColumnId);
	if (!columnToUpdate) {
	return prevColumns;
	}
	const newIsSelected = !columnToUpdate.isSelected;
	if (newIsSelected) {
	const selected = prevColumns.filter((col) => col.isSelected);
	const unselected = prevColumns.filter((col) => !col.isSelected && col.columnId !== updatedColumnId);
	const unselectedSorted = unselected.sort((a, b) => {
	const textA = translate(getSearchColumnTranslationKey(a.columnId));
	const textB = translate(getSearchColumnTranslationKey(b.columnId));
	return localeCompare(textA, textB);
	});
	return [...selected, {columnId: updatedColumnId, isSelected: true}, ...unselectedSorted];
	}
	const updatedColumns = prevColumns.map((col) => (col.columnId === updatedColumnId ? {...col, isSelected: false} : col));
	return updatedColumns;
	});
	};
	const onGroupDragEnd = ({data}: {data: typeof allColumnsList}) => {
	const newGroupColumns = data.map((item) => ({columnId: item.value, isSelected: item.isSelected}));
	const existingTypeColumns = typeColumnsList.map((item) => ({columnId: item.value, isSelected: item.isSelected}));
	const newColumns = [...existingTypeColumns, ...newGroupColumns];
	setColumns(newColumns);
	};
	const onTypeDragEnd = ({data}: {data: typeof allColumnsList}) => {
	const newTypeColumns = data.map((item) => ({columnId: item.value, isSelected: item.isSelected}));
	const existingGroupColumns = groupColumnsList.map((item) => ({columnId: item.value, isSelected: item.isSelected}));
	const newColumns = [...existingGroupColumns, ...newTypeColumns];
	setColumns(newColumns);
	};
	const resetColumns = () => {
	setColumns(defaultColumns);
	};
	const applyChanges = () => {
	const updatedAdvancedFilters: Partial<SearchAdvancedFiltersForm> = {
	...searchAdvancedFiltersForm,
	columns: selectedColumnIds,
	};
	const currentQueryJSON = getCurrentSearchQueryJSON();
	const queryString = buildQueryStringFromFilterFormValues(updatedAdvancedFilters, {
	sortBy: currentQueryJSON?.sortBy,
	sortOrder: currentQueryJSON?.sortOrder,
	limit: currentQueryJSON?.limit,
	});
	Navigation.navigate(ROUTES.SEARCH_ROOT.getRoute({query: queryString}), {forceReplace: true});
	};
	const renderItem = ({item}: {item: ListItem}) => {
	return (
	<MultiSelectListItem
	item={item}
	showTooltip={false}
	onSelectRow={onSelectItem}
	isDisabled={item.isDisabled}
	/>
	);
	};
	return (
	<ScreenWrapper
	testID="SearchColumnsPage"
	shouldShowOfflineIndicatorInWideScreen
	offlineIndicatorStyle={styles.mtAuto}
	includeSafeAreaPaddingBottom
	>
	<HeaderWithBackButton title={translate('search.columns')}>
	{!isDefaultState && <TextLink onPress={resetColumns}>{translate('search.resetColumns')}</TextLink>}
	</HeaderWithBackButton>
	<View style={styles.flex1}>
	<ScrollView
	style={styles.flex1}
	contentContainerStyle={styles.flex1}
	>
	{!!groupBy && (
	<>
	<View style={[styles.ph5, styles.pb3]}>
	<Text style={styles.textLabelSupporting}>{translate('search.groupColumns')}</Text>
	</View>
	<DraggableList
	disableScroll
	data={groupColumnsList}
	keyExtractor={(item) => item.value}
	onDragEnd={onGroupDragEnd}
	renderItem={renderItem}
	/>
	<View style={styles.dividerLine} />
	<View style={[styles.ph5, styles.pv3]}>
	<Text style={styles.textLabelSupporting}>{translate('search.expenseColumns')}</Text>
	</View>
	</>
	)}
	<DraggableList
	disableScroll
	data={typeColumnsList}
	keyExtractor={(item) => item.value}
	onDragEnd={onTypeDragEnd}
	renderItem={renderItem}
	/>
	</ScrollView>
	</View>
	<View style={[styles.ph5, styles.pb5]}>
	<Button
	large
	success
	pressOnEnter
	text={translate('common.save')}
	onPress={applyChanges}
	/>
	</View>
	</ScreenWrapper>
	);
	}
	export default SearchColumnsPage;

--- /dev/null
+++ b/src/components/ColumnsPage.tsx
@@ -0,0 +1,... @@
+// Extract the shared column selection UI (DraggableList, MultiSelectListItem,
+// select/deselect, drag-to-reorder, reset) into a reusable component.
+// Props:
+//   - allColumns: SearchCustomColumnIds[] (available columns)
+//   - defaultColumns: SearchCustomColumnIds[] (default selected)
+//   - currentColumns: SearchCustomColumnIds[] (user's current selection)
+//   - requiredColumns: Set<SearchCustomColumnIds> (cannot be deselected)
+//   - onSave: (selectedColumns: SearchCustomColumnIds[]) => void
+//   - groupBy?: string (for showing group vs expense column sections)

Then SearchColumnsPage becomes a thin wrapper:

--- a/src/pages/Search/SearchColumnsPage.tsx
+++ b/src/pages/Search/SearchColumnsPage.tsx
 function SearchColumnsPage() {
-    // ... all the column logic ...
+    // Derive allColumns, defaultColumns, currentColumns from searchAdvancedFiltersForm
+    // Pass to <ColumnsPage onSave={applySearchChanges} ... />
 }

5. Create ReportDetailsColumnsPage as a new RHP screen

Create a thin wrapper that uses the shared ColumnsPage component, reading from NVP_REPORT_DETAILS_COLUMNS and calling setReportDetailsColumns on save.

--- /dev/null
+++ b/src/pages/settings/Report/ReportDetailsColumnsPage.tsx
@@ -0,0 +1,... @@
+function ReportDetailsColumnsPage() {
+    const [reportDetailsColumns] = useOnyx(ONYXKEYS.NVP_REPORT_DETAILS_COLUMNS, {canBeMissing: true});
+    const currentColumns = reportDetailsColumns ?? [];
+    const allColumns = Object.values(CONST.SEARCH.TYPE_CUSTOM_COLUMNS.EXPENSE);
+    const defaultColumns = CONST.SEARCH.TYPE_DEFAULT_COLUMNS.EXPENSE;
+
+    const onSave = (columns: SearchCustomColumnIds[]) => {
+        setReportDetailsColumns(columns, reportDetailsColumns);
+        Navigation.goBack();
+    };
+
+    return <ColumnsPage allColumns={allColumns} defaultColumns={defaultColumns}
+        currentColumns={currentColumns} onSave={onSave} />;
+}

6. Add route, screen registration, and navigation for the new columns RHP

Add a new route REPORT_SETTINGS_COLUMNS in ROUTES.ts and register the screen in the RHP navigator.

App/src/ROUTES.ts

Lines 793 to 796 in 69e4246

	REPORT_SETTINGS_REPORT_LAYOUT: {
	route: 'r/:reportID/settings/report-layout',
	getRoute: (reportID: string) => `r/${reportID}/settings/report-layout` as const,
	},

--- a/src/ROUTES.ts
+++ b/src/ROUTES.ts
@@ -796,6 +796,10 @@
     },
+    REPORT_SETTINGS_COLUMNS: {
+        route: 'r/:reportID/settings/columns',
+        getRoute: (reportID: string) => `r/${reportID}/settings/columns` as const,
+    },

7. Remove "Report Layout" from the "More" menu secondary actions

Remove the REPORT_LAYOUT secondary action from MoneyReportHeader.tsx and ReportSecondaryActionUtils.ts.

App/src/components/MoneyReportHeader.tsx

Lines 1449 to 1460 in 69e4246

	[CONST.REPORT.SECONDARY_ACTIONS.REPORT_LAYOUT]: {
	text: translate('reportLayout.reportLayout'),
	icon: expensifyIcons.Feed,
	value: CONST.REPORT.SECONDARY_ACTIONS.REPORT_LAYOUT,
	sentryLabel: CONST.SENTRY_LABEL.MORE_MENU.REPORT_LAYOUT,
	onSelected: () => {
	if (!moneyRequestReport) {
	return;
	}
	Navigation.navigate(ROUTES.REPORT_SETTINGS_REPORT_LAYOUT.getRoute(moneyRequestReport.reportID));
	},
	},

App/src/libs/ReportSecondaryActionUtils.ts

Lines 777 to 793 in 69e4246

	/**
	* Checks if the report should show the "Report layout" option
	* Only shows for expense reports (not IOU reports) with 2 or more transactions
	*/
	function isReportLayoutAction(report: Report, reportTransactions: Transaction[]): boolean {
	if (!isExpenseReportUtils(report)) {
	return false;
	}
	// Exclude IOU reports - only show for workspace expense reports
	if (isIOUReportUtils(report)) {
	return false;
	}
	// Only show if report has 2 or more transactions
	return reportTransactions.length >= 2;
	}

--- a/src/components/MoneyReportHeader.tsx
+++ b/src/components/MoneyReportHeader.tsx
@@ -1449,12 +1449,0 @@
-        [CONST.REPORT.SECONDARY_ACTIONS.REPORT_LAYOUT]: {
-            text: translate('reportLayout.reportLayout'),
-            icon: expensifyIcons.Feed,
-            value: CONST.REPORT.SECONDARY_ACTIONS.REPORT_LAYOUT,
-            sentryLabel: CONST.SENTRY_LABEL.MORE_MENU.REPORT_LAYOUT,
-            onSelected: () => {
-                if (!moneyRequestReport) {
-                    return;
-                }
-                Navigation.navigate(ROUTES.REPORT_SETTINGS_REPORT_LAYOUT.getRoute(moneyRequestReport.reportID));
-            },
-        },

8. Add "Group by" dropdown and "Columns" button to the report details page

Add inline controls at the top of MoneyRequestReportTransactionList (above the table header) with:

• A "Group by: Category/Tag" dropdown (replacing the removed RHP page)
• A "Columns" button that navigates to the new ReportDetailsColumnsPage RHP
  

  App/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx

  Line 198 in 69e4246

  const shouldShowGroupedTransactions = isExpenseReport(report) && !isIOUReport(report);

--- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx
+++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx
@@ +++ (above the table header, inside the shouldShowGroupedTransactions block)
+{shouldShowGroupedTransactions && (
+    <View style={[styles.flexRow, styles.alignItemsCenter, styles.gap2, styles.mb3]}>
+        <ButtonWithDropdownMenu
+            buttonSize={CONST.DROPDOWN_BUTTON_SIZE.SMALL}
+            options={[
+                {text: translate('reportLayout.groupBy.category'), value: CONST.REPORT_LAYOUT.GROUP_BY.CATEGORY},
+                {text: translate('reportLayout.groupBy.tag'), value: CONST.REPORT_LAYOUT.GROUP_BY.TAG},
+            ]}
+            selectedItemValue={currentGroupBy}
+            onPress={(_, value) => setReportLayoutGroupBy(value, reportLayoutGroupBy)}
+        />
+        <PressableWithFeedback
+            onPress={() => Navigation.navigate(ROUTES.REPORT_SETTINGS_COLUMNS.getRoute(report.reportID))}
+        >
+            <View style={[styles.flexRow, styles.alignItemsCenter, styles.gap1]}>
+                <Icon src={expensifyIcons.Columns} />
+                <Text>{translate('search.columns')}</Text>
+            </View>
+        </PressableWithFeedback>
+    </View>
+)}

9. Use persisted columns in MoneyRequestReportTransactionList

Read the user's column preference from Onyx and pass it to getColumnsToShow() instead of an empty array.

App/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx

Lines 287 to 300 in 69e4246

	// Always use default columns for money request report view (don't use user-customized search columns)
	const columnsToShow = useMemo(() => {
	return getColumnsToShow(
	currentUserDetails?.accountID,
	transactions,
	[],
	true,
	undefined,
	undefined,
	isIOUReport(report),
	isBillableEnabledOnPolicy(policy),
	hasNonReimbursableTransactions(transactions),
	);
	}, [transactions, currentUserDetails?.accountID, report, policy]);

--- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx
+++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx
@@ -196,6 +196,7 @@
     const [reportLayoutGroupBy] = useOnyx(ONYXKEYS.NVP_REPORT_LAYOUT_GROUP_BY, {canBeMissing: true});
+    const [reportDetailsColumns] = useOnyx(ONYXKEYS.NVP_REPORT_DETAILS_COLUMNS, {canBeMissing: true});

@@ -287,8 +288,8 @@
-    // Always use default columns for money request report view (don't use user-customized search columns)
+    // Use user-customized columns if available, otherwise fall back to defaults
     const columnsToShow = useMemo(() => {
         return getColumnsToShow(
             currentUserDetails?.accountID,
             transactions,
-            [],
+            reportDetailsColumns ?? [],
             true,
             undefined,

10. Add horizontal scrolling support for the transaction table

When users enable many columns, the table may overflow the viewport width. To match the Search page behavior, add horizontal scrolling with minimum column widths.

--- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx
+++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx
@@ imports
+// eslint-disable-next-line no-restricted-imports
+import type {NativeScrollEvent, NativeSyntheticEvent, ScrollView as RNScrollView} from 'react-native';
+import ScrollView from '@components/ScrollView';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import {getTableMinWidth} from '@libs/SearchUIUtils';

@@ after columnsToShow useMemo
+    // Horizontal scrolling logic - same as Search page
+    const {windowWidth} = useWindowDimensions();
+    const minTableWidth = getTableMinWidth(columnsToShow);
+    const shouldScrollHorizontally = !shouldUseNarrowLayout && minTableWidth > windowWidth;
+    const horizontalScrollViewRef = useRef<RNScrollView>(null);
+    const [horizontalScrollOffset, setHorizontalScrollOffset] = useState(0);
+
+    const handleHorizontalScroll = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {
+        setHorizontalScrollOffset(event.nativeEvent.contentOffset.x);
+    }, []);
+
+    // Restore horizontal scroll position synchronously before paint
+    useLayoutEffect(() => {
+        if (!shouldScrollHorizontally || horizontalScrollOffset <= 0) {
+            return;
+        }
+        horizontalScrollViewRef.current?.scrollTo({x: horizontalScrollOffset, animated: false});
+    }, [sortedTransactions, shouldScrollHorizontally, horizontalScrollOffset]);

@@ in the return statement, wrap table header and content
+    {shouldScrollHorizontally ? (
+        <ScrollView
+            ref={horizontalScrollViewRef}
+            horizontal
+            showsHorizontalScrollIndicator
+            style={styles.flex1}
+            contentContainerStyle={{width: minTableWidth}}
+            contentOffset={{x: horizontalScrollOffset, y: 0}}
+            onScroll={handleHorizontalScroll}
+            scrollEventThrottle={16}
+        >
+            <View style={[styles.flex1]}>
+                {/* Table header with checkbox and MoneyRequestReportTableHeader */}
+                {/* Transaction list content */}
+            </View>
+        </ScrollView>
+    ) : (
+        {/* Original non-scrolling table content */}
+    )}

This reuses the same getTableMinWidth() function from SearchUIUtils that the Search page uses to calculate minimum table width based on visible columns. When the calculated width exceeds the viewport, the table is wrapped in a horizontal ScrollView that allows users to scroll to see all columns.

What alternative solutions did you explore? (Optional)

Result:

demo_82252.mp4