Nested tables in tabs Semantic UI theme
Example of table nesting in tabs implementation
HIDE CODE
<?php
$xcrud = Xcrud::get_instance();
$xcrud->table('orders');
$xcrud->default_tab('Order info');
$orderdetails = $xcrud->nested_table('Order details','orderNumber','orderdetails','orderNumber'); // 2nd level
$orderdetails->columns('productCode,quantityOrdered,priceEach');
$orderdetails->fields('productCode,quantityOrdered,priceEach');
$orderdetails->default_tab('Detail information');
$customers = $xcrud->nested_table('Customers','customerNumber','customers','customerNumber'); // 2nd level 2
$customers->columns('customerName,city,country');
$products = $orderdetails->nested_table('Products','productCode','products','productCode'); // 3rd level
$products->default_tab('Product details');
$productLines = $products->nested_table('Product Lines','productLine','productlines','productLine'); // 4th level
echo $xcrud->render();
?>
<script>
$('.xcrud-tabs .menu .item').tab('change tab','tab1.php');
</script>
Orders
| # | Orderdate | Requireddate | Shippeddate | Status | Comments | Customernumber | |
|---|---|---|---|---|---|---|---|
| 1 | 11.02.2003 00:00:00 | 29.07.2020 00:00:00 | 30.07.2020 00:00:00 | Shipped | Great | 363 | View Edit Remove |
| 2 | 09.01.2003 00:00:00 | 12.01.2003 00:00:00 | 25.01.2003 00:00:00 | Completed | Check on availability. | 128 | View Edit Remove |
| 3 | 10.01.2003 00:00:00 | 18.01.2003 00:00:00 | 14.01.2003 00:00:00 | Shipped | 181 | View Edit Remove | |
| 4 | 29.01.2003 00:00:00 | 07.02.2003 00:00:00 | 02.02.2003 00:00:00 | Shipped | 121 | View Edit Remove | |
| 5 | 31.01.2003 00:00:00 | 09.02.2003 00:00:00 | 01.02.2003 00:00:00 | Shipped | 141 | View Edit Remove | |
| 6 | 11.02.2003 00:00:00 | 21.02.2003 00:00:00 | 12.02.2003 00:00:00 | Shipped | Item 1 | 145 | View Edit Remove |
| 7 | 17.02.2003 00:00:00 | 24.02.2003 00:00:00 | 21.02.2003 00:00:00 | Shipped | Great Item | 278 | View Edit Remove |
| 8 | 24.02.2003 00:00:00 | 03.03.2003 00:00:00 | 26.02.2003 00:00:00 | Shipped | Difficult to negotiate with customer. We need | 131 | View Edit Remove |
| 9 | 03.03.2003 00:00:00 | 12.03.2003 00:00:00 | 08.03.2003 00:00:00 | Shipped | 385 | View Edit Remove | |
| 10 | 10.03.2003 00:00:00 | 19.03.2003 00:00:00 | 11.03.2003 00:00:00 | Shipped | Customer requested that FedEx Ground is used for | 486 | View Edit Remove |