/

Nested Tables: Aside Left & Right

position('left') and position('right') run a nested table as a fixed-width, sticky sidebar column alongside the parent form's own fields.

position('left') / position('right')

Both values run the nested table as a fixed-width column (default 300px, min-width: 160px, max-width: 60vw) sticky to the top of the panel, alongside the parent form's own fields (its plain fields, tab strip, and any bottom/bottom-fixed sections) instead of above or below them. Both get a draggable edge to resize the column's width and their own internal scroll for the child rows - the same sticky + draggable-handle + internal-scroll treatment bottom-fixed uses, just turned sideways.

left puts the nested column on the left with the parent's own fields flowing on the right; right mirrors that. Either way, the draggable handle sits on whichever edge borders the main form column.

Example: left

Matching pages/nested-table-left.php:

$xcrud = Xcrud::get_instance();
$xcrud->table('orders');
$xcrud->route('nested-table-left');
$xcrud->columns('orderNumber,orderDate,status,customerNumber');

$orderdetails = $xcrud->nested_table('Order details', 'orderNumber', 'orderdetails', 'orderNumber');
$orderdetails->columns('productCode,quantityOrdered,priceEach');
$orderdetails->fields('productCode,quantityOrdered,priceEach');
$orderdetails->order_by('productCode', 'asc');
$orderdetails->change_type('priceEach', 'price', '2', ['prefix' => '$']);
$orderdetails->relation('productCode', 'products', 'productCode', 'productName', null, null, false, ' ', true);

$orderdetails->position('left');

echo $xcrud->render();

Opening an order's edit form here shows "Order details" as a fixed column running down the left side, pinned to the top of the panel while the order's own fields scroll past on the right. Drag its right edge to widen or narrow it.

Example: right

The one-line difference:

$orderdetails->position('right');

Same layout, mirrored - the nested column now runs down the right side, with the draggable handle on its left edge (the one bordering the parent's own fields), and the parent's fields flow on the left instead.

position() reference

ValueDescription
leftFixed-width sticky column on the left; parent's own fields flow on the right; draggable handle on the right edge of the column
rightFixed-width sticky column on the right; parent's own fields flow on the left; draggable handle on the left edge of the column