Update table pages to scroll full page

src/components/Table/Table.tsx

@@ -1,6 +1,8 @@
 import MenuItem from '@components/MenuItem';
 import Modal from '@components/Modal';
+import useScrollToFocusedInput from '@components/SelectionList/hooks/useScrollToFocusedInput';
 
+import useKeyboardState from '@hooks/useKeyboardState';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useMobileSelectionMode from '@hooks/useMobileSelectionMode';
@@ -12,18 +14,22 @@ import genericMemo from '@libs/genericMemo';
 import CONST from '@src/CONST';
 
 import type {FlashListRef} from '@shopify/flash-list';
+import type {ReactElement} from 'react';
 
 import React, {useImperativeHandle, useRef} from 'react';
 
 import type {TableContextValue} from './TableContext';
 import type {TableData, TableHandle, TableMethods, TableProps} from './types';
 
+import {getTableListMetadata} from './buildTableListData';
 import useFiltering from './middlewares/filtering';
 import useHighlighting from './middlewares/highlight';
 import useSearching from './middlewares/searching';
 import useSelection from './middlewares/selection';
 import useSorting from './middlewares/sorting';
 import TableContext from './TableContext';
+import TableEmptyState from './TableEmptyStates/TableEmptyState';
+import TableNoResultsState from './TableEmptyStates/TableNoResultsState';
 
 /**
  * A composable table component that provides filtering, search, and sorting functionality.
@@ -157,6 +163,8 @@ function Table<DataType extends TableData, ColumnKey extends string = string, Fi
     isItemInSearch,
     initialSortColumn,
     narrowLayoutSortColumn,
+    headerComponent,
+    shouldUseStickyColumnHeader = false,
     children,
     selectionEnabled,
     shouldEnableSelectionInNarrowPaneModal,
@@ -206,6 +214,11 @@ function Table<DataType extends TableData, ColumnKey extends string = string, Fi
 
     const listRef = useRef<FlashListRef<DataType>>(null);
 
+    // Keeps the table search input visible above the keyboard when it is focused inside the
+    // scrolling list (native only; the web variant of the hook is a no-op).
+    const {isKeyboardShown} = useKeyboardState();
+    const {containerRef: listContainerRef, trackScrollOffset, scrollInputIntoView} = useScrollToFocusedInput(listRef, isKeyboardShown);
+
     const tableMethods: TableMethods<ColumnKey, FilterKey> = {
         ...filterMethods,
         ...sortMethods,
@@ -214,6 +227,30 @@ function Table<DataType extends TableData, ColumnKey extends string = string, Fi
         ...highlightingMethods,
     };
 
+    const originalDataLength = data?.length ?? 0;
+    const isEmptyResult = processedData.length === 0 && originalDataLength > 0 && (hasActiveSearchString || hasActiveFilters);
+    const shouldRenderStickyHeader = shouldUseStickyColumnHeader && processedData.length > 0 && !isEmptyResult && !(shouldUseNarrowTableLayout && !title);
+
+    // When the page header scrolls inside the list, TableBody renders the table's empty states as
+    // list rows below the header. They are extracted from the direct children here so they don't
+    // render a second time as siblings of the list.
+    const childrenArray = React.Children.toArray(children);
+    const emptyStateElement = childrenArray.find((child): child is ReactElement => React.isValidElement(child) && child.type === TableEmptyState);
+    const noResultsStateElement = childrenArray.find((child): child is ReactElement => React.isValidElement(child) && child.type === TableNoResultsState);
+
+    const tableListMetadata = getTableListMetadata({
+        headerComponent,
+        listHeaderComponent: listProps.ListHeaderComponent,
+        listEmptyComponent: listProps.ListEmptyComponent,
+        hasEmptyStateContent: !!emptyStateElement,
+        processedData,
+        isEmptyResult,
+        shouldRenderStickyHeader,
+    });
+    const renderedChildren = tableListMetadata.hasPageHeader
+        ? childrenArray.filter((child) => !(React.isValidElement(child) && (child.type === TableEmptyState || child.type === TableNoResultsState)))
+        : children;
+
     /**
      * Exposes table control methods through the ref.
      * Uses a Proxy to also forward FlashList methods (like scrollToIndex).
@@ -229,14 +266,22 @@ function Table<DataType extends TableData, ColumnKey extends string = string, Fi
                     return () => processedData;
                 }
 
+                if (property === 'scrollToIndex') {
+                    const scrollToIndex = listRef.current?.scrollToIndex;
+                    if (tableListMetadata.listDataRowOffset === 0 || !scrollToIndex) {
+                        return scrollToIndex;
+                    }
+
+                    return (params: Parameters<FlashListRef<DataType>['scrollToIndex']>[0]) => {
+                        scrollToIndex({...params, index: params.index + tableListMetadata.listDataRowOffset});
+                    };
+                }
+
                 return listRef.current?.[property as keyof FlashListRef<DataType>];
             },
         }) as TableHandle<DataType, ColumnKey, FilterKey>;
     });
 
-    const originalDataLength = data?.length ?? 0;
-    const isEmptyResult = processedData.length === 0 && originalDataLength > 0 && (hasActiveSearchString || hasActiveFilters);
-
     const handleMobileSelectionPress = () => {
         turnOnMobileSelectionMode();
 
@@ -249,7 +294,13 @@ function Table<DataType extends TableData, ColumnKey extends string = string, Fi
     // eslint-disable-next-line react/jsx-no-constructed-context-values
     const contextValue: TableContextValue<DataType, ColumnKey, FilterKey> = {
         title,
+        headerComponent,
+        emptyStateElement,
+        noResultsStateElement,
         listRef,
+        listContainerRef,
+        trackScrollOffset,
+        scrollInputIntoView,
         listProps,
         processedData,
         originalDataLength,
@@ -261,6 +312,8 @@ function Table<DataType extends TableData, ColumnKey extends string = string, Fi
         tableMethods,
         hasActiveFilters,
         hasSearchString: hasActiveSearchString,
+        shouldRenderStickyHeader,
+        tableListMetadata,
         isEmptyResult,
         shouldUseNarrowTableLayout,
         selectionEnabled,
@@ -271,7 +324,7 @@ function Table<DataType extends TableData, ColumnKey extends string = string, Fi
 
     return (
         <TableContext.Provider value={contextValue as unknown as TableContextValue<TableData, string, string>}>
-            {children}
+            {renderedChildren}
 
             <Modal
                 shouldPreventScrollOnFocus

src/components/Table/TableBody.tsx

@@ -1,8 +1,11 @@
+import Text from '@components/Text';
+
 import useBottomSafeSafeAreaPaddingStyle from '@hooks/useBottomSafeSafeAreaPaddingStyle';
 import useDebouncedAccessibilityAnnouncement from '@hooks/useDebouncedAccessibilityAnnouncement';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 
+import type {ListRenderItemInfo} from '@shopify/flash-list';
 import type {StyleProp, ViewProps, ViewStyle} from 'react-native';
 
 import {FlashList} from '@shopify/flash-list';
@@ -11,7 +14,9 @@ import {StyleSheet, View} from 'react-native';
 
 import type {TableData} from '.';
 
+import {buildTableListData, getAdjustedStickyHeaderIndices, getDataIndex, getSyntheticRowKind} from './buildTableListData';
 import {useTableContext} from './TableContext';
+import TableHeader from './TableHeader';
 
 /**
  * Props for the TableBody component.
@@ -49,21 +54,40 @@ type TableBodyProps = ViewProps & {
  * </Table>
  * ```
  */
-function TableBody<DataType extends TableData>({contentContainerStyle, style, ...props}: TableBodyProps) {
+function TableBody({contentContainerStyle, style, ...props}: TableBodyProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
+    const [isListLoaded, setIsListLoaded] = React.useState(false);
+    const [hasActivatedStickyHeader, setHasActivatedStickyHeader] = React.useState(false);
     const {
         processedData: filteredAndSortedData,
         activeSearchString,
         listProps,
         listRef,
+        listContainerRef,
+        trackScrollOffset,
         shouldUseNarrowTableLayout,
         hasActiveFilters,
         hasSearchString,
+        headerComponent,
+        emptyStateElement,
+        noResultsStateElement,
         isEmptyResult,
         originalDataLength,
-    } = useTableContext<DataType>();
-    const {contentContainerStyle: listContentContainerStyle, ListEmptyComponent, ListHeaderComponent, ...restListProps} = listProps ?? {};
+        tableListMetadata,
+    } = useTableContext<TableData>();
+    const {
+        ListEmptyComponent,
+        ListHeaderComponent,
+        contentContainerStyle: listContentContainerStyle,
+        getItemType,
+        keyExtractor,
+        onLoad,
+        onScroll,
+        renderItem,
+        stickyHeaderIndices,
+        ...restListProps
+    } = listProps ?? {};
 
     const tableBodyContentContainerStyle = useBottomSafeSafeAreaPaddingStyle({
         addBottomSafeAreaPadding: true,
@@ -88,21 +112,118 @@ function TableBody<DataType extends TableData>({contentContainerStyle, style, ..
 
     useDebouncedAccessibilityAnnouncement(message, isEmptyResult, activeSearchString);
 
-    if ((isEmptyResult || !originalDataLength) && !ListEmptyComponent && !ListHeaderComponent) {
+    React.useEffect(() => {
+        if (!tableListMetadata.shouldRenderStickyHeader || !isListLoaded || hasActivatedStickyHeader) {
+            return undefined;
+        }
+
+        const frame = requestAnimationFrame(() => setHasActivatedStickyHeader(true));
+        return () => cancelAnimationFrame(frame);
+    }, [hasActivatedStickyHeader, isListLoaded, tableListMetadata.shouldRenderStickyHeader]);
+
+    // Tables without a scrolling page header keep the default contract: an empty table renders
+    // nothing here so the declarative Table.EmptyState/Table.NoResultsState siblings take over.
+    // With a page header (or a ListEmptyComponent) the list must stay mounted even when empty,
+    // otherwise the header (tabs, buttons, search) or the empty view would disappear with the rows.
+    if (!tableListMetadata.hasPageHeader && (isEmptyResult || !originalDataLength) && !ListEmptyComponent) {
         return null;
     }
 
+    const renderListComponent = (component: typeof ListHeaderComponent | typeof ListEmptyComponent) => {
+        if (!component) {
+            return null;
+        }
+
+        if (React.isValidElement(component)) {
+            return component;
+        }
+
+        return React.createElement(component);
+    };
+
+    const pageHeaderElement = (
+        <>
+            {renderListComponent(ListHeaderComponent)}
+            {headerComponent}
+        </>
+    );
+    const listData = buildTableListData<TableData>(filteredAndSortedData, tableListMetadata);
+    const adjustedStickyHeaderIndices = getAdjustedStickyHeaderIndices(tableListMetadata, stickyHeaderIndices);
+    const canRenderStickyHeader = !tableListMetadata.shouldRenderStickyHeader || (isListLoaded && hasActivatedStickyHeader);
+
+    const handleLoad: NonNullable<typeof onLoad> = (info) => {
+        setIsListLoaded(true);
+        onLoad?.(info);
+    };
+
+    const EmptyResultComponent = (
+        <View style={[styles.ph5, styles.pt3, styles.pb5]}>
+            <Text
+                style={[styles.textNormal, styles.colorMuted]}
+                aria-hidden
+            >
+                {message}
+            </Text>
+        </View>
+    );
+    let listEmptyComponent = ListEmptyComponent;
+    if (tableListMetadata.shouldRenderSyntheticEmptyRow) {
+        listEmptyComponent = undefined;
+    }
+
+    const renderListItem = (info: ListRenderItemInfo<TableData>) => {
+        const rowKind = getSyntheticRowKind(info.index, tableListMetadata);
+
+        switch (rowKind) {
+            case 'pageHeader':
+                return pageHeaderElement;
+            case 'tableHeader':
+                return <TableHeader isStickyListHeader />;
+            case 'emptyResult':
+                return noResultsStateElement ?? EmptyResultComponent;
+            case 'listEmpty':
+                return emptyStateElement ?? renderListComponent(ListEmptyComponent);
+            case 'data':
+            default:
+                return renderItem?.({...info, index: getDataIndex(info.index, tableListMetadata)}) ?? null;
+        }
+    };
+
+    const keyExtractorForList = (item: TableData, index: number) => {
+        const rowKind = getSyntheticRowKind(index, tableListMetadata);
+
+        if (rowKind !== 'data') {
+            return item.keyForList;
+        }
+
+        return keyExtractor?.(item, getDataIndex(index, tableListMetadata)) ?? item.keyForList;
+    };
+
+    const getItemTypeForList = (item: TableData, index: number, extraData: unknown) => {
+        const rowKind = getSyntheticRowKind(index, tableListMetadata);
+
+        if (rowKind !== 'data') {
+            return item.keyForList;
+        }
+
+        return getItemType?.(item, getDataIndex(index, tableListMetadata), extraData);
+    };
+
     return (
         <View
+            ref={listContainerRef}
             style={[styles.flex1, styles.mnh0, style]}
             {...props}
         >
-            <FlashList<DataType>
+            <FlashList<TableData>
                 ref={listRef}
-                data={filteredAndSortedData}
+                data={listData}
                 style={[styles.flex1, styles.mnh0]}
                 showsVerticalScrollIndicator={false}
                 maintainVisibleContentPosition={{disabled: true}}
+                ListEmptyComponent={listEmptyComponent}
+                onLoad={handleLoad}
+                stickyHeaderIndices={canRenderStickyHeader ? adjustedStickyHeaderIndices : undefined}
                 contentContainerStyle={[
                     filteredAndSortedData.length === 0 && styles.flexGrow1,
                     listContentContainerStyle,
@@ -113,12 +234,17 @@ function TableBody<DataType extends TableData>({contentContainerStyle, style, ..
                         typeof tableBodyBottomPadding === 'number' && {minHeight: contentMinHeight + tableBodyBottomPadding},
                 ]}
                 keyboardShouldPersistTaps="handled"
-                ListHeaderComponent={ListHeaderComponent}
-                ListEmptyComponent={ListEmptyComponent}
+                renderItem={renderListItem}
+                keyExtractor={keyExtractorForList}
+                getItemType={getItemTypeForList}
+                onScroll={(event) => {
+                    trackScrollOffset(event);
+                    onScroll?.(event);
+                }}
                 {...restListProps}
             />
         </View>
     );
 }
 
-export default TableBody;
+export default React.memo(TableBody);