UI layout

./ApiTables/ApiTablesComponent.tsx is the visual shell. Everything below assumes structure has loaded (ApiTablesController mounted).

Vertical layout (top to bottom)

┌─────────────────────────────────────────────────────────┐
│ TableFilters (Sheet) — when structureFilters.length > 0 │
├─────────────────────────────────────────────────────────┤
│ AppliedFilters — active filter chips                    │
├─────────────────────────────────────────────────────────┤
│ TableSorting — badge: active sort + reset               │
├─────────────────────────────────────────────────────────┤
│ Toolbar row:                                            │
│   [Bulk actions] [Column visibility] [Filter toggle]   │
│   [Page size selector]                                  │
├─────────────────────────────────────────────────────────┤
│ customElement (optional React node)                     │
├─────────────────────────────────────────────────────────┤
│ Selected row count (when selection non-empty)           │
├─────────────────────────────────────────────────────────┤
│ ActionsOfSelection — bulk-eligible row actions          │
├─────────────────────────────────────────────────────────┤
│ TableBody — react-data-table-component                  │
├─────────────────────────────────────────────────────────┤
│ TablePagination                                         │
└─────────────────────────────────────────────────────────┘
│ ApiTablesModals (portals / popups, not in flow)         │

Bulk actions (`TableBulkActions`)

Dropdown of structure-defined bulk actions. Disabled when table is empty or loading. See Bulk actions.

Column visibility (`ColumnsVisibility`)

Popover of checkboxes for showable columns. Persists to secure LS: {tableName}_tb.

Filter trigger (`FilterTrigger`)

Toggles visibility of the filter sheet (local showFilters state in ApiTablesComponent).

Page size (`TablePageSize`)

Options 10 / 25 / 50 / 100. Writes api_tables_page_size to secure LS and dispatches _changePageSize.

Table body (`TableBody`)

Built on react-data-table-component (RDT):

Feature	When enabled
Row selection	Bulk actions exist or any row action has `applicableAsBulkAction`
Server sort	`sortServer` + `onSort` → `_setTableSorting`
Expandable rows	Structure supports expanded row detail (reuses cell renderers)
Loading overlay	`tableFetchingLoading`
Custom slot	`customElement === "withdrawal_requests"` → `CalculateWithdrawalAmount`

Row actions appear either in an actions column (TableRowActions with isActionCol) or inline per column when actionsInRegularCells is true.

Modals (overlay)

ApiTablesModals is rendered at the bottom of ApiTablesComponent but uses Popup components — not part of document flow.

Modal source	Trigger state
Row result view	`clickedRowActionResponse` + `DisplayOnModal`
Confirmation	`need_confirmation` on row or bulk action
Custom control form	`customControlAction`
Bulk withdrawal	`selectedBulkAction.action_key === "create_withdrawal_bulk"`
Column datalist / HTML	`rowSelectedModal` in `tableColumns` slice

See UI components and Row actions.

Loading states

State	UI
`tableStructureLoading`	`FullPageTableLoader` in `ReactApiTable` (before controller)
`tableFetchingLoading`	RDT progress / loader in `TableBody`
Row action POST	Spinner on `clickedRowActionId` in `GeneralRowActionElement`
Bulk POST	Global `_setMainLoader` via app store

Styling conventions

Uses bolesa-app-ui Card, Button, Badge, Sheet, Select, etc.
Cell content wrapped in text-sm tabel-col-cell
Status values (CR, DR, approved, pending) get badge classes in TextCell

On this page