Data flow

Phase 1 — Structure load (feature page)

This happens on your page, before the table UI mounts.

useTableStructure keeps structure in local React state on the page — not in ApiTables Redux yet.

// Your page — Phase 1 only
const { getTableStructure, tableStructure, tableStructureLoading } = useTableStructure();

useEffect(() => {
  getTableStructure({ table: '/api-table/control-tables/load-table/categories' });
}, []);

return (
  <ReactApiTable table={tableStructure} tableStructureLoading={tableStructureLoading} />
);

Phase 2 — Controller initialization

On table prop change (ApiTablesController):

1. _getTableComponents — tableName, structureColumns, structureFilters, optional customElement string id
2. _getStructureBulkActions — bulk action definitions
3. _getStructureRowActions — flattened if structure uses general_actions multi-cell layout
4. _checkActionsInRegularCells(true) when actions are keyed per column name
5. _changePageSize from secure LS key api_tables_page_size

On unmount: _resetTableCore, _resetTableColumns, _resetTableBulkActions, _resetTableRowActions.

Phase 3 — Column binding

TableBody dispatches _setTableColumns with structureColumns and current tableData. formatTableColumns() in ./ApiTables/table-utils/utils.tsx produces react-data-table-component column defs with typed cell renderers.

Phase 4 — Data query

Fetch triggers when any of these change: tableName, currentPage, pageSize, appliedFilters, tableSorting, tableRefresher, pathname, or params prop.

AbortController cancels in-flight requests when dependencies change quickly.

Phase 5 — User interactions

Phase 6 — Row / bulk actions

Bulk actions use bulkActionsPostHandler with payload { filters: appliedFilters, selected_ids: selectedIds } unless a dedicated bulk modal opens first.

Refresh strategies

See External state for when to remount vs reload.