[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 #5936 (comment) about that example plunker (#6095 (comment)) 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.

[Ukmandal]

Cannot read property 'toArray' of undefined???

.html
<mat-table #table [dataSource]="dataSource" matSort>

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

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