AngularJS expandable table with aligned columns

Question

With every example I can find of an expandable table using ng-repeat, the expanded row is "separate" content, such as an independent table inside the detail row. I have done many expandable tables using these methods, something like

<tr ng-repeat-start="item in faceted.table.data" ng-init="item.showDetails = false" ng-click="faceted.table.showDetailRow($index)">
        <td>
            <a href="" class="table-row-toggle">
                <i class="nc-icon-mini lg fw arrows-2_small-right " ng-class="{'rotate-90': item.showDetails}"></i>
            </a>
        </td>
        <td>{{item.partner_name}}</td>
        <td>{{item.type}}</td>
        <td>>{{m.merchant_name}}</td>
    </tr>
    <tr class="table-details" ng-repeat-end="item in faceted.table.data" ng-if="faceted.table.detailsShown === $index">
        <td></td>
        <td colspan="7">
            <table class="table table-unstyled">
                <tbody>
                    <tr ng-repeat="m in item.merchants">
                        <td>{{m.merchant_name}}</td>
                        <td>{{m.type}}</td>
                        <td>{{m.state}}</td>
                        <td><img src="images/status.svg" alt="status"></td>
                        <td>{{m.modified_by}}</td>
                        <td>{{m.modified_date}}</td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>

However, what I need to have this time is the "detail" rows have to be part of the main table so the columns align, as in this Axure screenshot:

The gray rows are children of the white rows. I can access the data as in my code example, but cannot make the columns align.

I have tried a few ways, but nothing so far seems to work.

Larry Turtis · Accepted Answer · 2016-10-12 18:00:36Z

1

You can achieve this using ng-repeat-start and ng-repeat-end. The key difference is that your detail objects need to be children of the parent objects, not children of the same object.

<tbody>
  <tr ng-repeat-start="parent in vm.parents">
  <tr class="parent-entry">
    <!-- cells go here ex:{{parent.data}} -->
  </tr>
  <tr class="child-entry" ng-repeat-end ng-if="parent.show">
    <!-- cells go here, ex:{{parent.child.data}}-->
  </tr>
  </tr>
</tbody>

answered Oct 12, 2016 at 18:00

Larry Turtis

1,91614 silver badges26 bronze badges

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

1 Comment

Steve Over a year ago

this gave me the idea to complete this, although the code you have here did not quite work.

kicken · Accepted Answer · 2016-10-12 18:07:47Z

You can use <tbody> tags to create the sections in the table, one for the parent row and one to contain all the child rows. Just make sure the number of columns match between the parent and child sections.

<tbody ng-repeat-start="item in faceted.table.data" ng-init="item.showDetails = false">
    <tr ng-click="faceted.table.showDetailRow($index)">
        <td>
            <a href="" class="table-row-toggle">
                <i class="nc-icon-mini lg fw arrows-2_small-right " ng-class="{'rotate-90': item.showDetails}"></i>
            </a>
        </td>
        <td>{{item.partner_name}}</td>
        <td>{{item.type}}</td>
        <td colspan="4">{{m.merchant_name}}</td>
    </tr>
</tbody>
<tbody ng-repeat-end="item in faceted.table.data" ng-if="faceted.table.detailsShown === $index">
    <tr ng-repeat="m in item.merchants">
        <td></td>
        <td>{{m.merchant_name}}</td>
        <td>{{m.type}}</td>
        <td>{{m.state}}</td>
        <td><img src="images/status.svg" alt="status"></td>
        <td>{{m.modified_by}}</td>
        <td>{{m.modified_date}}</td>
    </tr>
</tbody>

Steve · Accepted Answer · 2016-11-02 13:38:10Z

FWIW, I finally got this to work by starting with the answers from others and working it into this:

        <table class="table table-datatable table-hover table-border-bottom">
        <thead>
            <tr>
                <th>&nbsp;</th>
                <th>Partner</th>
                <th>Merchants</th>
                <th>Modified</th>
                <th>Status</th>
            </tr>
        </thead>

        <tbody>
            <tr ng-repeat-start="item in mob.dashboardTableData">
                <td>    
                    <i class="nc-icon-mini lg fw arrows-2_small-right " ng-class="{'rotate-90': item.showDetails}"></i>
                </td>
                <td class="text-nowrap">{{item.partner_name}}</td>
                <td><span ng-repeat="m in item.merchants">{{m.merchant_name}}<font ng-if="!$last">, </font></span></td>
                <td>{{item.modified_date}}<br>{{item.modified_by}}</td>
                <td>{{item.status}}</td>
            </tr>
            <tr class="table-details" ng-repeat-end ng-repeat="m in item.merchants">
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>{{m.merchant_name}}</td>
                <td>{{m.modified_date}}<br>{{m.modified_by}}</td>
                <td>{{m.status}}</td>
            </tr>
        </tbody>
    </table>

where the data is structured like so:

  {
"id": 1,
"partner_name": "Gap Industries",
"type": "Partner",
"state": "New",
"status": 2,
"modified_by": "John Smith",
"modified_date": "2016-04-10 12:37PM",
"merchants": [
  {
    "id": 1,
    "merchant_name": "Gap",
    "type": "Merchant",
    "state": "New",
    "status": 2,
    "modified_by": "John Smith",
    "modified_date": "2016-04-10 12:37PM"
  },
  {
    "id": 2,
    "merchant_name": "American Eagle Outfitters",
    "type": "Merchant",
    "state": "New",
    "status": 2,
    "modified_by": "John Smith",
    "modified_date": "2016-04-10 12:37PM"
  },
  {
    "id": 3,
    "merchant_name": "Old Navy",
    "type": "Merchant",
    "state": "New",
    "status": 2,
    "modified_by": "John Smith",
    "modified_date": "2016-04-10 12:37PM"
  }
]

},...

Collectives™ on Stack Overflow

AngularJS expandable table with aligned columns

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related