CODEWITHSUNDEEP
angularexpandablemat-table
Flash
Flash

Reputation: 1014

Mat Table Expandable Rows Angular 7

Is there way to disable row expansion on a specific column. Generally if you click on any part of a row the it expands. But say one column is a comment section, you wouldn't want the row to expand when the user clicks in the input field. Like in this example. How do you prevent the row from expanding when clicking on say the position column: https://stackblitz.com/angular/gqvrlgbeqkv?file=app%2Ftable-expandable-rows-example.ts

Upvotes: 0

Views: 13288

Answers (3)

Kiril1512
Kiril1512

Reputation: 3621

Yes you can use Angular Material or other Design components for Angular if you search more.

See this for example: Expansion Panel | Angular Material

Update: you can try use $event.stopPropagation as said in this solution: Angular Material 2 Table Mat Row Click event also called with button click in Mat Cell

Upvotes: 1

coreuter
coreuter

Reputation: 3572

In your example Stackblitz the code which expands a row is set on the row definition:

...
<tr mat-row *matRowDef="let element; columns: columnsToDisplay;"
  class="example-element-row"
  [class.example-expanded-row]="expandedElement === element"
  (click)="expandedElement = expandedElement === element ? null : element">
</tr>
...

In order to have the row only expand if the user clicks on a specific column (or in your case not to expand if a specific column is clicked) you need to move the onClick function and the necessary css to those columns which should expand, e.g.

    ...
    <!-- Weight Column -->
    <ng-container matColumnDef="weight">
        <th mat-header-cell mat-sort-header *matHeaderCellDef> Weight </th>
        <td mat-cell *matCellDef="let element" class="example-element-row" [class.example-expanded-row]="expandedElement === element"
         (click)="expandedElement = expandedElement === element ? null : element"> {{element.weight}} </td>
    </ng-container>
    ...

I've modified your example to not expand/collapse if the position column is clicked: Stackblitz

PS: for better maintainability you should adjust the css class names etc.

Upvotes: 5

Chellappan வ
Chellappan வ

Reputation: 27293

Use pointer events none

The pointer-events property defines whether or not an element reacts to pointer events.

create a Class with pointer-events: none property then use ngClass to add dynamically

<ng-container matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay">
        <th mat-header-cell *matHeaderCellDef> {{column}} </th>
        <td mat-cell *matCellDef="let element"
        [class.disable]="element[column] == 'Hydrogen' || element[column] == '1.0079' 
        || element[column] == 1 ||element[column] == 'H'">  {{element[column]}} </td>
</ng-container>

Example:https://stackblitz.com/edit/angular-fpp7fx

Upvotes: 1

Related Questions