[Table] Add ability to expand rows on interaction

[vibingopal]

Bug, feature request, or proposal:

Hi Team,

Is it possible to extend the table row on click of the record. For example, a table with more records exist and when the user clicked on particular row, the row should expand and show card with the row information in detail as shown below..

Material : 2.0.0-beta.8 Angular : 4.0.0

[donroyco]

See #5936

Please keep GitHub issues for bug reports / feature requests. Better avenues for troubleshooting / questions are stack overflow, gitter, mailing list, etc.

[vibingopal]

Hi Andrew,

Thank you for adding this as feature. May i know when the feature will be available ?

[andrewseguin]

This will be a lower priority feature that we'll need to incorporate after we've worked on features such as virtual repeat and sticky rows/columns to make sure that it's able to work alongside these higher priority features.

[pantonis]

99% of applications need this feature so I cannot understand why this is a lower priority :(

[andrewseguin]

Virtual repeat and sticky rows/columns are a much higher priority than expanding rows and should be implemented first before bringing in this feature. It's likely that you will be able to create some kind of expanding row UX when rows can be conditionally displayed using the when predicate. #5887

[pantonis]

Ok since I am planning a new project and I need to know dates can you give an approximation of when this is gonna be implemented please?

Hope you understand. Thanks

[pantonis]

@irowbin I know it takes time and that the guys are doing their best. And you can see that from the great result they achieved so far. When you have to plan a project though you need some estimates in order to make your plan and succeed. Since this is the most critical control we are going to use I need to have some estimates.

[jmpreston]

Instead of expanding rows if we can click on a button in the row and go to an item details view, modal or form, that would be good enough for now.

I just started trying to figure this out a few minutes ago and found this active conversation with a Google search. I'm not sure if this is possible, my skills are "limited', but something like this. I have a click event in a button in a row. I need to grab the member.$key, which does display in the second column below with my data, but I haven't figured out how to get the $key (Firebase key) in the click param 'member' yet. Using member.$key and row.$key as a param doesn't work.

  <ng-container cdkColumnDef="edit">
    <md-header-cell *cdkHeaderCellDef> Edit </md-header-cell>
    <md-cell *cdkCellDef="let row"> <button class="badge"
            (click)="goToDetailPage(member)">Edit</button> </md-cell>
  </ng-container>

  <!-- key Column -->
  <ng-container cdkColumnDef="key">
    <md-header-cell *cdkHeaderCellDef> Key </md-header-cell>
    <md-cell *cdkCellDef="let row"> {{row.$key}} </md-cell> // This displays the db key.
  </ng-container>

[vibingopal]

Thanks for the suggestion Jim.. But here data is represented in the form of rows. So on click of particular row data the view should open. For that there should be some link provided between row data and row detail which is not supported in the current package at this moment.

[ghost]

KendoUI widgets are implemented in angular (no jQuery wrapper)..

KendoUI angular datagrid master/details

I am also looking at alternative to material datagrid since it is not polished and ready for real projects (no choice). My project can't wait for material 2 implementations of mater/detail and neither team will venture into developing widgets (no resource to do it)

[jmpreston]

@vibingopal It seems that the row is an object and that there should be some JS way of capturing it and sending the whole data object back to the component code to be parsed there. Is there a row identifier that could be captured somehow. Master/detail is a biggee and it would be nice to figure out a hack until a more elegant solution is provided.

[ghost]

I found another cool open-source UI Platform from Teradata that is built on Angular & Angular Material (Design). It is pretty much material 2 next version. They're not implementing master/detail because material 2 has not included in road-map.

An open-source UI Platform from Teradata

[jmpreston]

For the AM2 Data Table as master - detail I posted my code here: https://stackoverflow.com/questions/45402690/how-to-setup-angular-material-2-data-table-setup-as-master-detail

Easy solution. It isn't the drop-down solution that some posters above have requested.

[irowbin]

I've added expand/collapse row by following an example from here https://plnkr.co/edit/ZL6OnWwVmOCPYetp96XX?p=preview However I am still unable to freeze columns from left/right while horizontal scroll.

For instance here is my snapshot.

[Lakston]

@svstartuplab Since the expandable rows feature is on the backburner I had to implement a modal on row click that does just that, I pass the user's id to my modal and have an API call to get the detailed infos show up in the modal.

[jmpreston]

@Lakston @irowbin Please add your solutions to my Stack Overflow post at https://stackoverflow.com/questions/45402690/how-to-setup-angular-material-2-data-table-setup-as-master-detail.

Nice to collect them on one place that everyone can find easily.

[vibingopal]

@lakston Could you please let me know that you implemented the feature of material2 or you followed @svstartuplab example to implement it.

Thank you

[irowbin]

@svstartuplab it is pretty easy followed by that plnkr link above. 😃

[willshowell]

All, please be aware of @jelbourn's note https://github.com/angular/material2/issues/5936#issuecomment-318513544 about that example plunker (https://github.com/angular/material2/issues/6095#issuecomment-318976369) before you incorporate it.

It works, but will probably be incompatible with future enhancements.

[vibingopal]

@Irowbin, From your example could you please let me know on row click how can you add a card with data. I am not able to add any card on row click.

[irowbin]

@vibingopal According to that plnkr link above, in your md-table

<md-row  *cdkRowDef="let row; columns: displayedColumns; let index=index;" 
          (click)="expandRow(index)"   
          #cdkrow>
 </md-row>

The component.ts

 @ViewChildren('cdkrow', { read: ViewContainerRef }) containers: QueryList<ViewContainerRef>;
 expandedRow: number;
 source: DelegateDatasource; // datasource class

// method
expandRow(index: number) {

        if (this.expandedRow != null) {
            // clear old message
            this.containers.toArray()[this.expandedRow].clear();
        }

        if (this.expandedRow === index) {
            this.expandedRow = null;
        } else {
            const container = this.containers.toArray()[index];
            const factory: ComponentFactory<ChildComponent> = this.resolver.resolveComponentFactory(ChildComponent);
            const messageComponent = container.createComponent(factory);

            messageComponent.instance.myData= this.source.data[index]; // my datasource array property
            this.expandedRow = index;
        }
    }

The child.component.ts

@Component({
    selector: 'data-details',
    templateUrl: './child.component.html' // your html here
})
export class ChildComponent {

    @Input() myData: IMyData;
}

The app.module.ts

 entryComponents: [ChildComponent], // added to entry array
 declarations: [ChildComponent]

[vibingopal]

Thank you.. It can be implemented as well with ngx-datatable

https://github.com/swimlane/ngx-datatable

[irowbin]

I've implemented the mat-menu to mat-table context menu when right click on mat-row

For instance.

[Misiu]

@irowbin any chances You could share that last example as plnkr?

[TejasCMehta]

@irowbin please guide us on how to achieve this functionality and also I like your check box implementation. I am calling API through service so please let me know how to achieve this filter, sorting, expand and action with context-menu as full feature grid.

[andrewseguin]

Expandable rows is now supported by the data table by using the when predicate.

https://plnkr.co/edit/rLtjjMOpEUe8owK8KI2M?p=preview

[pantonis]

@andrewseguin that is great news. If I add a new table in each expandable row do you think this is ok in terms of performance? e.g A big table with clients and for each client expand master row and view client's orders

[andrewseguin]

Unfortunately nested tables are not supported and we don't have plans on changing that.

As for anything else you put in the expansion, performance shouldn't take a hit as long as you only render the content lazily (e.g. with an ngIf)

[Lakston]

Anyone has a working plunkr of the expandable rows ? The plunkr @andrewseguin provided doesn't work anymore, thanks !

An example using the fully featured table (pagination, filters) + expandable rows would be even better because I'm trying to implement this in that context and I really don't get it :)

edit : I managed to reproduce @andrewseguin 's plunkr on stackblitz here

if anyone can manage to make a fully featured table (like the ones on the docs) and adding expandable rows to it I'd be super grateful ! In the meantime if you just want to see how the basic example works the link I provided will hopefully help.

[ykhanbabaei]

It does not work in Angular material 5.0.0-rc0 and Angular 5.0.2

[willshowell]

@ykhanbabaei here's a fork of @Lakston's stackblitz with 5.0.0-rc.1. You should note the following change in the CHANGELOG:

• table:
  • The argument order for the when property of matRowDef and cdkRowDef has been changed from (rowData, index) to (index, rowData) in order to match trackBy.

[shlomiassaf]

@andrewseguin it's clear that forcing developers to duplicate rows just to be able to apply a detail row is upside down...

Since detail row is an important feature we should be able to do it as part of the flow.

The when feature is not suitable for this scenario.... yes you can make it work but it's not easy.

What we actually say here is, there are no details rows but we can duplicate rows to mimic detail rows which is again, wrong.

[andrewseguin]

@shlomiassaf Thanks for the feedback. My goal here wasn't to introduce the when predicate as a solution for this problem, but as a generic solution for when you want to specialize certain rows. It happens to be that this is a workaround for detail rows for now.

We're happy to continue exploring the idea of having a specific flow for adding details to rows. If you have feedback on what you imagine the API would be, we'd love to incorporate it into our discussions around the topic.

Off the top of my head, I wonder if we may want to use the mat-row as a container for some kind of "pre" and "post" elements to prepend/append around the row. The detail could fit into this post area. Thoughts?

[shlomiassaf]

@andrewseguin I have a solution that I was able to implement from the outside using a directive. The directive is set in mat-row (i.e mat-row is the host)

You give that directive a row and a template (which is the detail) and it will render the row details next to the row.

<mat-row *matRowDef="let row; columns: columns;" [cdkDetailRow]="row" [cdkDetailRowTpl]="tpl"></mat-row>

<ng-template #tpl let-element>
  <div>My Detail Row</div>
</ng-template>

The directive's implementation is fairly simple...

because my solution is not native there are some limitations which a native solution can solve.

For example, I require a ng-template instance but a native solution would be able to just take a column name making the detail row template to be set as a cdkColDef...

Also, I forced the open/close triggering to be internal by hooking to the click event of the host. This makes it easy to control the state, I don't need to keep track of whose closed/opened but it means only row clicks open the detail row.

As for your proposal, I think it's actually similar to what I did but native and abstracted. :)

I will post a stack blitz shortly.

[shlomiassaf]

Ok

https://stackblitz.com/edit/angular-material2-expandable-rows-example-rc1-2uowvz

EDIT: Working stackblitz

https://stackblitz.com/edit/angular-material2-issue-qatslc

[ghost]

@shlomiassaf the above works, but expandedDetail column below is redundant, removing it has no impact.

<!-- Expanded Content Column - The detail row is made up of this one column -->
<ng-container matColumnDef="expandedDetail">
  <mat-cell *matCellDef="let detail"> 
    The symbol for {{detail.element.name}} is {{detail.element.symbol}}
  </mat-cell>
</ng-container>

[kuncevic]

@shlomiassaf how would you expand the rows when commpnent renders? just trying to figureout as when change detection is triggering on my component all expanded items gets collapsed which is weird. I think the opened state somehow should be preserved from the model and then the direcitve have to take care of that.

[shairez]

@kuncevic did you mean @shlomiassaf ? 😄
(we're both from the same country though, so it's an easy mistake to make ;)

[spt131]

@shlomiassaf How could i adapt your solution to include a row with the same columns as the main table? I've tried a few things but can't seem to get it to work. The use case is to use the main row as the "total" row and expand to show the details that make up the total but with the same columns.

The expansion sample works great but can't seem to display a simple table row with the same columns.

[skalyanapu-mtuity]

@shlomiassaf How can we track the states of opened and closed rows, tried with playing the vref and based on its length, but unable achieve? , Usecase i'm looking for was only one rows should be in expandable mode, if I want to expand new rows then already opened row as to be closed ?? Can you please suggest something here ...

[landworth]

@skalyanapu-mtuity I have a similar challenge to you above, where only one row should be opened at a time. Did you figure out a way to adapt @shlomiassaf code to achieve this? Thanks

[sainture]

Hi I implemented expandable rows using 'when' predicate and detailRow approach as explained in one of the tables in docs: https://github.com/angular/material2/blob/master/src/demo-app/table/table-demo.html

However, I'm also using pagination and it's now showing double the number of rows. I understand that the detailRow approach requires you to duplicate the rows but is there a way to show correct number of rows in the paginator?

Thanks

[rain4u]

@sainture I hit the same issue using 'when' predicate approach. I ended up using @shlomiassaf 's solution, which works well with pagination.

[sainture]

Thanks @rain4u I tried the solution provided by @shlomiassaf and it seems to be working great! :)

[Guttz]

@andreroggeri This sounds like a good permanent solution. Guessing that this isn't a priority right now though.

[r500]

@shlomiassaf

Below link is not working. Trying expanding table row one at a time. Can you please let us know when this working example will be available?

https://stackblitz.com/edit/angular-material2-expandable-rows-example-rc1-2uowvz

[sainture]

@r500 I understand that the above link is not working but you can still see the code inside app folder. "cdk-detail-row.directive.ts" is the directive that you can just copy and paste in your project and then see "table-basic-example.html" how this directive is used.

[james-schwartzkopf]

I thought I was subscribed to this issue :>(.

The last I'd seen of it was when the 'when' solution was introduced. We were unhappy with the 'when' solution (clogging up the array, needing to animate, open/close indicators, etc). We decided instead of making our table behave like an accordion, we'd make an accordion that looked like a table.

https://stackblitz.com/edit/table-like-mat-accordion?file=app/app.component.html

Now that I've looked at @shlomiassaf's solution, I think that might be cleaner. The stackblitz doesn't run for me ('(SystemJS) Unexpected token <'), but the code looks like a promising direction. Figured I'd still share our accordion solution here in case it helps anyone.

[Misiu]

@james-schwartzkopf thanks for sharing Your solution.

[Mourdraug]

@james-schwartzkopf Ran into this issue once before, solved it by turning one of columns into detail row container and tons of css tweaking, but it seems that you're right, it's easier to turn accordion into table than to extend row of an actual table, thanks for this solution.