Recursive HTML Tables

[K. Wolfe]

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.

Anyone know of anything such as this pre-built?

[StarLion]

how would the data be coming in to the file? I'm not familiar with Mongo's connectors and return structure...

[K. Wolfe]

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.

[StarLion]

So it comes in as a JSON which can be flipped into a regular array with json_decode, and then parsed as any normal array would?

[K. Wolfe]

So it comes in as a JSON which can be flipped into a regular array with json_decode, and then parsed as any normal array would?

JSON is the format of the db, but not the PHP return. It returns an object, which can be converted to a normal array.

[cpradio]

Can you provide a var_dump() of that object once PHP has it?

[K. Wolfe]

Given the example above, and after conversion to an array, it'll look as such:

$result = array(
    "result" => array(
        "_id" => "disudfh93h394530dj",
        "f_name" => "kyle",
        "l_name" => "wolfe",
        "forums_liked" => array(
            "PHP", 
            "Databases & MySQL", 
            "General Web Development & Application Design Issues"
        )
    )
);

I know what's involved in writing a recursive function to handle things such as this, but I was hoping that someone already had a solution for this.

[StarLion]

So... do a normal recursive Array walk on the array?

function tableize($in) {
 echo "<table>";
 foreach($in AS $key => $value) {
  if(is_array($value)) {
   echo "<tr><td>$key:".tableize($value)."</td></tr>";
  } else {
   echo "<tr><td>$key: $value</td></tr>";
  }
 }
 echo "</table>";
}

tableize($result); 

[Lemon Juice]

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.

[K. Wolfe]

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.

[Lemon Juice]

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.

[ServerStorm]

Being a good programmer you already know how to walk the object, but using something like @StarLion ; 's code

function tableize($in) {
 echo "<table>";
 foreach($in AS $key => $value) {
  if(is_array($value)) {
   echo "<tr><td>$key:".tableize($value)."</td></tr>";
  } else {
   echo "<tr><td>$key: $value</td></tr>";
  }
 }
 echo "</table>";
}

tableize($result); 

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>

The color scheme is this: http://colorschemedesigner.com/#3C51Tw0w0w0w0

You can play around with different schemes although blue is generally the most respected for business crowd.

I don't know if this helps but it was worth a try

Steve

[Cups]

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.

[K. Wolfe]

For anyone stumbling across this thread in the future, I'm going to be implementing this: http://trirand.com/blog/jqgrid/jqgrid.html#