Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Use of rowspan to group hierarchical data

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

like image 664
bsr Avatar asked Jan 14 '14 01:01

bsr


People also ask

When to use rowspan and colspan?

The rowspan and colspan are the attributes of <td> tag. These are used to specify the number of rows or columns a cell should merge. The rowspan attribute is for merging rows and the colspan attribute is for merging columns of the table in HTML.

Can rowspan and colspan be used together?

Of course, you can mix colspan and rowspan to get a range of various tables. Example 4-13 demonstrates a mix of column and row spanning.

What does Rowspan do in HTML?

The rowspan attribute specifies the number of rows a cell should span.

How do I make multiple lines in one cell in HTML?

Cells within HTML tables can span multiple rows and multiple columns. The cell default is one row and one column. However, with the ROWSPAN attribute a cell can span more than one row, and with the COLSPAN attribute a cell can span more than one column.


2 Answers

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>
like image 50
Robert Brooker Avatar answered Sep 22 '22 21:09

Robert Brooker


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>
like image 9
Holly Cummins Avatar answered Sep 23 '22 21:09

Holly Cummins