0

Is it possible to add a drop shadow to the 1st column of an Angular Material table?

I have tried a couple approaches with ::ng-deep or adding classes, but without much success.

Below is my basic code. The right border via the CSS shows in the table in the 1st column, but not the shadow. And the moment I start scrolling to the right, the border disappears (my 1st column is sticky).

I would like to add a drop shadow to the 1st column, that will not be removed on scrolling.

CSS

.column-shadow {
  border-right: 1px solid $af-pinkish-grey !important;
  box-shadow: 3px 3px 5px rgba(68, 68, 68, 0.6) !important;
}

HTML

<!-- action buttons -->
<ng-container matColumnDef="select" sticky>
  <th mat-header-cell *matHeaderCellDef>
    Action
  </th>
  <td
    [ngClass]="'column-shadow'"
    mat-cell
    *matCellDef="let row; let index = index"
  >
    <!-- Select record -->
    <mat-checkbox
      color="primary"
      (click)="$event.stopPropagation()"
      (change)="selectRecord($event.checked, index)"
      [checked]="selection.isSelected(row)"
      [aria-label]="checkboxLabel(row)"
    >
    </mat-checkbox>

    <span class="delete-edit-row">
      <!-- Delete single record -->
      <a
        class="action-button"
        mat-button
        (click)="deleteSingleRecord(index)"
        ><img
          class="close-button-image"
          src="../../../assets/images/trashgrid.svg"
      /></a>
    </span>
  </td>
</ng-container>
onmyway
  • 1,435
  • 3
  • 29
  • 53
  • 1
    I think it's only use `class="column-shadow"` both in td and th, see a [fool example](https://stackblitz.com/edit/angular-c43p7f?file=src%2Fapp%2Ftable-basic-example.html) – Eliseo Oct 24 '21 at 13:36

1 Answers1

-1

Edit

Your way of applying css seems correct. For me the only reason it doesn't apply the css could be

  1. My old answer
  2. Your css not being applied at all because of the shadow-dom

Shadow dom fix

Please, try adding your css in a global scope, for example in a styles.scss file that is imported in the root of your project.

If it works, you shall try the remove the shadow dome of your component by adding encapsulation: ViewEncapsulation.None to your @component directive.

Old

It seems like you aren't using [ngClass] properly. If you're trying to add a class, then do [class] and not [ngClass].

this answer did explained the difference between the both but basically.

But you should change your code to this one.

 <td
    [class.column-shadow]="true"
    mat-cell
    *matCellDef="let row; let index = index"
  >
  <!-- Or -->
  <td
    class="column-shadow"
    mat-cell
    *matCellDef="let row; let index = index"
  >
  <!-- Or -->
  <td
    [ngClass]="{'column-shadow': true}"
    mat-cell
    *matCellDef="let row; let index = index"
  >

[ngClass]

NgClass should receive an object with class names as keys and expressions that evaluate to true or false. extra-sparkle is the key and isDelightful is the value (boolean).

<div [ngClass]="{'column-shadow': true}">

[class]

on the right that should evaluate to true or false to determine if the class should be applied.

<div [class.column-shadow]="true">

Additional tip

Do avoid using !important in your css since it is considering being a bad practice. If you have to, then please do add a comment ;)

Raphaël Balet
  • 6,334
  • 6
  • 41
  • 78
  • Thank you very much for your answer. Thanks for the tips. Unfortunately your answer is a correction on a class implementation, and not the actual problem/question. Changing the way I reference my class does not fix the issue. :( – onmyway Oct 24 '21 at 11:18
  • @onmyway Sry, I did thought it will fix the problem, but as I see, that you're using it within an `ng-container` I've updated my answer, can you give it a try ? – Raphaël Balet Oct 24 '21 at 11:28
  • Thank you for your feedback. The main stylesheet is actually called styles.scss. I am getting the feeling that you are guising... If you have the correct answer or guidance I would appreciate it! :) – onmyway Oct 24 '21 at 12:35
  • @onmyway Sorry, Since your code doesn't contain any error, I did try to enumerate every possible solution to your problem. So could you add the following code to the `style.scss` then ? (Since not every angular project have the same architecture, not every file does have the same name, so hard for me to guess, but I think you got the point here.) If you would like to have a better answer instead of an enumeration of what may possibly be the cause, then please do provide a [stackblitz](https://stackblitz.com/edit/angular-ivy-yn9txy), and I'll be glad to help – Raphaël Balet Oct 24 '21 at 12:41
  • Hey Raphael. I did implement it in my style.scss. It doesn't work. I will keep an eye out for any other answers or solutions. Thank you. – onmyway Oct 24 '21 at 12:50
  • @onmyway I'll try a last thing. can you analyze the DOM and tell me if you see your class is being applied to the `td` ? – Raphaël Balet Oct 24 '21 at 14:29