So I was hoping to find a pre-built function out there preferably PHP/HTML/JS to recursively display a table in html, but I haven’t thus far. I want a really dynamic way of displaying a table from Mongo DB, which as you may know can contain multidimensional data. Java script would come in to collapse / expand any data that is an array.
It returns an object, which can be converted to a multidimensional array. If you are unfamiliar with how “records” or documents are stored, here might be a good example:
{
_id: "disudfh93h394530dj", // uncreative recreation of a unique id created by mongo
f_name: "kyle",
l_name: "wolfe",
forums_liked: ["PHP", "Databases & MySQL", "General Web Development & Application Design Issues"]
}
Essentially the “column” forums_liked is an array. Ideally on the fly a script would show each row in a normal table format, but then would allow for arrays to be expanded and viewed. There can be many arrays inside of other arrays, which makes Mongo great IMO. I’m currently looking at using it for a business wide error reporting service. A simple API can be written to require just a few mandatory fields, and then allow a “dump” of an array that each developer would deem necessary info to the error.
In my opinion writing your own recursive function to handle the task is nothing complicated and I think it would take you less time than trying to find a ready-made solution and potentially having to adapt it to your needs. This would be using foreach on the array and if there’s a another array in the array then you echo a new table and run the same function feeding it the array (that is - considering you want to nest tables inside tables). Then spicing it up with some javascript to toggle display:none on and off on the nested tables shouldn’t be complicated either.
The recursion its self isn’t that hard. However displaying it in a friendly manner will take some time, for me at least. This seems like a generic task that someone would have come across and might have put out a public solution.
Hm, in this case it seems this is more a css/javascript problem than php. It is similar to displaying muli-level menus except this involves tables. I think first you would need to decide how you want this to look and work for the end user (if you haven’t done so yet) and then try to find a solution. However, I’ve never come across anything like this ready-made.
And then creating and linking a CSS style sheet like
table {
width: 80%;
padding: 0;
margin: 10px;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
/* remove this to stop the centering of the table */
margin: 5px auto 30px auto;
/* ensure that the backround of the table is white */
background-color: #fff;
/* the shadow wrapping around the table. Remove all lines
below if you don't like this effect */
-webkit-box-shadow: 3px 3px 10px 8px rgba(0,0,0,0.4);
-moz-box-shadow: 3px 3px 10px 8px rgba(0,0,0,0.4);
box-shadow: 3px 3px 10px 8px rgba(0,0,0,0.4);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
th {
border: 1px solid #525C67;
background-color: #7B92AD;
color: #fff;
letter-spacing:2px
padding: 5px;
/* the rounded corners wrapping around each cell. Remove next
three lines to have angled corners */
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
/* the shadow wrapping around each cell. Remove all lines
below if you don't like this effect */
-moz-box-shadow: inset -3px -3px 3px #888;
-webkit-box-shadow: inset -3px -3px 3px #888;
box-shadow: inset -3px -3px 3px #888;
}
td {
border: 1px solid #525C67;
color: #274E7D;
padding: 5px;
/* the rounded corners wrapping around each cell. Remove next
three lines to have angled corners */
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
/* the shadow wrapping around each cell. Remove all lines
below if you don't like this effect */
-moz-box-shadow: inset -3px -3px 3px #888;
-webkit-box-shadow: inset -3px -3px 3px #888;
box-shadow: inset -3px -3px 3px #888;
}
And here is a test table so you can decide if you like it:
<table>
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
</tr>
<tr>
<td>This is the first</td>
<td>This is the second</td>
<td>This is the thrird</td>
</tr>
</table>
I wonder if the OP is looking for something like table_class, its 10 year old code now, but I remember contacting the author and rewriting it for (early) PHP5 and using it on some dashboards.