Add draggable columns

src/CONST/index.ts

@@ -6723,6 +6723,7 @@ const CONST = {
                     TAX_AMOUNT: this.TABLE_COLUMNS.TAX_AMOUNT,
                     STATUS: this.TABLE_COLUMNS.STATUS,
                     TITLE: this.TABLE_COLUMNS.TITLE,
+                    AMOUNT: this.TABLE_COLUMNS.TOTAL_AMOUNT,
                     ACTION: this.TABLE_COLUMNS.ACTION,
                 },
                 EXPENSE_REPORT: {
@@ -6739,6 +6740,7 @@ const CONST = {
                     NON_REIMBURSABLE_TOTAL: this.TABLE_COLUMNS.NON_REIMBURSABLE_TOTAL,
                     REPORT_ID: this.TABLE_COLUMNS.REPORT_ID,
                     BASE_62_REPORT_ID: this.TABLE_COLUMNS.BASE_62_REPORT_ID,
+                    AMOUNT: this.TABLE_COLUMNS.TOTAL,
                     ACTION: this.TABLE_COLUMNS.ACTION,
                 },
                 INVOICE: {},
@@ -6757,9 +6759,18 @@ const CONST = {
                     this.TABLE_COLUMNS.TO,
                     this.TABLE_COLUMNS.CATEGORY,
                     this.TABLE_COLUMNS.TAG,
+                    this.TABLE_COLUMNS.TOTAL_AMOUNT,
+                    this.TABLE_COLUMNS.ACTION,
+                ],
+                EXPENSE_REPORT: [
+                    this.TABLE_COLUMNS.DATE,
+                    this.TABLE_COLUMNS.STATUS,
+                    this.TABLE_COLUMNS.TITLE,
+                    this.TABLE_COLUMNS.FROM,
+                    this.TABLE_COLUMNS.TO,
+                    this.TABLE_COLUMNS.TOTAL,
                     this.TABLE_COLUMNS.ACTION,
                 ],
-                EXPENSE_REPORT: [this.TABLE_COLUMNS.DATE, this.TABLE_COLUMNS.STATUS, this.TABLE_COLUMNS.TITLE, this.TABLE_COLUMNS.FROM, this.TABLE_COLUMNS.TO, this.TABLE_COLUMNS.ACTION],
                 INVOICE: [],
                 TASK: [],
                 TRIP: [],

src/components/DraggableList/SortableItem.tsx

@@ -3,8 +3,8 @@ import {CSS} from '@dnd-kit/utilities';
 import React from 'react';
 import type {SortableItemProps} from './types';
 
-function SortableItem({id, children}: SortableItemProps) {
-    const {attributes, listeners, setNodeRef, transform, transition} = useSortable({id});
+function SortableItem({id, children, disabled = false}: SortableItemProps) {
+    const {attributes, listeners, setNodeRef, transform, transition} = useSortable({id, disabled});
 
     const style = {
         touchAction: 'none',
@@ -19,7 +19,7 @@ function SortableItem({id, children}: SortableItemProps) {
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...attributes}
             // eslint-disable-next-line react/jsx-props-no-spreading
-            {...listeners}
+            {...(disabled ? {} : listeners)}
         >
             {children}
         </div>

src/components/DraggableList/index.tsx

@@ -50,10 +50,13 @@ function DraggableList<T>({
 
     const sortableItems = data.map((item, index) => {
         const key = keyExtractor(item, index);
+        // Check if item has a disabled property for dragging
+        const isDisabled = typeof item === 'object' && item !== null && 'isDragDisabled' in item ? !!(item as {isDragDisabled?: boolean}).isDragDisabled : false;
         return (
             <SortableItem
                 id={key}
                 key={key}
+                disabled={isDisabled}
             >
                 {renderItem({
                     item,

src/components/DraggableList/types.ts

@@ -26,6 +26,8 @@ type DraggableListProps<T> = {
 type SortableItemProps = {
     id: string | number;
     children: React.ReactNode | React.ReactNode[];
+    /** Whether dragging is disabled for this item */
+    disabled?: boolean;
 };
 
 export default DraggableListProps;

src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx

@@ -9,7 +9,7 @@ import MenuItem from '@components/MenuItem';
 import Modal from '@components/Modal';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import {useSearchContext} from '@components/Search/SearchContext';
-import type {SearchColumnType, SortOrder} from '@components/Search/types';
+import type {SortOrder} from '@components/Search/types';
 import Text from '@components/Text';
 import {WideRHPContext} from '@components/WideRHPContextProvider';
 import useCopySelectionHelper from '@hooks/useCopySelectionHelper';
@@ -264,9 +264,9 @@ function MoneyRequestReportTransactionList({
             }));
     }, [newTransactions, sortBy, sortOrder, transactions, localeCompare, report]);
 
+    // Always use default columns for money request report view (don't use user-customized search columns)
     const columnsToShow = useMemo(() => {
-        const columns = getColumnsToShow(currentUserDetails?.accountID, transactions, [], true);
-        return (Object.keys(columns) as SearchColumnType[]).filter((column) => columns[column]);
+        return getColumnsToShow(currentUserDetails?.accountID, transactions, [], true);
     }, [transactions, currentUserDetails?.accountID]);
 
     const currentGroupBy = getReportLayoutGroupBy(reportLayoutGroupBy);

src/components/Search/index.tsx

@@ -848,9 +848,7 @@ function Search({
         if (!searchResults?.data) {
             return [];
         }
-        const columns = getColumnsToShow(accountID, searchResults?.data, visibleColumns, false, searchResults?.search?.type, validGroupBy);
-
-        return (Object.keys(columns) as SearchColumnType[]).filter((col) => columns[col]);
+        return getColumnsToShow(accountID, searchResults?.data, visibleColumns, false, searchResults?.search?.type, validGroupBy);
     }, [accountID, searchResults?.data, searchResults?.search?.type, visibleColumns, validGroupBy]);
 
     const opacity = useSharedValue(1);

src/components/SelectionListWithSections/MultiSelectListItem.tsx

@@ -36,9 +36,10 @@ function MultiSelectListItem<TItem extends ListItem>({
                 onPress={() => onSelectRow(item)}
                 isIndeterminate={item.isIndeterminate}
                 style={[isMultilineSupported ? styles.ml3 : null]}
+                disabled={isDisabled ?? false}
             />
         );
-    }, [isMultilineSupported, isSelected, item, onSelectRow, styles.ml3]);
+    }, [isDisabled, isMultilineSupported, isSelected, item, onSelectRow, styles.ml3]);
 
     return (
         <RadioListItem

src/components/SelectionListWithSections/Search/TransactionGroupListExpanded.tsx

@@ -5,7 +5,6 @@ import Button from '@components/Button';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import {PressableWithFeedback} from '@components/Pressable';
 import ScrollView from '@components/ScrollView';
-import type {SearchColumnType} from '@components/Search/types';
 import SearchTableHeader, {getExpenseHeaders} from '@components/SelectionListWithSections/SearchTableHeader';
 import type {ListItem, TransactionGroupListExpandedProps, TransactionListItemType} from '@components/SelectionListWithSections/types';
 import Text from '@components/Text';
@@ -83,9 +82,7 @@ function TransactionGroupListExpanded<TItem extends ListItem>({
         if (!transactionsSnapshot?.data) {
             return [];
         }
-        const columnsToShow = getColumnsToShow(accountID, transactionsSnapshot?.data, visibleColumns, false, transactionsSnapshot?.search.type);
-
-        return (Object.keys(columnsToShow) as SearchColumnType[]).filter((col) => columnsToShow[col]);
+        return getColumnsToShow(accountID, transactionsSnapshot?.data, visibleColumns, false, transactionsSnapshot?.search.type);
     }, [accountID, columns, isExpenseReportType, transactionsSnapshot?.data, transactionsSnapshot?.search.type, visibleColumns]);
 
     const areAllOptionalColumnsHidden = useMemo(() => {

src/components/SelectionListWithSections/SearchTableHeader.tsx

@@ -422,17 +422,47 @@ function SearchTableHeader({
 
     const columnConfig = useMemo(() => getSearchColumns(type, icons, groupBy, isExpenseReportView), [type, groupBy, icons, isExpenseReportView]);
 
+    const orderedColumnConfig = useMemo(() => {
+        if (!columnConfig) {
+            return null;
+        }
+
+        const configMap = new Map(columnConfig.map((config) => [config.columnName, config]));
+
+        // Users can customize column order via the Search Columns page.
+        // We respect their preferred order by placing user-selected columns first,
+        // then appending any remaining columns (which will be filtered out by shouldShowColumn).
+        const orderedConfig: SearchColumnConfig[] = [];
+        const addedColumns = new Set<SearchColumnType>();
+
+        for (const col of columns) {
+            const config = configMap.get(col);
+            if (config) {
+                orderedConfig.push(config);
+                addedColumns.add(col);
+            }
+        }
+
+        for (const config of columnConfig) {
+            if (!addedColumns.has(config.columnName)) {
+                orderedConfig.push(config);
+            }
+        }
+
+        return orderedConfig;
+    }, [columnConfig, columns]);
+
     if (displayNarrowVersion) {
         return;
     }
 
-    if (!columnConfig) {
+    if (!orderedColumnConfig) {
         return;
     }
 
     return (
         <SortableTableHeader
-            columns={columnConfig}
+            columns={orderedColumnConfig}
             areAllOptionalColumnsHidden={areAllOptionalColumnsHidden}
             shouldShowColumn={shouldShowColumn}
             dateColumnSize={shouldShowYear ? CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE : CONST.SEARCH.TABLE_COLUMN_SIZES.NORMAL}