[Due for payment 2025-12-30] [Custom Columns][Release 1] Create Custom Column RHP and Allow For Columns to be Shown/Hidden

[luacmartins]

First, we will start by adding the ability to configure columns using the search syntax (these will use kebab-case): columns:report-id,reimbursable-total,tax-rate

1. Add columns as a new advanced search filter here

2. Create a new route search/columns following this SO

3. Create a new component src/pages/SearchColumns.tsx. This component will:

   1. Render a HeaderWithBackButton component with the Columns title
   2. A Reset columns button that will set the custom columns in the search query string to an empty string (which will default the user to our default column configuration)
   3. Update TableColumns to have nested objects based on the available data types, with each child object containing the available columns for the given type, similar to how the status object is structured
   4. Iterate over TableColumns, rendering a ToggleSettingOptionRow component for each item on the list. By default, the toggle will be ON if the column exists in the columns key of the advanced search filters
   5. Each ToggleSettingOptionRow will update the page state with the item that was toggled, keeping an object of any items that were updated by the user.
   6. Add an event handler to the footer's Save button's onPress event handler. Build the new filter string using the columns, and navigate to the new view.

4. Add the Columns button here so it's accessible in the FiltersBar. We should conditionally show the columns button, depending on if the user is on web or not

5. Pass the column filter values as a param to getColumnsToShow.

6. Create variables that store the default visible columns for type:expense-report

7. Use the variables created above in getColumnsToShow, here and here

Note: in this release, we're only updating the columns for type:expense-report

Parent issue: https://github.com/Expensify/Expensify/issues/566674

[mohammadjafarinejad]

I'd like to work on this if it's open to external contributors. The solution is already defined in the OP.

[JS00001]

This is being worked on this week