Three times grouped by tabular data - how to display?

Question

I need to display a bunch of data in a table on a website as part of a report. The problem is that there is a bunch, and it needs to be visually grouped.

Each piece of data is the "use" of the item and has a date (representing when it was used), store number (corresponding to the store it uses), item name (item that was used) and quantity (quantity of item used).

The user will be able to either group by item, or store or store, and then the item. Behind the scenes I will also group by date.

The report should summarize both the position / storage (depending on the group-by option) and the date and amount of the amounts.

The fact is, I'm not sure how to display it. The best I can come up with now is something like

++------+------+------+------++-----+ || date | date | date | date || sum | +-----------+--------------||======+======+======+======||=====+---+ | Item Name | Store Number || 1 | 2 | 3 | 4 || 10 | ^ | | +--------------||------+------+------+------||-----|---| | | Store Number || 5 | 6 | 7 | 8 || 26 | # | | +--------------||------+------+------+------||-----| # | | | Store Number || 9 | 10 | 11 | 12 || 42 | # | | +--------------||------+------+------+------||-----| | | Total || 15 | 18 | 21 | 24 || 78 | | +==========================++===========================++=====| | | Item Name | Store Number || 1 | 2 | 3 | 4 || 10 | | | +--------------||------+------+------+------||-----| | | | Store Number || 5 | 6 | 7 | 8 || 26 | | | +--------------||------+------+------+------||-----| | | | Store Number || 9 | 10 | 11 | 12 || 42 | | | +--------------||------+------+------+------||-----|---| | Total || 15 | 18 | 21 | 24 || 78 | v | +==========================++===========================++=====+---+ | < | #### | > | +---------------------------+ 

To group by item, save or switch "Item Name" to "Save Number" for the group via repository, then item.

The date column (more than four in total) will scroll left / right, and items / stores will scroll up / down so that the table is on one page. In other words, the date headers are frozen vertically in place, and the item name, store numbers, and amounts are frozen horizontally.

The problem is implementation: how do I present this in HTML !?

Best question: is there a better way?

What is your advice on resolving this issue? (desirable, elegant and easy)

Answer 1

I think the best solution is to group data by elements, for example, the following image http://img51.imageshack.us/img51/6434/layoutsv.png

The HTML will be something like the following:

 <div style="overflow: auto; width: 100%; height: 500px"> <h1>Item 1</h1> <table> <tr> <th></th> <th>Date</th> ... ... </tr> <tr> <th>Store #</th> <td>1</td> ... ... </tr> ... ... </table> <h1>Item 2</h1> ... ... </div> 

For a fixed column, you should look here: HTML table with fixed headers and fixed column?

Answer 2

This is doable, but I will not do it directly in html. No matter how complicated it may be, first of all, it will be difficult to change later, when the business needs changes.

If you end up trying to do this, I would recommend exploring the concepts of folded and embedded tables, scrolling through divs and fixed positions / overlapping divs. However, it will not be fun to try to make something so complex work not only in one type of browser.

I would recommend learning some higher level tools. ASP.NET has some good features for this if you still want to follow some manual approach. They have built-in controls that can be changed in the code, or you can encode tables (as opposed to markup) and still use the event model to query / re-query the database.

Even better, you can look at a reporting tool such as SSRS (and there are many others), or even MS Access to meet basic needs.