/

Tablas anidadas: Bottom y Bottom-Fixed

Dos valores de position() que mantienen una tabla anidada siempre visible debajo de los campos propios del padre, en lugar de ocultarla detrás de un clic en una pestaña.

position('bottom')

Renderiza la tabla anidada como una sección de ancho completo añadida directamente debajo de los campos propios del formulario padre (o debajo de la franja de pestañas, si ese mismo formulario tiene además otros hijos nested_table() que siguen usando la posición tab por defecto; todas las disposiciones conviven libremente en un mismo formulario). No hace falta hacer clic en ninguna pestaña para verla:

$xcrud = Xcrud::get_instance();
$xcrud->table('orders');
$xcrud->route('orders');
$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->position('bottom');

echo $xcrud->render();

Abrir ahora el formulario de edición de un pedido muestra "Order details" como un encabezado con su propia cuadrícula justo debajo de los campos propios del pedido; desplazarse por el formulario hace que la sección anidada se desplace junto con todo lo que hay encima.

position('bottom-fixed')

La hermana fija de bottom: la misma sección, pero anclada (CSS position: sticky) a la parte inferior del propio panel de desplazamiento del formulario mientras el visitante recorre los campos de arriba, permaneciendo así accesible sin necesidad de desplazarse hasta el final. Por defecto ocupa el 35% de la altura del viewport (min-height: 90px, max-height: 70vh), con un asa de agarre arrastrable en su propio borde superior para redimensionarla, y su propio desplazamiento interno para las filas hijas, de modo que nunca necesita crecer para mostrarlo todo a la vez.

La diferencia respecto al ejemplo anterior es una sola línea:

$orderdetails->position('bottom-fixed');

Ejemplo completo, que coincide con pages/nested-table-bottom-fixed.php:

$xcrud = Xcrud::get_instance();
$xcrud->table('orders');
$xcrud->route('nested-table-bottom-fixed');
$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);

// La única línea que difiere de simplemente 'bottom'.
$orderdetails->position('bottom-fixed');

echo $xcrud->render();

Abre el formulario de edición del pedido y desplázate por sus propios campos: "Order details" permanece anclada cerca de la parte inferior del panel todo el tiempo, en lugar de desplazarse junto con el resto del formulario como hace el simple bottom. Arrastra la barra de agarre de su propio borde superior hacia arriba o abajo para redimensionarla.

Referencia de position()

ValorDescripción
bottomSección de ancho completo, siempre visible, debajo de los campos propios del padre; se desplaza con la página
bottom-fixedLa misma sección, anclada cerca de la parte inferior, ~35% de altura por defecto, asa de redimensionado arrastrable, desplazamiento interno