[Due for payment 2026-05-22] [CFI] Add inline editing for tables on desktop

[dubielzyk-expensify]

For our desktop tables we want to edit inline editing to allow users to quickly edit certain fields. Here's a rough demo followed by more detailed specs underneath:

CleanShot.2026-02-13.at.14.34.42.mp4

Here are some interaction specs:

The cells are:

• 32px tall
• 8px padding left and right
• 8px border radius

Go for the specs written above as the video prototype is just to indicate the general interaction patterns. The editable fields to start with should be:

• Date
• Merchant
• Description
• Category
• Tag (single-level only)
• Amount (not currency, only number)

cc @Expensify/design @trjExpensify @JmillsExpensify

Issue Owner

Current Issue Owner: @ahmedGaber93

[PiyushChandra17]

@dubielzyk-expensify Is this open for external contributors? If so, I'd like to work on this ....

[shawnborton]

I thought "From" wouldn't be editable? Otherwise the rest is looking good to me!

[dubielzyk-expensify]

Oh yeah, I guess I meant to field, but @trjExpensify mentioned we might not be able to do that so maybe we skip the to/from for now.

[melvin-bot]

Auto-assigning issues to engineers is no longer supported. If you think this issue should receive engineering attention, please raise it in #whatsnext.

[melvin-bot]

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

[melvin-bot]

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

[mohammadjafarinejad]

Proposal

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

Add inline editing for tables on desktop.

What is the root cause of that problem?

New feature request.

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

1. Create reusable EditableCell

• EditableCell.tsx - Stateless wrapper handling hover highlights and click-to-edit
• useInlineEditState.ts - Hook for text/number inline editing (manages local state, save/cancel)
• usePopoverEditState.ts - Hook for popover editing (date/category pickers with positioning)

src/components/Table/EditableCell/EditableCell.tsx - Stateless wrapper component

import React from "react";
import type { ReactNode, RefObject } from "react";
import { View } from "react-native";
import PressableWithFeedback from "@components/Pressable/PressableWithFeedback";
import useThemeStyles from "@hooks/useThemeStyles";

type EditableCellProps = {
  children: ReactNode;
  editContent?: ReactNode;
  isEditing: boolean;
  canEdit?: boolean;
  onStartEditing: () => void;
  anchorRef?: RefObject<View | null>;
};

function EditableCell({ children, editContent, isEditing, canEdit = true, onStartEditing, anchorRef }: EditableCellProps) {
  const styles = useThemeStyles();

  if (!canEdit) {
    return children;
  }

  if (isEditing && editContent) {
    return <View style={[styles.flex1]}>{editContent}</View>;
  }

  if (isEditing) {
    return (
      <View ref={anchorRef} style={[styles.flex1, styles.border, styles.borderColorFocus]}>
        {children}
      </View>
    );
  }

  return (
    <PressableWithFeedback accessibilityRole="button" accessibilityLabel="Edit cell" onPress={onStartEditing} style={[styles.flex1]} hoverStyle={[styles.border]}>
      {children}
    </PressableWithFeedback>
  );
}

EditableCell.displayName = "EditableCell";

export default EditableCell;

src/components/Table/EditableCell/useInlineEditState.ts - Hook for text/number editing

import { useCallback, useEffect, useState } from "react";

function useInlineEditState<T>(value: T, onSave?: (value: T) => void) {
  const [isEditing, setIsEditing] = useState(false);
  const [localValue, setLocalValue] = useState(value);

  useEffect(() => {
    setLocalValue(value);
  }, [value]);

  const startEditing = useCallback(() => {
    setIsEditing(true);
  }, []);

  const save = useCallback(() => {
    if (localValue !== value) {
      onSave?.(localValue);
    }
    setIsEditing(false);
  }, [localValue, value, onSave]);

  const cancel = useCallback(() => {
    setLocalValue(value);
    setIsEditing(false);
  }, [value]);

  return { isEditing, localValue, setLocalValue, startEditing, save, cancel };
}

export default useInlineEditState;

src/components/Table/EditableCell/usePopoverEditState.ts - Hook for popover editing

import { useCallback, useRef, useState } from "react";
import type { View } from "react-native";
import { InteractionManager } from "react-native";
import useWindowDimensions from "@hooks/useWindowDimensions";

type PopoverPosition = {
  horizontal: number;
  vertical: number;
};

type UsePopoverEditStateOptions = {
  popoverHeight: number;
  padding?: number;
};

function usePopoverEditState({ popoverHeight, padding = 8 }: UsePopoverEditStateOptions) {
  const { windowHeight } = useWindowDimensions();
  const anchorRef = useRef<View>(null);
  const [isEditing, setIsEditing] = useState(false);
  const [isPopoverVisible, setIsPopoverVisible] = useState(false);
  const [popoverPosition, setPopoverPosition] = useState<PopoverPosition>({ horizontal: 0, vertical: 0 });
  const [isInverted, setIsInverted] = useState(false);

  const openPopover = useCallback(() => {
    anchorRef.current?.measureInWindow((x, y, width, height) => {
      const wouldExceedBottom = y + popoverHeight + padding > windowHeight;
      setIsInverted(wouldExceedBottom);
      setPopoverPosition({
        horizontal: x + width,
        vertical: y + (wouldExceedBottom ? 0 : height + padding),
      });
      setIsPopoverVisible(true);
    });
  }, [windowHeight, popoverHeight, padding]);

  const startEditing = useCallback(() => {
    setIsEditing(true);
    InteractionManager.runAfterInteractions(() => {
      openPopover();
    });
  }, [openPopover]);

  const closePopover = useCallback(() => {
    setIsPopoverVisible(false);
    setIsEditing(false);
  }, []);

  return {
    isEditing,
    anchorRef,
    isPopoverVisible,
    popoverPosition,
    isInverted,
    startEditing,
    closePopover,
  };
}

export default usePopoverEditState;

src/components/Table/EditableCell/index.ts - Exports

export { default as EditableCell } from "./EditableCell";
export { default as useInlineEditState } from "./useInlineEditState";
export { default as usePopoverEditState } from "./usePopoverEditState";

---

2. Update existing DataCell components

DateCell.tsx - Date picker with popover edit

import { setYear } from "date-fns";
import React from "react";
import DatePickerModal from "@components/DatePicker/DatePickerModal";
import { EditableCell, usePopoverEditState } from "@components/Table/EditableCell";
import TextWithTooltip from "@components/TextWithTooltip";
import useThemeStyles from "@hooks/useThemeStyles";
import DateUtils from "@libs/DateUtils";
import CONST from "@src/CONST";

type DateCellProps = {
  date: string;
  showTooltip: boolean;
  isLargeScreenWidth: boolean;
  canEdit?: boolean;
  onSave?: (date: string) => void;
};

function DateCell({ date, showTooltip, isLargeScreenWidth, canEdit, onSave }: DateCellProps) {
  const styles = useThemeStyles();
  const { isEditing, anchorRef, isPopoverVisible, popoverPosition, isInverted, startEditing, closePopover } = usePopoverEditState({
    popoverHeight: CONST.POPOVER_DATE_MAX_HEIGHT,
  });

  const formattedDate = DateUtils.formatWithUTCTimeZone(date, DateUtils.doesDateBelongToAPastYear(date) ? CONST.DATE.MONTH_DAY_YEAR_ABBR_FORMAT : CONST.DATE.MONTH_DAY_ABBR_FORMAT);

  const handleDateSelected = (newDate: string) => {
    onSave?.(newDate);
    closePopover();
  };

  const displayContent = <TextWithTooltip text={formattedDate} shouldShowTooltip={showTooltip} style={[styles.lineHeightLarge, styles.pre, styles.justifyContentCenter, isLargeScreenWidth ? undefined : [styles.textMicro, styles.textSupporting]]} />;

  return (
    <>
      <EditableCell canEdit={canEdit} isEditing={isEditing} onStartEditing={startEditing} anchorRef={anchorRef}>
        {displayContent}
      </EditableCell>

      <DatePickerModal value={date} isVisible={isPopoverVisible} onClose={closePopover} onSelected={handleDateSelected} anchorPosition={popoverPosition} shouldPositionFromTop={!isInverted} minDate={setYear(new Date(), CONST.CALENDAR_PICKER.MIN_YEAR)} maxDate={setYear(new Date(), CONST.CALENDAR_PICKER.MAX_YEAR)} inputID="EditableDateCell" />
    </>
  );
}

export default DateCell;

CategoryCell.tsx - Category picker with popover edit

import React, { useCallback } from "react";
import CategoryPicker from "@components/CategoryPicker";
import PopoverWithMeasuredContent from "@components/PopoverWithMeasuredContent";
import type { ListItem } from "@components/SelectionList/types";
import TextWithIconCell from "@components/SelectionListWithSections/Search/TextWithIconCell";
import { EditableCell, usePopoverEditState } from "@components/Table/EditableCell";
import TextWithTooltip from "@components/TextWithTooltip";
import { useMemoizedLazyExpensifyIcons } from "@hooks/useLazyAsset";
import useResponsiveLayout from "@hooks/useResponsiveLayout";
import useThemeStyles from "@hooks/useThemeStyles";
import { getDecodedCategoryName, isCategoryMissing } from "@libs/CategoryUtils";
import CONST from "@src/CONST";
import type TransactionDataCellProps from "./TransactionDataCellProps";

type CategoryCellProps = TransactionDataCellProps & {
  canEdit?: boolean;
  onSave?: (category: string) => void;
  policyID?: string;
};

const DEFAULT_ANCHOR_ORIGIN = {
  horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
  vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP,
};

const POPOVER_DIMENSIONS = {
  height: 450,
  width: 350,
};

function CategoryCell({ shouldUseNarrowLayout, shouldShowTooltip, transactionItem, canEdit, onSave, policyID }: CategoryCellProps) {
  const icons = useMemoizedLazyExpensifyIcons(["Folder"]);
  const styles = useThemeStyles();
  const { isSmallScreenWidth } = useResponsiveLayout();
  const { isEditing, anchorRef, isPopoverVisible, popoverPosition, isInverted, startEditing, closePopover } = usePopoverEditState({
    popoverHeight: POPOVER_DIMENSIONS.height,
  });

  const categoryForDisplay = isCategoryMissing(transactionItem?.category) ? "" : getDecodedCategoryName(transactionItem?.category ?? "");

  const handleCategorySelected = useCallback(
    (item: ListItem) => {
      if (item.keyForList) {
        onSave?.(String(item.keyForList));
      }
      closePopover();
    },
    [onSave, closePopover],
  );

  const displayContent = shouldUseNarrowLayout ? <TextWithIconCell icon={icons.Folder} showTooltip={shouldShowTooltip} text={categoryForDisplay} textStyle={[styles.textMicro, styles.mnh0]} /> : <TextWithTooltip shouldShowTooltip={shouldShowTooltip} text={categoryForDisplay} style={[styles.optionDisplayName, styles.lineHeightLarge, styles.pre, styles.justifyContentCenter]} />;

  return (
    <>
      <EditableCell canEdit={canEdit && !!policyID} isEditing={isEditing} onStartEditing={startEditing} anchorRef={anchorRef}>
        {displayContent}
      </EditableCell>

      <PopoverWithMeasuredContent
        anchorRef={anchorRef}
        isVisible={isPopoverVisible}
        onClose={closePopover}
        anchorPosition={popoverPosition}
        popoverDimensions={POPOVER_DIMENSIONS}
        innerContainerStyle={isSmallScreenWidth ? styles.w100 : { width: POPOVER_DIMENSIONS.width }}
        anchorAlignment={DEFAULT_ANCHOR_ORIGIN}
        restoreFocusType={CONST.MODAL.RESTORE_FOCUS_TYPE.DELETE}
        shouldSwitchPositionIfOverflow
        shouldEnableNewFocusManagement
        shouldMeasureAnchorPositionFromTop={!isInverted}
        shouldSkipRemeasurement
        shouldDisplayBelowModals
      >
        <CategoryPicker policyID={policyID} selectedCategory={transactionItem?.category ?? ""} onSubmit={handleCategorySelected} />
      </PopoverWithMeasuredContent>
    </>
  );
}

export default CategoryCell;

MerchantCell.tsx - Text input with inline edit (also used for Description)

import React, { useCallback, useMemo } from "react";
import { EditableCell, useInlineEditState } from "@components/Table/EditableCell";
import TextInput from "@components/TextInput";
import TextWithTooltip from "@components/TextWithTooltip";
import useThemeStyles from "@hooks/useThemeStyles";
import Parser from "@libs/Parser";

function MerchantOrDescriptionCell({ merchantOrDescription, shouldShowTooltip, shouldUseNarrowLayout, isDescription, canEdit, onSave }: { merchantOrDescription: string; shouldUseNarrowLayout?: boolean; shouldShowTooltip: boolean; isDescription?: boolean; canEdit?: boolean; onSave?: (newValue: string) => void }) {
  const styles = useThemeStyles();

  const text = useMemo(() => {
    if (!isDescription) {
      return merchantOrDescription;
    }
    return Parser.htmlToText(merchantOrDescription).replaceAll("\n", " ");
  }, [merchantOrDescription, isDescription]);

  const { isEditing, localValue, setLocalValue, startEditing, save } = useInlineEditState(text, onSave);

  const handleBlur = useCallback(() => {
    save();
  }, [save]);

  return (
    <EditableCell canEdit={canEdit} isEditing={isEditing} onStartEditing={startEditing} editContent={<TextInput accessibilityLabel={isDescription ? "Description input" : "Merchant input"} value={localValue} onChangeText={setLocalValue} onBlur={handleBlur} autoFocus touchableInputWrapperStyle={[styles.p1, { height: "32px" }]} containerStyles={[styles.flex1]} />}>
      <TextWithTooltip shouldShowTooltip={shouldShowTooltip} text={text} style={[!shouldUseNarrowLayout ? styles.lineHeightLarge : styles.lh20, styles.pre, styles.justifyContentCenter, styles.flex1]} />
    </EditableCell>
  );
}

export default MerchantOrDescriptionCell;

TotalCell.tsx - Numeric input with inline edit

import React, { useCallback } from "react";
import { EditableCell, useInlineEditState } from "@components/Table/EditableCell";
import TextInput from "@components/TextInput";
import TextWithTooltip from "@components/TextWithTooltip";
import useLocalize from "@hooks/useLocalize";
import useThemeStyles from "@hooks/useThemeStyles";
import { convertToDisplayString } from "@libs/CurrencyUtils";
import { parseFloatAnyLocale, roundToTwoDecimalPlaces } from "@libs/NumberUtils";
import { getTransactionDetails } from "@libs/ReportUtils";
import { getCurrency as getTransactionCurrency, isScanning } from "@libs/TransactionUtils";
import type TransactionDataCellProps from "./TransactionDataCellProps";

type TotalCellProps = TransactionDataCellProps & {
  canEdit?: boolean;
  onSave?: (amount: number) => void;
};

function TotalCell({ shouldShowTooltip, transactionItem, canEdit, onSave }: TotalCellProps) {
  const styles = useThemeStyles();
  const { translate } = useLocalize();
  const currency = getTransactionCurrency(transactionItem);

  const amount = getTransactionDetails(transactionItem)?.amount;
  let amountToDisplay = convertToDisplayString(amount, currency);
  if (isScanning(transactionItem)) {
    amountToDisplay = translate("iou.receiptStatusTitle");
  }

  const editableAmount = Math.abs(amount ?? 0) / 100;

  const handleAmountSave = useCallback(
    (value: string) => {
      const parsedValue = parseFloatAnyLocale(value);
      if (!Number.isNaN(parsedValue)) {
        const normalizedValue = roundToTwoDecimalPlaces(Math.max(0, parsedValue));
        onSave?.(Math.round(normalizedValue * 100));
      }
    },
    [onSave],
  );

  const { isEditing, localValue, setLocalValue, startEditing, save } = useInlineEditState(String(editableAmount), handleAmountSave);

  const handleBlur = useCallback(() => {
    save();
  }, [save]);

  const displayContent = <TextWithTooltip shouldShowTooltip={shouldShowTooltip} text={amountToDisplay} style={[styles.optionDisplayName, styles.justifyContentCenter, styles.flexShrink0]} />;

  if (!canEdit || isScanning(transactionItem)) {
    return displayContent;
  }

  return (
    <EditableCell canEdit={canEdit} isEditing={isEditing} onStartEditing={startEditing} editContent={<TextInput accessibilityLabel="Amount input" autoFocus value={localValue} onChangeText={setLocalValue} onBlur={handleBlur} keyboardType="decimal-pad" containerStyles={[styles.flex1]} />}>
      {displayContent}
    </EditableCell>
  );
}

export default TotalCell;

---

3. Update TransactionItemRow to support inline editing

TransactionItemRow/index.tsx - Add edit callbacks and wire to cells

Add edit callback props to TransactionItemRowProps:

type TransactionItemRowProps = {
  // ... existing props ...

  /** Callbacks for inline cell editing (desktop only) */
  onEditDate?: (newDate: string) => void;
  onEditMerchant?: (newMerchant: string) => void;
  onEditDescription?: (newDescription: string) => void;
  onEditCategory?: (newCategory: string) => void;
  onEditAmount?: (newAmount: number) => void;
};

Compute canInlineEdit based on screen size:

function TransactionItemRow({
  // ... props ...
  onEditDate,
  onEditMerchant,
  onEditDescription,
  onEditCategory,
  onEditAmount,
}: TransactionItemRowProps) {
  // ... existing code ...
  const { isLargeScreenWidth } = useResponsiveLayout();

  const canInlineEdit = isLargeScreenWidth;

  // ... rest of component ...
}

Pass callbacks to cells in column definitions:

[CONST.SEARCH.TABLE_COLUMNS.DATE]: (
    <View
        key={CONST.SEARCH.TABLE_COLUMNS.DATE}
        style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.DATE, isDateColumnWide, false, false)]}
    >
        <DateCell
            canEdit={canInlineEdit}
            date={createdAt}
            onSave={onEditDate}
            showTooltip={shouldShowTooltip}
            isLargeScreenWidth={!shouldUseNarrowLayout}
        />
    </View>
),

[CONST.SEARCH.TABLE_COLUMNS.CATEGORY]: (
    <View
        key={CONST.SEARCH.TABLE_COLUMNS.CATEGORY}
        style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.CATEGORY)]}
    >
        <CategoryCell
            transactionItem={transactionItem}
            shouldShowTooltip={shouldShowTooltip}
            shouldUseNarrowLayout={shouldUseNarrowLayout}
            canEdit={canInlineEdit && !isScanning(transactionItem)}
            onSave={onEditCategory}
            policyID={report?.policyID ?? transactionItem.report?.policyID}
        />
    </View>
),

[CONST.SEARCH.TABLE_COLUMNS.MERCHANT]: (
    <View
        key={CONST.SEARCH.TABLE_COLUMNS.MERCHANT}
        style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.MERCHANT)]}
    >
        {!!merchant && (
            <MerchantOrDescriptionCell
                merchantOrDescription={merchant}
                shouldShowTooltip={shouldShowTooltip}
                shouldUseNarrowLayout={false}
                canEdit={canInlineEdit && !isScanning(transactionItem)}
                onSave={onEditMerchant}
            />
        )}
    </View>
),

[CONST.SEARCH.TABLE_COLUMNS.DESCRIPTION]: (
    <View
        key={CONST.SEARCH.TABLE_COLUMNS.DESCRIPTION}
        style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.DESCRIPTION)]}
    >
        {!!description && (
            <MerchantOrDescriptionCell
                merchantOrDescription={description}
                shouldShowTooltip={shouldShowTooltip}
                shouldUseNarrowLayout={false}
                isDescription
                canEdit={canInlineEdit && !isScanning(transactionItem)}
                onSave={onEditDescription}
            />
        )}
    </View>
),

[CONST.SEARCH.TABLE_COLUMNS.TOTAL_AMOUNT]: (
    <View
        key={CONST.SEARCH.TABLE_COLUMNS.TOTAL_AMOUNT}
        style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.TOTAL_AMOUNT, undefined, isAmountColumnWide)]}
    >
        <TotalCell
            transactionItem={transactionItem}
            shouldShowTooltip={shouldShowTooltip}
            canEdit={canInlineEdit && !isScanning(transactionItem)}
            onSave={onEditAmount}
        />
    </View>
),

---

4. Connect to parent components and actions

Parent components rendering TransactionItemRow (e.g., search results pages) need to:

• Pass edit callback implementations that call existing actions:

  • updateMoneyRequestDate
  • updateMoneyRequestMerchant
  • updateMoneyRequestDescription
  • updateMoneyRequestCategory
  • updateMoneyRequestAmount

• Handle optimistic updates via Onyx.merge() for immediate UI feedback

• Handle validation errors and display appropriate feedback

---

Additional implementation notes

• Tiny styling details (header padding, border radius, etc.) are implementation details that can be fine-tuned in PR review
• Search/results pages need to wire the edit callbacks to actual Onyx actions

Test Branch

What alternative solutions did you explore? (Optional)

None

[puneetlath]

@ahmedGaber93 thoughts on the proposal?

[ahmedGaber93]

@mohammadjafarinejad Thanks for the proposal.

You’ve raised some good points, but the proposal is still not complete enough to move forward and finalize the PR.

The test branch currently covers parts of the UI only, but it does not address several important aspects:

• Calling the related actions and reviewing whether the existing ones will work as expected, or if they require changes (for example, will optimistic updates work correctly with the snapdata_ data?).
• No validation around who has permission to edit an expense.
• All tabs currently allow editing.
• All rows/cells allow editing regardless of the expense status.
• No clear plan for handling input validation, especially for edge cases such as split expense amounts.

Additionally, there are some UI issues that do not match the OP design:

The category picker does not match the intended UI, is not positioned correctly, and is not scrollable.

20260218231836509.mp4

The cell flickers on hover when the border is displayed.

20260218231910920.mp4

In self-DM rows, the category picker is allowed from the report page but not from search.

20260219000440247.mp4

In DM rows, the category cell is clickable and highlighted, but the picker does not open.

20260219000355377.mp4

The date picker opens on the left side of the input instead of the right.

20260219004248740.mp4

The amount input height is larger than the row height, it allows non-numeric characters, the text direction is incorrect.

20260219004100166.mp4

20260219004004341.mp4

Search/results pages need to wire the edit callbacks to actual Onyx actions

Could you clarify what is the response you expect from the BE?

Tiny styling details (header padding, border radius, etc.) are implementation details that can be fine-tuned in PR review

No problem with styling details like border radius or colors for now. However, positioning and flexbox layout should be aligned in the test branch if they affect the overall structure or behavior.