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

Answer 1

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>

Answer 2

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

Answer 3

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>

Answer 4

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>