Add title to expense columns

src/CONST/index.ts

@@ -6697,6 +6697,7 @@ const CONST = {
                     CATEGORY: this.TABLE_COLUMNS.CATEGORY,
                     TAG: this.TABLE_COLUMNS.TAG,
                     STATUS: this.TABLE_COLUMNS.STATUS,
+                    TITLE: this.TABLE_COLUMNS.TITLE,
                     ACTION: this.TABLE_COLUMNS.ACTION,
                 },
                 EXPENSE_REPORT: {

src/components/SelectionListWithSections/SearchTableHeader.tsx

@@ -94,6 +94,11 @@ const getExpenseHeaders = (groupBy?: SearchGroupBy): SearchColumnConfig[] => [
         columnName: CONST.SEARCH.TABLE_COLUMNS.TOTAL_AMOUNT,
         translationKey: groupBy ? 'common.total' : 'iou.amount',
     },
+    {
+        columnName: CONST.SEARCH.TABLE_COLUMNS.TITLE,
+        translationKey: 'common.title',
+        canBeMissing: false,
+    },
     {
         columnName: CONST.SEARCH.TABLE_COLUMNS.STATUS,
         translationKey: 'common.status',

src/components/TransactionItemRow/index.tsx

@@ -10,6 +10,7 @@ import type {SearchColumnType, TableColumnSize} from '@components/Search/types';
 import ActionCell from '@components/SelectionListWithSections/Search/ActionCell';
 import DateCell from '@components/SelectionListWithSections/Search/DateCell';
 import StatusCell from '@components/SelectionListWithSections/Search/StatusCell';
+import TitleCell from '@components/SelectionListWithSections/Search/TitleCell';
 import UserInfoCell from '@components/SelectionListWithSections/Search/UserInfoCell';
 import Text from '@components/Text';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
@@ -423,6 +424,14 @@ function TransactionItemRow({
                     />
                 </View>
             ),
+            [CONST.SEARCH.TABLE_COLUMNS.TITLE]: (
+                <View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.TITLE)]}>
+                    <TitleCell
+                        text={transactionItem.report?.reportName ?? ''}
+                        isLargeScreenWidth={isLargeScreenWidth}
+                    />
+                </View>
+            ),
             [CONST.SEARCH.TABLE_COLUMNS.STATUS]: (
                 <View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.STATUS)]}>
                     <StatusCell
@@ -434,28 +443,29 @@ function TransactionItemRow({
         }),
         [
             StyleUtils,
+            transactionItem,
+            shouldShowTooltip,
+            shouldUseNarrowLayout,
+            isSelected,
+            isDateColumnWide,
+            areAllOptionalColumnsHidden,
             createdAt,
+            isSubmittedColumnWide,
             report?.submitted,
             report?.approved,
-            isActionLoading,
-            isReportItemChild,
-            isDateColumnWide,
-            isSubmittedColumnWide,
+            report?.policyID,
+            report?.total,
             isApprovedColumnWide,
             isPostedColumnWide,
-            isAmountColumnWide,
-            isTaxAmountColumnWide,
-            isInSingleTransactionReport,
-            isSelected,
+            isReportItemChild,
+            onButtonPress,
+            isActionLoading,
             merchant,
             description,
-            onButtonPress,
-            shouldShowTooltip,
-            shouldUseNarrowLayout,
-            transactionItem,
-            report?.policyID,
-            report?.total,
-            areAllOptionalColumnsHidden,
+            isInSingleTransactionReport,
+            isAmountColumnWide,
+            isTaxAmountColumnWide,
+            isLargeScreenWidth,
         ],
     );
     const shouldRenderChatBubbleCell = useMemo(() => {

src/libs/SearchUIUtils.ts

@@ -2022,6 +2022,14 @@ function getSortedTransactionData(
 
     const sortingProperty = transactionColumnNamesToSortingProperty[sortBy];
 
+    if (sortBy === CONST.SEARCH.TABLE_COLUMNS.TITLE) {
+        return data.sort((a, b) => {
+            const aValue = a.report?.reportName ?? '';
+            const bValue = b.report?.reportName ?? '';
+            return compareValues(aValue, bValue, sortOrder, sortBy, localeCompare);
+        });
+    }
+
     if (sortBy === CONST.SEARCH.TABLE_COLUMNS.STATUS) {
         return data.sort((a, b) => {
             const aReport = a.report;
@@ -2713,9 +2721,9 @@ function getColumnsToShow(
               [CONST.SEARCH.TABLE_COLUMNS.TAG]: false,
               [CONST.SEARCH.TABLE_COLUMNS.TAX_AMOUNT]: false,
               [CONST.SEARCH.TABLE_COLUMNS.TOTAL_AMOUNT]: true,
+              [CONST.SEARCH.TABLE_COLUMNS.TITLE]: false,
               [CONST.SEARCH.TABLE_COLUMNS.STATUS]: false,
               [CONST.SEARCH.TABLE_COLUMNS.ACTION]: true,
-              [CONST.SEARCH.TABLE_COLUMNS.TITLE]: true,
           };
 
     const {moneyRequestReportActionsByTransactionID} = Array.isArray(data) ? {} : createReportActionsLookupMaps(data);