colspan/rowspan in responsive mode

[fmunafo]

Have a look at this code, in responsive mode (taken from w3schools, example on rowspan):

  <tr>
    <th>Month</th>
    <th>Savings</th>
    <th>Savings for holiday!</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
    <td rowspan="2">$50</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>

What do you think about it? Should the third th be shown also in the second row? Maybe yes, but I'm not so sure.

[awerlang]

Yeah, I'm afraid repeating the row is the only reasonable alternative.

To support it I would say replicate manually the td in the tr below and hide in non responsive mode, somehow. WDYT?

[fmunafo]

I agree with you, I haven't had no other idea. But I think it will not be so easy to implement, there could be a lot of rowspan, and colspan, in the real world. Anyway, I'll help you with intensive tests!

[awerlang]

I think even if support for this is implemented on the directive, it would be hard to benefit from it because it would require to structure data around this presentation concern. Possible to be done but I'm not sure if people would want to do this.

I'll leave it open if anyone would like to step in to implement.

[fmunafo]

The aim is not to structure data in order to have a "right" responsive presentation, but exactly the opposite. What you say could happen if I should add a td and hide it in responsive mode. On the contrary, the table showed above, a tipical html table, should remain unchanged so that I only need to add the directive to the tableelement.

[awerlang]

In a table with a static set of rows, we would end up having a structure like this:

  <tr>
    <th>Month</th>
    <th>Savings</th>
    <th>Savings for holiday!</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
    <td rowspan="2">$50</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
    <td responsive-show>$50</td>  <!-- INSERT HERE -->
  </tr>

Notice an artificial td inserted. The directive responsive-show would hide it on a desktop device. This td could be even automatically inserted but because it is a static table is not a big deal if we had to have it on the markup, IMO.

This scenario is at least possible to enable.

Then there's the dynamic table:

  <tr>
    <th>Month</th>
    <th>Savings</th>
    <th>Savings for holiday!</th>
  </tr>
  <tr ng-repeat="item in list">
    <td>{{item.month}}</td>
    <td>{{item.savings}}</td>
    <td rowspan="???" responsive-show="???">{{item.holiday}}</td>
  </tr>

This is the scenario I was refering to the other day. And of course blends of these two structures. I guess we require more insight into this. How would people consume, etc.

I don't like having a half baked concept, that is, fail to cover other, perhaps common use cases. Supporting all scenarios would require much more effort to design and implement.

[fmunafo]

Hi,
I've just noticed that people working on Bootstrap 4 have developed a new class, table-reflow, in order to do something very similiar to angular-responsive-table.
I also noticed that they warned regarding the same issue, namely tables with colspan and/or rowspan:
http://v4-alpha.getbootstrap.com/content/tables/#reflow

[awerlang]

This new table-reflow doesn't seem to me much helpful for a responsive table, the resulting layout, requirements...but I'll say they would be mutually exclusive, this component and bootstrap's one.