Components: [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.

Edit
(click)="goToDetailPage(member)">Edit

  <!-- 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.

[nickkhan]

@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.

[shlomiassaf]

Turning an accordion into a table might work for some scenarios but I wouldn't recommend it...

First, an accordion is not designed for that... 2nd new feature coming will not work (e.g virtual repeat)

I suggest using the table itself, most of the things you want to do are already doable...

[shlomiassaf]

Posted an updated demo, now working
https://stackblitz.com/edit/angular-material2-issue-qatslc

[Ukmandal]

Cannot read property 'toArray' of undefined???

.html

        <ng-container matColumnDef="checkbox">
            <mat-header-cell *matHeaderCellDef>
                <mat-checkbox (change)="toggleCheckAll($event)" [indeterminate]="selected.length>0 && employees.length !==selected.length "></mat-checkbox>
            </mat-header-cell>
            <mat-cell *matCellDef="let row">
                <mat-checkbox [checked]="isAllChecked" (change)="onRowSelected($event, row.id)"></mat-checkbox>
            </mat-cell>
        </ng-container>

        <ng-container matColumnDef="id">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Id </mat-header-cell>
            <mat-cell *matCellDef="let row"> {{row.id}} </mat-cell>
        </ng-container>

        <ng-container matColumnDef="userName">
            <mat-header-cell *matHeaderCellDef mat-sort-header> UserName </mat-header-cell>
            <mat-cell *matCellDef="let row"> {{row.userName}} </mat-cell>
        </ng-container>

        <ng-container matColumnDef="firstName">
            <mat-header-cell *matHeaderCellDef mat-sort-header> FirstName </mat-header-cell>
            <mat-cell *matCellDef="let row"> {{row.firstName}} </mat-cell>
        </ng-container>

        <ng-container matColumnDef="lastName">
            <mat-header-cell *matHeaderCellDef mat-sort-header> LastName </mat-header-cell>
            <mat-cell *matCellDef="let row"> {{row.lastName}}</mat-cell>
        </ng-container>

        <ng-container matColumnDef="designation">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Designation </mat-header-cell>
            <mat-cell *matCellDef="let row"> {{row.designation}} </mat-cell>
        </ng-container>

        <ng-container matColumnDef="department">
            <mat-header-cell *matHeaderCellDef mat-sort-header>Department </mat-header-cell>
            <mat-cell *matCellDef="let row"> {{row.department}} </mat-cell>
        </ng-container>

        <ng-container matColumnDef="address">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Address </mat-header-cell>
            <mat-cell *matCellDef="let row"> {{row.address}} </mat-cell>
        </ng-container>

        <ng-container matColumnDef="role">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Role </mat-header-cell>
            <mat-cell *matCellDef="let row"> {{row.role}} </mat-cell>
        </ng-container>

        <ng-container matColumnDef="edit">
            <mat-header-cell *matHeaderCellDef>Edit</mat-header-cell>
            <mat-cell *matCellDef="let row">
                <button mat-raised-button (click)="openConfirmationEdit(id)">Edit</button>
            </mat-cell>
        </ng-container>

        <ng-container matColumnDef="delete">
            <mat-header-cell *matHeaderCellDef>Delete</mat-header-cell>
            <mat-cell *matCellDef="let row">
                <button mat-raised-button (click)="openConfirmationDelete(id)">Delete</button>
            </mat-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row class="animated" *matRowDef="let row; columns: displayedColumns; let index=index"   (click)="expandRow(index)"  #cdkrow>
        </mat-row>
    </mat-table>

.ts
displayedColumns = ['checkbox', 'id', 'userName', 'firstName', 'lastName', 'designation', 'department', 'address', 'role', 'edit', 'delete'];
expandedRow: number;
dataSource: MatTableDataSource;

selection = new SelectionModel<number>(true, []);
private containers: QueryList<ViewContainerRef>


@ViewChildren('cdkrow', { read: ViewContainerRef })
@ViewChild(MatSort) sort: MatSort;
@ViewChild(MatPaginator) paginator: MatPaginator;

expandRow(index: number) {
if (this.expandedRow != null) {
this.containers.toArray()[this.expandedRow].clear();
}
if (this.expandedRow === index) {
this.expandedRow = null;
} else {
const container = this.containers.toArray()[index];
const factory: ComponentFactory = this.resolver.resolveComponentFactory(ExpansionComponent);
const messageComponent = container.createComponent(factory);
messageComponent.instance.childData = this.dataSource.data[index];
this.expandedRow = index;
}
}

[jstuth]

Greetings,
i have a problem with the "matRipple" on a table row. I've tried the code from @shlomiassaf which works fine. But when clicking on a row the entire content of my row falls off the bounds of the table columns.
You can see a similar behavior in the plunkr example posted by @shlomiassaf.
By removing "matRipple" from mat-row everything works fine.
Can i fix this via CSS somehow?

[EreckGordon]

@shlomiassaf thanks for the updated demo! Any idea what would need to be changed to only allow one detail panel open at a time? ie: if one is open, change that opened state to closed, then open what was clicked.

[shlomiassaf]

@EreckGordon That's quite a simple implementation, but a common one so I've added it to the example.

Basically, the directive itself can be extended with some more things commonly required.

The solution is to add an event to the directive, emitting when toggled.
In the parent component, keep track of prev toggled row and close on next opened row.

[EreckGordon]

Thanks!

[shlomiassaf]

@Triipaxx I don't understand what you refer to....

[Lakston]

@shlomiassaf I think he's referring to the ripple that is not properly working on your example, the ripple is not contained in the row but ripples of the entire table, see this gif for an idea :

The problem can be fixed by changing the overflow: initial; to overflow: hidden; in the element-row css rules

I forked your stackblitz with a fix here

Thanks for your example none the less, and for updating it 👍

[jstuth]

Well no, that's not exactly what i was referring to.

@Lakston Your problem can be solved by added the following to your CSS:
.mat-row, .mat-header-row { position: relative; }

But your gif shows my issue very well. If you look at the "Name" and "Weight" columns, you can see that the row content of these two columns shifts to the right while the ripple is animating, and jumps back to it's initial position afterwards.
In my table it's been shifting to the left.
By removing matRipple from mat-row this kind of" content shifting" dos not appear. What could be the reason for this weird issue?

[jstuth]

@Lakston I have to apologize. Your are right, what you have mentioned is an issue of the demo. This is probably related to the material version 6.0.0-rc1.

[jstuth]

Ok, i think i got a fix for my issue.
Background information:
I have a mat-table with 4 columns (name, city, state, action). The 4th column has a fixed size of 40px, defined using: mat-cell:last-child{ width: 40px; min-width: 40px; max-width: 40px}. This was working until the mat-ripple effect started, than it ignores my CSS and start's to grow. Since this only happens on the clicked row, it looked absolutely odd...
I found out, that the action cell had a new generated CSS class attached ".mat-column-action".
So i changed my CSS class to the following: .mat-cell.mat-column-action.
And now my CSS always applies and the action cell is not growing anymore and the content won't move around.

I hope everyone understands what i was trying to say. English is not my native tongue. ;)

[yogeshgadge]

Another simple implementation:
Uses Mat Expansion panel and extends MatRow.

@Component({
  selector: 'my-master-detail-row',
  template: `
    <mat-expansion-panel>
      <mat-expansion-panel-header class="mat-row">
        <ng-container cdkCellOutlet></ng-container>
      </mat-expansion-panel-header>
      <div class="ief-detail-row">
        <ng-content></ng-content>
      </div>
    </mat-expansion-panel>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  exportAs: 'matRow',
  preserveWhitespaces: false,
})
export class MyMasterDetailRowComponent extends MatRow  {
  @HostBinding('class') clazz = my-master-detail-row';
}

and use it like so

    <my-master-detail-row *matRowDef="let row; columns: displayedColumns;">
        <div>this is a test</div>
    </my-master-detail-row>

[DVLFocalor]

@yogeshgadge I tried your solution but i have a problem with the header (not correctly aligned with the data). How did you handle the header?

[yogeshgadge]

@DVLFocalor Add a column to the table in which you want to add this row. ( Use width 64px and no header text.)

[arunredhu]

I implemented the expanded rows with when predicate but sorting on the table behaving unexpectedly like Rows are not maintaining order. I am using Angular 6.0.0 and material 6.0.0

[EreckGordon]

@Triipaxx Since upgrading to Angular6/Material6 I've started experiencing the jank you described (and that the gif shows -- matRipple shifting the contents to the right), and cannot quite understand which piece of css you changed. For reference, this is my css that was working 100% fine in Angular5:

.user-management-table-container {
  display: flex;
  flex-direction: column;
  min-width: 30px;
}

.user-management-table-header {
  min-height: 64px;
  padding: 8px 24px 0;
}

.mat-form-field {
  font-size: 14px;
  width: 100%;
}

.mat-header-cell {
  font-size: 20px;
}

.user-row {
  position: relative;
}

.darken-on-hover:hover {
  background-color: rgba(32, 32, 32, 0.2)
}

what do you recommend changing?

edit: here's the only instance in my html that uses matRipple. If I remove matRipple, problem goes away, but then I lose the nice ripple:

    <mat-row *matRowDef="let row; columns: displayedColumns;" matRipple class="user-row darken-on-hover" [cdkDetailRow]="row" [cdkDetailRowTpl]="expandedDetails" (toggleChange)="onToggleChange($event)"></mat-row>

[jstuth]

@EreckGordon
Well, i've managed to get rid of this, by explicitly setting the size of one cell. In my example i have an action cell which contains buttons for various actions on that object represented by the row.
By default i'm setting this in CSS by addressing the nth-child, or last-child, element of mat-header-cell or mat-cell. But in this case it wasn't working when the ripple effect is animating.
So i've checked the DOM and realized, that each cell (header cell also) has a new CSS class attached, which is generated by the column id and it's designation, e.g. "mat-cell-action". This class was also available during the ripple effect. So i changed my CSS to edit this particular new CSS class and it works properly.
Maybe it helps, when you try to define size properties of a single cell (maybe the last one as well), with something more flexible instead of a static width like i do.

[literalpie]

@yogeshgadge 's extension does not work for me. All cell data gets put in the header when I replace a working mat-row with my-master-detail-row

edit: Figured it out! CdkTableModule must be imported for it to work (because CdkCellOutlet is used)

[antontruong]

Hi,

@Lakston I tried your corrected version, but got at 'ng build' these warnings:

WARNING in ./src/app/app.component.ngfactory.js
101:165-173 "export 'ɵf23' (imported as 'i13') was not found in '@angular/material/menu'

WARNING in ./node_modules/@angular/material/menu/typings/index.ngfactory.js
20:694-701 "export 'ɵd23' (imported as 'i1') was not found in '@angular/material/menu'

WARNING in ./node_modules/@angular/material/menu/typings/index.ngfactory.js
49:191-198 "export 'ɵf23' (imported as 'i1') was not found in '@angular/material/menu'

WARNING in ./src/app/app.component.ngfactory.js
63:1142-1150 "export 'ɵf23' (imported as 'i13') was not found in '@angular/material/menu'

WARNING in ./node_modules/@angular/material/menu/typings/index.ngfactory.js
68:152-159 "export 'ɵf23' (imported as 'i1') was not found in '@angular/material/menu'

WARNING in ./src/app/app.component.ngfactory.js
74:165-173 "export 'ɵf23' (imported as 'i13') was not found in '@angular/material/menu'

WARNING in ./src/app/app.component.ngfactory.js
85:165-173 "export 'ɵf23' (imported as 'i13') was not found in '@angular/material/menu'

WARNING in ./src/app/app.module.ngfactory.js
92:5349-5357 "export 'ɵd23' (imported as 'i40') was not found in '@angular/material/menu'

Anybody any ideas?

[Lakston]

I just tested my link and it works, maybe there was an error on Stackblitz's side when you tried ?

I'll paste it again here just in case.

[antontruong]

Hi,

yes you are right. It worked for. I had to rm node_modules and do a 'npm i' again.

Everything works. Great work thank you.

[antontruong]

Hi,

yes you are right. It worked for me. I had to rm node_modules and do a 'npm i' again.

But now I get this error:

this.openedRow is undefined

Everything works: My bad, I had to remove node_modules and reinstall the deps.

[Misiu]

@Lakston did You noticed that second and third column content is moving when You expand/collapse row?

Do You know how this could be fixed?

[Lakston]

I did and no I haven't looked into it, this was just a proof of concept.

[badrinath389]

How to proceed with expanding all rows at a time with the above example @Misiu @Lakston

[kal93]

the detail row directive example doesn't seem to work when used with material's native table usage.It adds the template as a cell as opposed to row.
https://stackblitz.com/edit/angular-material2-issue-vrnin6?file=app%2Ftable-basic-example.css
@shlomiassaf

[rdelriods01]

@james-schwartzkopf I used your solution in a previous project, but now I want to update that project to Angular 7 and I have difficulties with your library datasource-utils.ts in functions sortRows and paginateRows. I supposed is due to the new rxjs version. Are you still working in your solution?

[nareshravlani]

@Lakston did You noticed that second and third column content is moving when You expand/collapse row?

Do You know how this could be fixed?

remove matRipple from mat-row. It will solve the issue. But it will remove animation as well. If you can live without animation, it will work.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}