Use of rowspan to group hierarchical data

Question

Is it possible to group data (using rowspan as explained here) in a table rendered with angularjs. Data is hierarchical, with state having many counties and each counties has multiple zipcodes. I want a table with only column for state, county, zip etc (so give a rowspan for length of the collection). I am not sure ng-repeat-start and ng-repeat-end can be used to achieve this. Please see the starter template here

 <table>
    <thead>
      <tr>
        <th>State</th>
        <th>County</th>
        <th>Zip</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat='st in states'>
        <td>{{st.name}}</td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>

data

 var oh_counties = [
    {name: "Franklin", zips: [111,222,333,444,555]},
    {name: "Adams", zips: [111,222,333,444]},
    {name: "Allen", zips: [111,222,333]}
    ],
    wi_counties = [
    {name: "Dane", zips: [111]},
    {name: "Adams", zips: [111,222,333,444]}
    ]

    $scope.states = [
      {name: "OH", counties: oh_counties},
      {name: "WI", counties: wi_counties},
      ];

Edit:

A handcrafted version of the desired output is here http://plnkr.co/edit/T7toND0odx6qr8mVC121?p=preview

You could show what you mean by writing some desired output. — Kerstomaat
– Kerstomaat, Commented Jan 14, 2014 at 1:55
@SimonPlus please see it here plnkr.co/edit/T7toND0odx6qr8mVC121?p=preview — bsr
– bsr, Commented Jan 14, 2014 at 3:46

Robert Brooker · Accepted Answer · 2016-09-05 01:56:14Z

22

This is a variant of Holly Cummins' answer. The repeat is moved into the tr with ng-repeat-start and ng-repeat-end to prevent the tbody from being repeated. Also uses a slightly different method to hide the first row.

<tbody>
    <tr ng-repeat-start='st in states'>
      <th rowspan="{{st.counties.length}}">{{st.name}}</th>
      <td>{{st.counties[0].name}}</td>
    </tr>
    <tr ng-repeat-end ng-repeat='county in st.counties' ng-hide="$first">
       <td>{{county.name}}</td>
    </tr>
</tbody>

edited Sep 5, 2016 at 1:56

answered Nov 10, 2014 at 0:11

Robert Brooker

2,59827 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Busata Over a year ago

For correctness, I think this should say st.counties[0].name

Dave Thomas Over a year ago

Great answer. Helped me a ton! I'm late to the party, but, but I rather like ng-if="!$first" to suppress the first cell in the first "following" row, because it keeps the HTML cleaner by not even having the element on the DOM in the first place :)

Robert Brooker Over a year ago

Agreed, that will produce better html, I just like the look on the ng-hide as the code looks a little more readable because it looks so close to saying 'hide the first'

Holly Cummins · Accepted Answer · 2014-07-14 11:27:09Z

9

This variant of KayakDave's answer improves the structuring by pulling the first nested row out to share the <tr> of the header:

<tbody ng-repeat='st in states'>
    <tr>
      <th rowspan="{{st.counties.length}}">{{st.name}}</th>
      <td>{{county[0].name}}</td>
    </tr>
    <tr ng-repeat='county in st. counties' ng-show="$index > 0">
       <td>{{county.name}}</td>
    </tr>
</tbody>

answered Jul 14, 2014 at 11:27

Holly Cummins

11.6k4 gold badges27 silver badges30 bronze badges

Comments

KayakDave · Accepted Answer · 2014-01-14 03:13:55Z

4

Sure. Is something like this what you had in mind:

<tbody ng-repeat='st in states'>
    <td rowspan="{{st.counties.length+1}}">{{st.name}}</td>
    <tr ng-repeat='county in st.counties'>
       <td>{{county.name}}</td>
    </tr>
</tbody>

I kept this example simple, nested 2 deep. But in the fiddle, below, I've got it nested 3 deep (so it includes zip).

demo fiddle

edited Jan 14, 2014 at 3:13

answered Jan 14, 2014 at 2:13

KayakDave

24.7k3 gold badges68 silver badges68 bronze badges

2 Comments

bsr Over a year ago

thanks for the example. But, it is not structured properly. see it with css class applied. plnkr.co/edit/FqCHTodxoJSegw6CySaS?p=preview . The third column is nested within second. Also, I am not sure tr can be nested within td.

KayakDave Over a year ago

A table can be nested in a td- with a tr inside the table- which is why I approached it that way. To create the structure you've added to your question I'd write a custom directive.

Aravind Kumar · Accepted Answer · 2016-03-03 09:37:01Z

0

This may be usefull

<table>
    <tbody ng-repeat='st in states'>
        <tr>
            <th >{{st.name}}</th>
            <td>
                <table>
                    <tr ng-repeat='county in st.counties'>
                        <td>{{county.name}}</td>
                        <td>
                            <table>
                                <tr ng-repeat='zip in county.zips'>
                                    <td>{{zip}}</td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>

    </tbody>
</table>

answered Mar 3, 2016 at 9:37

Aravind Kumar

982 silver badges7 bronze badges

Collectives™ on Stack Overflow

Use of rowspan to group hierarchical data

Edit:

4 Answers 4

3 Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Edit:

4 Answers 4

3 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related