Custom elements

Optional UI slots above the table — React nodes vs string identifiers

ApiTables supports two different customElement mechanisms. They are easy to confuse because the prop name is the same.

React node (feature-composed UI)

Prop: customElement={<MyToolbar />} on ReactApiTable / ApiTablesController

Rendered in: ApiTablesComponent — only when React.isValidElement(customElement):

{React.isValidElement(customElement) && <div className="py-2">{customElement}</div>}

Use this for arbitrary JSX above the table (extra buttons, hints, feature-specific layout). This does not go through Redux.

String identifier (built-in table hooks)

Prop: customElement="withdrawal_requests" (string)

Stored in: tableCore.customElement via _getTableComponents when typeof customElement === 'string'

Rendered in: TableBody — module-internal branches:

IdentifierComponentBehavior
withdrawal_requestsCalculateWithdrawalAmount (TableCustomElements.tsx)Shows total selected dues above the grid when rows are selected

To add a new identifier:

  1. Implement UI in ./ApiTables/core/TableCustomElements.tsx (or a dedicated file).
  2. Branch on customElement === "your_id" in TableBody.tsx.
  3. Pass customElement="your_id" from the feature page’s ReactApiTable.
  4. Document the id here and in Wired controls if it is modal-related.

What not to do

  • Do not pass a string expecting it to render arbitrary components — only hard-coded ids work.
  • Do not pass a React node expecting Redux customElement — the string slot is never set for elements.

Errors and feedback

Toasts, API error shapes, and network handling in ApiTables

useTableStructure

Fetch table structure before mounting ApiTablesController

On this page

1React node (feature-composed UI)2String identifier (built-in table hooks)What not to doRelated