Steve Steve - 1 month ago 16
AngularJS Question

AngularJS expandable table with aligned columns

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:

enter image description here

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.

Answer

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"
  }
]

},...