[No QA] [BYOC] [Bulk Card Assignments] Release 1: Generic Table component

contributingGuides/TABLE.md

@@ -0,0 +1,249 @@
+# Table Component
+
+A composable, generic table component with built-in filtering, search, and sorting capabilities.
+
+## Quick Start
+
+```tsx
+import Table from '@components/Table';
+import type { TableColumn, CompareItemsCallback } from '@components/Table';
+
+type Item = { id: string; name: string; status: string };
+type ColumnKey = 'name' | 'status';
+
+const columns: Array<TableColumn<ColumnKey>> = [
+  { key: 'name', label: 'Name' },
+  { key: 'status', label: 'Status' },
+];
+
+function MyTable() {
+  return (
+    <Table<Item, ColumnKey>
+      data={items}
+      columns={columns}
+      renderItem={({ item }) => <ItemRow item={item} />}
+      keyExtractor={(item) => item.id}
+    >
+      <Table.Header />
+      <Table.Body />
+    </Table>
+  );
+}
+```
+
+## Compositional Pattern
+
+The Table uses a **compound component pattern** where the parent `<Table>` manages all state and child components render specific UI parts:
+
+| Component | Purpose |
+|-----------|---------|
+| `<Table>` | Parent container that manages state and provides context |
+| `<Table.Header>` | Renders sortable column headers |
+| `<Table.Body>` | Renders data rows using FlashList |
+| `<Table.SearchBar>` | Search input that filters data |
+| `<Table.FilterButtons>` | Dropdown filter buttons |
+
+### Flexible Composition
+
+You only include the components you need:
+
+```tsx
+// Minimal: just data rows
+<Table data={items} columns={columns} renderItem={renderItem}>
+  <Table.Body />
+</Table>
+
+// With search
+<Table data={items} columns={columns} renderItem={renderItem} isItemInSearch={searchFn}>
+  <Table.SearchBar />
+  <Table.Body />
+</Table>
+
+// Full featured
+<Table
+  data={items}
+  columns={columns}
+  renderItem={renderItem}
+  isItemInSearch={searchFn}
+  isItemInFilter={filterFn}
+  compareItems={compareFn}
+  filters={filterConfig}
+>
+  <Table.SearchBar />
+  <Table.FilterButtons />
+  <Table.Header />
+  <Table.Body />
+</Table>
+```
+
+## Features
+
+### Sorting
+
+Enable by providing `compareItems`:
+
+```tsx
+const compareItems: CompareItemsCallback<Item, ColumnKey> = (a, b, { columnKey, order }) => {
+  const multiplier = order === 'asc' ? 1 : -1;
+  return a[columnKey].localeCompare(b[columnKey]) * multiplier;
+};
+
+<Table
+  data={items}
+  columns={columns}
+  renderItem={renderItem}
+  compareItems={compareItems}
+>
+  <Table.Header /> {/* Clicking headers toggles sort */}
+  <Table.Body />
+</Table>
+```
+
+Header click behavior: `ascending → descending → reset`
+
+### Searching
+
+Enable by providing `isItemInSearch`:
+
+```tsx
+const isItemInSearch = (item: Item, searchString: string) =>
+  item.name.toLowerCase().includes(searchString.toLowerCase());
+
+<Table
+  data={items}
+  columns={columns}
+  renderItem={renderItem}
+  isItemInSearch={isItemInSearch}
+>
+  <Table.SearchBar />
+  <Table.Body />
+</Table>
+```
+
+### Filtering
+
+Enable by providing `filters` config and `isItemInFilter`:
+
+```tsx
+import type { FilterConfig, IsItemInFilterCallback } from '@components/Table';
+
+const filterConfig: FilterConfig = {
+  status: {
+    filterType: 'single-select', // or 'multi-select'
+    options: [
+      { label: 'All', value: 'all' },
+      { label: 'Active', value: 'active' },
+      { label: 'Inactive', value: 'inactive' },
+    ],
+    default: 'all',
+  },
+};
+
+const isItemInFilter: IsItemInFilterCallback<Item> = (item, filterValues) => {
+  if (filterValues.includes('all')) return true;
+  return filterValues.includes(item.status);
+};
+
+<Table
+  data={items}
+  columns={columns}
+  renderItem={renderItem}
+  filters={filterConfig}
+  isItemInFilter={isItemInFilter}
+>
+  <Table.FilterButtons />
+  <Table.Body />
+</Table>
+```
+
+## Programmatic Control
+
+Access table methods via ref:
+
+```tsx
+import type { TableHandle } from '@components/Table';
+
+const tableRef = useRef<TableHandle<Item, ColumnKey>>(null);
+
+// Update sorting programmatically
+tableRef.current?.updateSorting({ columnKey: 'name', order: 'desc' });
+
+// Update search
+tableRef.current?.updateSearchString('query');
+
+// Get current state
+const sorting = tableRef.current?.getActiveSorting();
+const searchString = tableRef.current?.getActiveSearchString();
+
+// FlashList methods also available
+tableRef.current?.scrollToIndex({ index: 0 });
+
+<Table ref={tableRef} {...props}>
+  <Table.Body />
+</Table>
+```
+
+## Type Parameters
+
+| Parameter | Description |
+|-----------|-------------|
+| `T` | Type of items in the data array |
+| `ColumnKey` | String literal union of column keys (e.g., `'name' \| 'status'`) |
+| `FilterKey` | String literal union of filter keys |
+
+## Architecture
+
+### Middleware Pipeline
+
+Data processing flows through three middlewares:
+
+```
+data → [Filtering] → [Searching] → [Sorting] → processedData
+```
+
+Each middleware transforms the data array. The order is fixed: filters first, then search, then sort.
+
+### Context
+
+All sub-components access shared state via `TableContext`. You can create custom sub-components using `useTableContext`:
+
+```tsx
+import { useTableContext } from '@components/Table/TableContext';
+
+function CustomComponent<T>() {
+  const { processedData, activeSorting, updateSorting } = useTableContext<T>();
+  // Build custom UI using context data...
+}
+```
+
+## Column Configuration
+
+```tsx
+type TableColumn<ColumnKey> = {
+  key: ColumnKey;        // Unique identifier
+  label: string;         // Display text
+  styling?: {
+    flex?: number;              // Column width ratio
+    containerStyles?: StyleProp<ViewStyle>;
+    labelStyles?: StyleProp<TextStyle>;
+  };
+};
+```
+
+## Props Reference
+
+### Table Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `data` | `T[]` | Yes | Array of items to display |
+| `columns` | `TableColumn<ColumnKey>[]` | Yes | Column configuration |
+| `renderItem` | FlashList's `renderItem` | Yes | Row renderer |
+| `keyExtractor` | FlashList's `keyExtractor` | Yes | Unique key generator |
+| `compareItems` | `CompareItemsCallback<T, ColumnKey>` | No | Sorting comparator |
+| `isItemInSearch` | `IsItemInSearchCallback<T>` | No | Search predicate |
+| `isItemInFilter` | `IsItemInFilterCallback<T>` | No | Filter predicate |
+| `filters` | `FilterConfig<FilterKey>` | No | Filter dropdown config |
+| `ref` | `Ref<TableHandle<T, ColumnKey, FilterKey>>` | No | Ref for programmatic control |
+
+Plus all FlashList props except `data`.

src/components/CaretWrapper.tsx

@@ -1,29 +1,32 @@
 import React from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
+import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
 import Icon from './Icon';
-import * as Expensicons from './Icon/Expensicons';
 
 type CaretWrapperProps = ChildrenProps & {
     style?: StyleProp<ViewStyle>;
+    caretWidth?: number;
+    caretHeight?: number;
 };
 
-function CaretWrapper({children, style}: CaretWrapperProps) {
+function CaretWrapper({children, style, caretWidth, caretHeight}: CaretWrapperProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
+    const expensifyIcons = useMemoizedLazyExpensifyIcons(['DownArrow'] as const);
 
     return (
         <View style={[styles.flexRow, styles.gap1, styles.alignItemsCenter, style]}>
             {children}
             <Icon
-                src={Expensicons.DownArrow}
+                src={expensifyIcons.DownArrow}
                 fill={theme.icon}
-                width={variables.iconSizeExtraSmall}
-                height={variables.iconSizeExtraSmall}
+                width={caretWidth ?? variables.iconSizeExtraSmall}
+                height={caretHeight ?? variables.iconSizeExtraSmall}
             />
         </View>
     );

src/components/FeedSelector.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import {View} from 'react-native';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
-import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
@@ -35,13 +34,12 @@ type Props = {
 function FeedSelector({onFeedSelect, cardIcon, feedName, supportingText, shouldShowRBR = false, plaidUrl = null}: Props) {
     const styles = useThemeStyles();
     const theme = useTheme();
-    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const Expensicons = useMemoizedLazyExpensifyIcons(['DotIndicator'] as const);
     return (
         <PressableWithFeedback
             onPress={onFeedSelect}
             wrapperStyle={styles.flex1}
-            style={[styles.flexRow, styles.alignItemsCenter, styles.gap3, shouldUseNarrowLayout && styles.mb3]}
+            style={[styles.flexRow, styles.alignItemsCenter, styles.gap3]}
             accessibilityLabel={feedName ?? ''}
         >
             {plaidUrl ? (

src/components/Search/FilterDropdowns/DropdownButton.tsx

@@ -1,6 +1,7 @@
 import {willAlertModalBecomeVisibleSelector} from '@selectors/Modal';
 import type {ReactNode} from 'react';
 import React, {useCallback, useMemo, useRef, useState} from 'react';
+import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import Button from '@components/Button';
 import CaretWrapper from '@components/CaretWrapper';
@@ -13,6 +14,7 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
+import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 
@@ -32,6 +34,21 @@ type DropdownButtonProps = {
 
     /** The component to render in the popover */
     PopoverComponent: (props: PopoverComponentProps) => ReactNode;
+
+    /** Whether to use medium size button instead of small */
+    medium?: boolean;
+
+    /** Button inner styles */
+    innerStyles?: StyleProp<ViewStyle>;
+
+    /** Button label style */
+    labelStyle?: StyleProp<TextStyle>;
+
+    /** Carret wrapper style */
+    carretWrapperStyle?: StyleProp<ViewStyle>;
+
+    /** Wrapper style for the outer view */
+    wrapperStyle?: StyleProp<ViewStyle>;
 };
 
 const PADDING_MODAL = 8;
@@ -41,7 +58,7 @@ const ANCHOR_ORIGIN = {
     vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP,
 };
 
-function DropdownButton({label, value, viewportOffsetTop, PopoverComponent}: DropdownButtonProps) {
+function DropdownButton({label, value, viewportOffsetTop, PopoverComponent, medium = false, labelStyle, innerStyles, carretWrapperStyle, wrapperStyle}: DropdownButtonProps) {
     // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to distinguish RHL and narrow layout
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
     const {isSmallScreenWidth} = useResponsiveLayout();
@@ -108,18 +125,26 @@ function DropdownButton({label, value, viewportOffsetTop, PopoverComponent}: Dro
     }, [PopoverComponent, toggleOverlay]);
 
     return (
-        <View ref={anchorRef}>
+        <View
+            ref={anchorRef}
+            style={wrapperStyle}
+        >
             {/* Dropdown Trigger */}
             <Button
-                small
                 ref={triggerRef}
-                innerStyles={[isOverlayVisible && styles.buttonHoveredBG, {maxWidth: 256}]}
+                innerStyles={[isOverlayVisible && styles.buttonHoveredBG, {maxWidth: 256}, innerStyles]}
                 onPress={calculatePopoverPositionAndToggleOverlay}
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...(medium ? {medium: true} : {small: true})}
             >
-                <CaretWrapper style={[styles.flex1, styles.mw100]}>
+                <CaretWrapper
+                    style={[styles.flex1, styles.mw100, carretWrapperStyle]}
+                    caretWidth={variables.iconSizeSmall}
+                    caretHeight={variables.iconSizeSmall}
+                >
                     <Text
                         numberOfLines={1}
-                        style={[styles.textMicroBold, styles.flexShrink1]}
+                        style={[styles.textMicroBold, styles.flexShrink1, labelStyle]}
                     >
                         {buttonText}
                     </Text>