Display data from a query - I can't display it properly - codeigniter

Question

I'm trying to show result from a query but I can't display it as it should.
I have two tables - ordersheader and orderitems.
ordersheader is the table for orders. It's structure is:
idOrder,idCustomer,createdDate,orderDueDate.
My table 'orderitems' contains separate orderitems for each order .It has the following structure:
orderitem_id,idOrder,item_number,eggSize,quantity,price.
These two tables are joined ON idOrder. One row from ordersheader corresponds to many rows in orderitems because one order could have many orderitems in it.
My problem is that I can't show them properly. It has to be shown like this:
http://prntscr.com/7lwnz7
and when you click Details it should look like that:
http://prntscr.com/7lwoan
Now,they are shown each orderitem on new line like this:
http://prntscr.com/7lworg
I have to make result from each idOrder to be displayed in one row.
Should I use inner loop and how to do that?
My model is:
<?php
function getOrders(){
$date = new DateTime("now");
$curr_date = $date->format('Y-m-d');
$this->db->select('ordersheader.*,customer.name,orderitems.*');
$this->db->from('ordersheader');
$this->db->join('orderitems', 'orderitems.idOrder = ordersheader.idOrder');
$this->db->join('customer', 'customer.idCustomer = ordersheader.idCustomer');
$this->db->where('DATE(orderDueDate)', $curr_date);
$query = $this->db->get();
return $query->result();
My view is:
<?php
if($orderlist){
foreach($orderlist as $row) {
?> <tr class="overview">
<td><?php echo $row->idOrder; ?></td>
<td class="text-center"><img src="<?= base_url();?>/assets/images/tick.png"></td>
<td><?php echo $row->name; ?></td>
<td><?php echo $row->eggSize; ?></td>
<td><?php echo $row->quantity; ?></td>
<td>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 60%;">
60%
</div>
</div>
</td>
<td>18:00</td>
<td><button type="button" class="btn btn-link btn-xs view-full-order">Full</button></td>
</tr> <?php for($i=0;$i<count($row->eggSize); $i++) { ?>
<tr class="full hide">
<td></td>
<td></td>
<td></td>
<td><?php echo $row->eggSize; ?></td>
<td><?php echo $row->quantity; ?></td>
<td>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" style="width: <?php echo $rand; ?>%;">
<?php echo $rand; ?>%
</div>
</div>
</td>
<td>14:00</td>
<td></td>
</tr><?php } ?>
<?php } } ?>
</tbody></table>

Answer 1

<?php
function getOrders(){
$date = new DateTime("now");
$curr_date = $date->format('Y-m-d');
$this->db->select('ordersheader.*,customer.name,GROUP_CONCAT(orderitems.item_number SEPARATOR ",") as item_number');
$this->db->select('ordersheader.*,customer.name,GROUP_CONCAT(orderitems.priceSEPARATOR ",") as price');
$this->db->select('ordersheader.*,customer.name,GROUP_CONCAT(orderitems.eggSize SEPARATOR ",") as eggSize');
$this->db->from('ordersheader');
$this->db->join('orderitems', 'orderitems.idOrder = ordersheader.idOrder');
$this->db->join('customer', 'customer.idCustomer = ordersheader.idCustomer');
$this->db->where('DATE(orderDueDate)', $curr_date);
$query = $this->db->get();
return $query->result();
?>