Create HTML table with headers in a vertical column dynamically with laravel? - php

Question

I've been hunting around, but all the answers and documentation on this is for tables that aren't dynamically generating everything.
This is my blade file:
#extends('layout')
#section('content')
<h1>User Profile Data</h1>
<table class="table table-striped">
<tr>
#foreach ($columns as $column => $name)
<th><strong> {{ $name }} </strong></th>
#endforeach
#foreach ($profile as $person)
#foreach ($person as $name)
<td> {{ $name }} </td>
#endforeach
#endforeach
</tr>
</table>
#stop
It's all working, except for one problem, the heads go horizontally, rather than vertically. I'd like to be able to automatically populate the data from the database and have it displayed side by side.
Like so:
Name: John
Age: 25
Height: 176
etc.
What am I missing?

Answer 1

v.1 Directly generate the vertical headers table.
This can be easily solved after you realize how your table will actually look like in HTML, in order to have vertical headers.
<h1>User Profile Data</h1>
<table class="table table-striped">
<tr>
<th><strong> Name: </strong></th>
<td> John </td>
<td> Joane </td>
</tr>
<tr>
<th><strong> Surname: </strong></th>
<td> Doe </td>
<td> Donald </td>
</tr>
<tr>
<th><strong> Email: </strong></th>
<td> john.doe#email.com </td>
<td> jane#email.com </td>
</tr>
</table>
After you know your above goal you just have to nest the foreach loops so that you can populate the data.
For each column you'll have to return the matching data from the profile.
Instead of returning $person->name use $person[$col]
To nest the foreach use the same technique for your other question:
How to show data from (multidimensional?) arrays with Laravel 5.3 blade
v.2 Use normal tables combined with CSS tricks to reflow table
Import twitter bootstrap and use .table-reflow on a well formed table.
The generated table will look like this and can be generated with your initial laravel code:
<table class="table table-striped table-hover table-reflow">
<thead>
<tr>
<th ><strong> Name: </strong></th>
<th ><strong> Surname: </strong></th>
<th ><strong> Email: </strong></th>
</tr>
</thead>
<tbody>
<tr>
<td> John </td>
<td> Doe </td>
<td> john.doe#email.com </td>
</tr>
<tr>
<td> Joane </td>
<td> Donald </td>
<td> jane#email.com </td>
</tr>
</tbody>
</table>
Content order and complex tables:
Beware that the table-reflow style changes the visual order of content. Make sure that you only apply this style to well-formed and simple data tables (and in particular, don’t use this for layout tables) with appropriate <th> table header cells for each row and column.
In addition, this class will not work correctly for tables with cells that span multiple rows or columns (using rowspan or colspan attributes).
You should check the docs here:
twitter-bootstrap .table-reflow
Edit:
In addition to Kronmark's excellent points, I'm leaving this here for new people. This is what the automated table might look like:
<table class="table table-striped table-hover table-reflow">
#foreach($array as $key=>$value)
<tr>
<th ><strong> {{ $key }}: </strong></th>
<td> {{ $value }} </td>
</tr>
#endforeach
</table>
The key is the title from the table, the value is the data point associated with it. I.e. Full_Name = Key, John Magsson = value.
This is produced from an array, the process should be explained here:
Blade view not printing data from array
Good luck. :)