ui5-webcomponents-react

When using the useTable hook in AnalyticalTable, the order in which you pass plugins is critical because hooks accumulate properties and state through a pipeline. useTable automatically prepends useColumnVisibility to your plugin list.

To ensure correct behavior, follow this effective execution order:

1. Vendored react-table plugins: These should generally come first (e.g., useFilters, useGlobalFilter, useColumnOrder, useGroupBy, useSortBy, useExpanded).
2. UI5WCR useRowSelect: This is a specialized fork that replaces the upstream react-table version.
3. UI5WCR Internal Hooks: These provide core functionality like resizing, selection, and accessibility. They must follow the order specified in the documentation to avoid state conflicts.
4. User-provided plugins: These should be passed LAST. Adding plugins at the beginning or middle can clobber the logic of prior hooks in the pipeline.

useTable(
  config,
  // 1. Vendored react-table plugins
  useFilters,
  useGlobalFilter,
  useColumnOrder,
  useGroupBy,
  useSortBy,
  useExpanded,

  // 2. UI5WCR fork
  useRowSelect,

  // 3. UI5WCR internal hooks
  useColumnResizing,
  useColumnsDeps,
  useRowSelectionColumn,
  useAutoResize,
  useSingleRowStateSelection,
  useSelectionChangeCallback,
  useRowHighlight,
  useRowNavigationIndicators,
  useDynamicColumnWidths,
  useStyling,
  useToggleRowExpand,
  useA11y,
  usePopIn,
  useVisibleColumnsWidth,
  useKeyboardNavigation,
  useColumnDragAndDrop,

  // 4. User-provided plugins (LAST)
  ...tableHooks
);

Selection in large tables can be expensive. The AnalyticalTable uses several optimizations to maintain performance:

Memoization and Fast Paths

• selectedFlatRows: This is memoized using useMemo with dependencies on rows, selectSubRows, selectedRowIds, getSubRows, and isSelectionEnabled. This prevents O(n) iterations on every scroll or layout change.
• Disabled Fast Path: When selectionMode === 'None', the table returns a stable empty array for selectedFlatRows, a noop function for toggleRowSelected, and skips isAllRowsSelected computations entirely.
• Single-Select Optimization: For single-row selection, useSingleRowStateSelection calls toggleRowSelected directly from handlers, bypassing the state reducer.

Selection Logic

• Indeterminate State: The select-all indeterminate check is calculated based on visible/filtered rows only (selectedFlatRows?.length) rather than the total set of selected IDs. This prevents the checkbox from showing an indeterminate state due to rows that are selected but currently hidden by filters.
• isAllRowsSelected: This is calculated as Object.keys(nonGroupedRowsById).every(...). While not memoized, it operates on the keys of grouped rows (O(keys)) rather than the full row set (O(n)).

The AnalyticalTable uses a layered reducer system to manage state. Reducers execute in a specific registration order. Understanding this order is critical when implementing custom hooks or managing state via the stateReducer option.

Execution Order

1. Internal Hooks (via useTable):

   • Vendored react-table reducers: useFilters, useGlobalFilter, useColumnOrder, useGroupBy, useSortBy, and useExpanded.
   • useRowSelect: Manages selection actions and selectedFlatRows (visible-only).
   • useColumnResizing: Manages column resize actions (columnStartResizing, columnResizing, columnDoneResizing, resetResize).

2. Plugin Hooks (User-provided via tableHooks):

   • useOrderedMultiSort: Reorders sortBy by priority during toggleSortBy.
   • useIndeterminateRowSelection: Handles INDETERMINATE_ROW_IDS and auto-selects parents when all siblings are selected.
   • useF2CellEdit: Handles CELL_CONTENT_TAB_INDEX.

3. Main Table Reducer (stateReducer):

   • This is the final layer passed as the stateReducer option in useTable. It handles UI5-specific actions like TABLE_RESIZE, SET_SELECTED_ROW_IDS, COLUMN_DND_START/END, IS_RTL, VISIBLE_ROWS, TABLE_SCROLLING_ENABLED, SET_POPIN_COLUMNS, INTERACTIVE_ROWS_HAVE_POPIN, SUB_COMPONENTS_HEIGHT, TRIGGER_PROG_SCROLL, AUTO_RESIZE, and TABLE_COL_RESIZED. It also intercepts toggleRowExpanded to dispatch rowCollapsed.

The AnalyticalTable (via react-table) uses three distinct invocation patterns for its hooks. Understanding these is critical for correctly implementing or extending functionality:

1. Pipeline Hooks (reduceHooks): Used for transforming data (e.g., columns, visibleColumns, stateReducers). The callback receives the previous result and MUST return the next value. Returning undefined will throw an error.
2. Side-effect Hooks (loopHooks): Used for side effects (e.g., useInstance, useInstanceAfterData, prepareRow). The callback receives the instance and MUST NOT return a value. Returning anything will throw an error in development mode.
3. Prop Getter Hooks: Used to generate props for UI elements (e.g., getRowProps, getCellProps). The callback receives (accumulatedProps, meta) and returns either a props object or a [props, extraProps] tuple. Props are accumulated via reduction: style is deep-merged and className is concatenated.