Conditionally show/hide columns

src/CONST/index.ts

@@ -1275,6 +1275,7 @@ const CONST = {
                 RECEIPT: 'receipt',
                 DATE: 'date',
                 MERCHANT: 'merchant',
+                DESCRIPTION: 'description',
                 FROM: 'from',
                 TO: 'to',
                 CATEGORY: 'category',
@@ -6451,6 +6452,9 @@ const CONST = {
             UNAPPROVED_CASH: 'unapprovedCash',
             UNAPPROVED_CARD: 'unapprovedCard',
         },
+        ANIMATION: {
+            FADE_DURATION: 200,
+        },
     },
 
     EXPENSE: {

src/components/MoneyRequestReportView/MoneyRequestReportTableHeader.tsx

@@ -13,25 +13,6 @@ type ColumnConfig = {
     isColumnSortable?: boolean;
 };
 
-const shouldShowColumnConfig: Record<SortableColumnName, (isIOUReport: boolean) => boolean> = {
-    [CONST.SEARCH.TABLE_COLUMNS.RECEIPT]: () => true,
-    [CONST.SEARCH.TABLE_COLUMNS.TYPE]: () => true,
-    [CONST.SEARCH.TABLE_COLUMNS.DATE]: () => true,
-    [CONST.SEARCH.TABLE_COLUMNS.MERCHANT]: () => true,
-    [CONST.SEARCH.TABLE_COLUMNS.CATEGORY]: (isIOUReport) => !isIOUReport,
-    [CONST.SEARCH.TABLE_COLUMNS.TAG]: (isIOUReport) => !isIOUReport,
-    [CONST.REPORT.TRANSACTION_LIST.COLUMNS.COMMENTS]: () => true,
-    [CONST.SEARCH.TABLE_COLUMNS.TOTAL_AMOUNT]: () => true,
-    [CONST.SEARCH.TABLE_COLUMNS.IN]: () => false,
-    [CONST.SEARCH.TABLE_COLUMNS.FROM]: () => false,
-    [CONST.SEARCH.TABLE_COLUMNS.TO]: () => false,
-    [CONST.SEARCH.TABLE_COLUMNS.DESCRIPTION]: () => false,
-    [CONST.SEARCH.TABLE_COLUMNS.TAX_AMOUNT]: () => false,
-    [CONST.SEARCH.TABLE_COLUMNS.ACTION]: () => false,
-    [CONST.SEARCH.TABLE_COLUMNS.TITLE]: () => false,
-    [CONST.SEARCH.TABLE_COLUMNS.ASSIGNEE]: () => false,
-};
-
 const columnConfig: ColumnConfig[] = [
     {
         columnName: CONST.SEARCH.TABLE_COLUMNS.RECEIPT,
@@ -51,6 +32,10 @@ const columnConfig: ColumnConfig[] = [
         columnName: CONST.SEARCH.TABLE_COLUMNS.MERCHANT,
         translationKey: 'common.merchant',
     },
+    {
+        columnName: CONST.SEARCH.TABLE_COLUMNS.DESCRIPTION,
+        translationKey: 'common.description',
+    },
     {
         columnName: CONST.SEARCH.TABLE_COLUMNS.CATEGORY,
         translationKey: 'common.category',
@@ -78,22 +63,19 @@ type SearchTableHeaderProps = {
     amountColumnSize: TableColumnSize;
     taxAmountColumnSize: TableColumnSize;
     shouldShowSorting: boolean;
-    isIOUReport: boolean;
+    columns: SortableColumnName[];
 };
 
-function MoneyRequestReportTableHeader({sortBy, sortOrder, onSortPress, dateColumnSize, shouldShowSorting, isIOUReport, amountColumnSize, taxAmountColumnSize}: SearchTableHeaderProps) {
+function MoneyRequestReportTableHeader({sortBy, sortOrder, onSortPress, dateColumnSize, shouldShowSorting, amountColumnSize, taxAmountColumnSize, columns}: SearchTableHeaderProps) {
     const styles = useThemeStyles();
 
     const shouldShowColumn = useCallback(
         (columnName: SortableColumnName) => {
-            const shouldShowFun = shouldShowColumnConfig[columnName];
-            if (!shouldShowFun) {
-                return false;
-            }
-            return shouldShowFun(isIOUReport);
+            return columns.includes(columnName);
         },
-        [isIOUReport],
+        [columns],
     );
+
     return (
         <View style={[styles.dFlex, styles.flex5]}>
             <SortableTableHeader

src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx

@@ -1,9 +1,11 @@
 import React, {useEffect, useRef} from 'react';
 import type {View} from 'react-native';
+import type {ValueOf} from 'type-fest';
 import {getButtonRole} from '@components/Button/utils';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import {PressableWithFeedback} from '@components/Pressable';
 import type {TableColumnSize} from '@components/Search/types';
+import type {SortableColumnName} from '@components/SelectionList/types';
 import TransactionItemRow from '@components/TransactionItemRow';
 import useAnimatedHighlightStyle from '@hooks/useAnimatedHighlightStyle';
 import useLocalize from '@hooks/useLocalize';
@@ -17,17 +19,6 @@ import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import type {TransactionWithOptionalHighlight} from './MoneyRequestReportTransactionList';
 
-const allReportColumns = [
-    CONST.REPORT.TRANSACTION_LIST.COLUMNS.RECEIPT,
-    CONST.REPORT.TRANSACTION_LIST.COLUMNS.TYPE,
-    CONST.REPORT.TRANSACTION_LIST.COLUMNS.DATE,
-    CONST.REPORT.TRANSACTION_LIST.COLUMNS.MERCHANT,
-    CONST.REPORT.TRANSACTION_LIST.COLUMNS.CATEGORY,
-    CONST.REPORT.TRANSACTION_LIST.COLUMNS.TAG,
-    CONST.REPORT.TRANSACTION_LIST.COLUMNS.COMMENTS,
-    CONST.REPORT.TRANSACTION_LIST.COLUMNS.TOTAL_AMOUNT,
-];
-
 type MoneyRequestReportTransactionItemProps = {
     /** The transaction that is being displayed */
     transaction: TransactionWithOptionalHighlight;
@@ -56,12 +47,16 @@ type MoneyRequestReportTransactionItemProps = {
     /** The size of the tax amount column */
     taxAmountColumnSize: TableColumnSize;
 
+    /** Columns to show */
+    columns: SortableColumnName[];
+
     /** Callback function that scrolls to this transaction in case it is newly added */
     scrollToNewTransaction?: (offset: number) => void;
 };
 
 function MoneyRequestReportTransactionItem({
     transaction,
+    columns,
     isSelectionModeEnabled,
     toggleTransaction,
     isSelected,
@@ -132,7 +127,7 @@ function MoneyRequestReportTransactionItem({
                     shouldUseNarrowLayout={shouldUseNarrowLayout || isMediumScreenWidth}
                     shouldShowCheckbox={!!isSelectionModeEnabled || !isSmallScreenWidth}
                     onCheckboxPress={toggleTransaction}
-                    columns={allReportColumns}
+                    columns={columns as Array<ValueOf<typeof CONST.REPORT.TRANSACTION_LIST.COLUMNS>>}
                     isDisabled={isPendingDelete}
                 />
             </PressableWithFeedback>

src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx

@@ -21,8 +21,8 @@ import {setActiveTransactionIDs} from '@libs/actions/TransactionThreadNavigation
 import {convertToDisplayString} from '@libs/CurrencyUtils';
 import {navigationRef} from '@libs/Navigation/Navigation';
 import {getIOUActionForTransactionID, getOriginalMessage, isMoneyRequestAction} from '@libs/ReportActionsUtils';
-import {generateReportID, getMoneyRequestSpendBreakdown, isIOUReport} from '@libs/ReportUtils';
-import {compareValues, isTransactionAmountTooLong, isTransactionTaxAmountTooLong} from '@libs/SearchUIUtils';
+import {generateReportID, getMoneyRequestSpendBreakdown} from '@libs/ReportUtils';
+import {compareValues, getColumnsToShow, isTransactionAmountTooLong, isTransactionTaxAmountTooLong} from '@libs/SearchUIUtils';
 import {getTransactionPendingAction, isTransactionPendingDelete} from '@libs/TransactionUtils';
 import shouldShowTransactionYear from '@libs/TransactionUtils/shouldShowTransactionYear';
 import Navigation from '@navigation/Navigation';
@@ -164,6 +164,11 @@ function MoneyRequestReportTransactionList({
             }));
     }, [newTransactions, sortBy, sortOrder, transactions, localeCompare]);
 
+    const columnsToShow = useMemo(() => {
+        const columns = getColumnsToShow(transactions, true);
+        return (Object.keys(columns) as SortableColumnName[]).filter((column) => columns[column]);
+    }, [transactions]);
+
     const navigateToTransaction = useCallback(
         (activeTransactionID: string) => {
             const iouAction = getIOUActionForTransactionID(reportActions, activeTransactionID);
@@ -274,6 +279,7 @@ function MoneyRequestReportTransactionList({
                             shouldShowSorting
                             sortBy={sortBy}
                             sortOrder={sortOrder}
+                            columns={columnsToShow}
                             dateColumnSize={dateColumnSize}
                             amountColumnSize={amountColumnSize}
                             taxAmountColumnSize={taxAmountColumnSize}
@@ -284,7 +290,6 @@ function MoneyRequestReportTransactionList({
 
                                 setSortConfig((prevState) => ({...prevState, sortBy: selectedSortBy, sortOrder: selectedSortOrder}));
                             }}
-                            isIOUReport={isIOUReport(report)}
                         />
                     )}
                 </View>
@@ -295,6 +300,7 @@ function MoneyRequestReportTransactionList({
                         <MoneyRequestReportTransactionItem
                             key={transaction.transactionID}
                             transaction={transaction}
+                            columns={columnsToShow}
                             isSelectionModeEnabled={isMobileSelectionModeEnabled}
                             toggleTransaction={toggleTransaction}
                             isSelected={isTransactionSelected(transaction.transactionID)}

src/components/Search/SearchList.tsx

@@ -15,7 +15,14 @@ import type ChatListItem from '@components/SelectionList/ChatListItem';
 import type TaskListItem from '@components/SelectionList/Search/TaskListItem';
 import type TransactionGroupListItem from '@components/SelectionList/Search/TransactionGroupListItem';
 import type TransactionListItem from '@components/SelectionList/Search/TransactionListItem';
-import type {ExtendedTargetedEvent, ReportActionListItemType, TaskListItemType, TransactionGroupListItemType, TransactionListItemType} from '@components/SelectionList/types';
+import type {
+    ExtendedTargetedEvent,
+    ReportActionListItemType,
+    SortableColumnName,
+    TaskListItemType,
+    TransactionGroupListItemType,
+    TransactionListItemType,
+} from '@components/SelectionList/types';
 import Text from '@components/Text';
 import useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager';
 import useInitialWindowDimensions from '@hooks/useInitialWindowDimensions';
@@ -79,6 +86,9 @@ type SearchListProps = Pick<FlashListProps<SearchListItem>, 'onScroll' | 'conten
     /** The search query */
     queryJSON: SearchQueryJSON;
 
+    /** Columns to show */
+    columns: SortableColumnName[];
+
     /** Called when the viewability of rows changes, as defined by the viewabilityConfig prop. */
     onViewableItemsChanged?: (info: {changed: ViewToken[]; viewableItems: ViewToken[]}) => void;
 
@@ -123,6 +133,7 @@ function SearchList(
         shouldPreventDefaultFocusOnSelectRow,
         shouldPreventLongPressRow,
         queryJSON,
+        columns,
         onViewableItemsChanged,
         onLayout,
         estimatedItemSize = ITEM_HEIGHTS.NARROW_WITHOUT_DRAWER.STANDARD,
@@ -332,6 +343,7 @@ function SearchList(
                     }}
                     shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow}
                     queryJSONHash={hash}
+                    columns={columns}
                     policies={policies}
                     isDisabled={isDisabled}
                     allReports={allReports}
@@ -348,6 +360,7 @@ function SearchList(
             onCheckboxPress,
             onSelectRow,
             policies,
+            columns,
             hash,
             groupBy,
             setFocusedIndex,
@@ -445,7 +458,7 @@ function SearchList(
                 onScroll={onScroll}
                 showsVerticalScrollIndicator={false}
                 ref={listRef}
-                extraData={[focusedIndex, isFocused]}
+                extraData={[focusedIndex, isFocused, columns]}
                 onEndReached={onEndReached}
                 onEndReachedThreshold={onEndReachedThreshold}
                 ListFooterComponent={ListFooterComponent}