StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POFor the Web UI gurus
text
Body
copied!<p>I finally reached the point in my web app where implementing simple requirements is becoming overwhelming. I'm guessing it's time for a nice refactoring or a simple garbage and redo.</p> <p>Here are the simple requirements I need to implement on a table: </p> <p>1) make the columns sortable 2) freeze the 2 header rows and first 3 columns</p> <p>Now let me explain why it got so complicated. The table isn't a simple 2 dimensions table. The first 3 columns are name, email and role after that there is an undefined amount of columns representing 3 types of data per day. In other words the user will define how many days of data he wants and each day is going to be represented by 3 columns that we'll call data1, data2 and data3. </p> <p>An unskilled ASCII representation would be like that:</p> <pre><code> 01/01/1970 01/02/1970 total name email role data1 data2 data3 data1 data2 data3 data1 data2 data3 toto t@t.com boss 23 test 54 10 test1 54 </code></pre> <p>This is a very poor representation but that should give you a vague idea of what the output should look like. So I need to display the dates in the first row, but 3 columns offset, then the headers where the 3 first headers are fixed but the following columns are repetitions of the same 3 headers, one for each day and finally I need to put all the data in the right place....</p> <p>Right now I'm getting this to display correctly (no sorting and no freeze though) using a JSP and a custom data structure coming from the controller that I iterate through in different ways to display all the elements.</p> <p>Now you probably start to understand my headache... with so many things custom made and maybe not necessarily done the proper / efficient way how would I go to add those new features? Sorting and Freezing?</p> <p>I did look at some jquery datagrids and other javascript components but none of them seemed flexible enough to allow for 2 rows of headers with the 2nd row grouping based on the first row. </p> <p>Any idea?</p> <p>Thanks.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload