some collapsible content for each row, is it possible ?

[shrutiaggarwal3012]

Ca we have collapsible content for each row?

[daniel-nagy]

You want to collapses an entire row? I don't know that this would be a high priority for this module.

[shrutiaggarwal3012]

I mean to say extra content can be collapsible for each row, just like nested table.

[daniel-nagy]

I'm not sure what you mean, can you provide a link to an explanation of this feature or a demo? If you just want to conditionally show more content in a cell you can use ng-if or ng-show.

[stavro]

Here is a basic example of what @shrutiaggarwal3012 is referring to:

• http://www.bootply.com/fdTMNTiLis
• http://jsfiddle.net/headwinds/zz3ch/

An expandable section underneath each row which may contain additional details. Not necessarily in one particular cell, but across the entire row.

[daniel-nagy]

This can probably be achieve pretty trivially using ng-show or ng-if on a table row and putting a button or icon in the first column of the row above it.

<tr>
  <td>
    <md-button ng-click="showMore = !showMore">Show More</md-button>
  </td>
  ...
  <td></td>
</tr>
<tr ng-show="showMore">
  <td></td>
  ...
  <td></td>
</tr>

Making it animate nicely may be less trivial. I'm not sure if this has a place in this module or not. If you are using auto row selection you will probably want to stop propagation when the cell is click so the row is not selected.

[elincognito]

@daniel-nagy i tried the aproach you refer, but note that that leads to an error in md-data-table.js:605:28

Due to this line _this.tokens = ngRepeat.split(/\s+/);

because there is no ngRepeat in the second tr

Ultimately i solved it by adding a fake ngRepeat ng-repeat="i in []", shouldn't the code check if ngRepeat is null ?

heres the html related

  ...
<tbody>

                <tr ng-repeat="plan in data.data">
                    <td>{{plan.name}}</td>
                    <td>{{plan.description}}</td>
                    <td>{{plan.course.name}}</td>
                    <td>{{plan.years}}</td>
                    <td>{{plan.type}}</td>
                    <td>
                        <md-switch
                            aria-label="{{'Toggle enabled/disabled' | translate}}"
                            ng-change="toggleActive(plan)"
                            ng-model="plan.active"></md-switch>
                    </td>
                    <td style="text-align:right">
                        <md-button ng-click="showDialog($event, plan)" aria-label="{{'Edit' | translate}}">
                            <ng-md-icon icon="edit"></ng-md-icon>
                        </md-button>
                    </td>


                </tr>

                <tr ng-show="showMore">
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>

                </tbody>
...

[JDqv]

@daniel-nagy Maybe implementing simple ng-repeat-start / ng-repeat-end support could solve @forcewill mentioned problem plus expand all sorts of possibilities with multiple rows per iteration.

[elincognito]

@JDqv actually i end up using ng-repeat-start/end however i still get warnings Please use ngRepeat to enable row selection. md-data-table.js:141 Column ordering without ngRepeat is not supported.

it would be great if md-data-table supported ng-repeat-start / ng-repeat-end like @JDqv mentioned since without it i cannot have selection or ordering working

Edit: Also when using ng-repeat-start/end column selection won't work, we really need that ng-repeat-start/end support

[johnsonreyliu]

has anyone worked out a way to do this?