Add row with icons using material DataTables

Question

I'm working in Angular project where I want to implement Angular Datatables. People recomend me to use Material Datatables.

Normally with JS I add icons to datatable row as:

{
      field: "Actions",
      width: 110,
      title: "Acciones",
      sortable: false,
      overflow: "visible",
      template: function(row, index, datatable) {
        return (
          '\
                    <a href="#/categorias/usuarios/detalle/' +
          row.id +
          '" class="m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill">\
                        <i class="fa fa-edit"></i>\
                    </a>\
                    <a  href="#/categorias/usuarios/eliminar/' +
          row.id +
          '" class="m-portlet__nav-link btn m-btn m-btn--hover-danger m-btn--icon m-btn--icon-only m-btn--pill" title="Edit settings">\
                        <i class="fa fa-trash"></i>\
                    </a>\
                '
        );
      }
    }

Now I implemented Material DataTables, how can I do exaclty the same but with Angular into typescript?

Component.html

  <div>
        <mat-table [dataSource]="dataSource">
          <ng-container matColumnDef="id">
            <mat-header-cell *matHeaderCellDef> Id </mat-header-cell>
            <mat-cell *matCellDef="let user"> {{user.id}} </mat-cell>
          </ng-container>
          <ng-container matColumnDef="nombre">
            <mat-header-cell *matHeaderCellDef> Nombre </mat-header-cell>
            <mat-cell *matCellDef="let user"> {{user.nombre}} </mat-cell>
          </ng-container>
          <ng-container matColumnDef="apellido">
            <mat-header-cell *matHeaderCellDef> Apellido </mat-header-cell>
            <mat-cell *matCellDef="let user"> {{user.apellido}} </mat-cell>
          </ng-container>
          <ng-container matColumnDef="email">
            <mat-header-cell *matHeaderCellDef> Email </mat-header-cell>
            <mat-cell *matCellDef="let user"> {{user.email}} </mat-cell>
          </ng-container>
          <ng-container matColumnDef="perfil">
            <mat-header-cell *matHeaderCellDef> Perfil </mat-header-cell>
            <mat-cell *matCellDef="let user"> {{user.perfil}} </mat-cell>
          </ng-container>
          <ng-container matColumnDef="ultimoLogin">
            <mat-header-cell *matHeaderCellDef> Último Login </mat-header-cell>
            <mat-cell *matCellDef="let user"> {{user.ultimoLogin}} </mat-cell>
          </ng-container>
          <ng-container matColumnDef="activo">
            <mat-header-cell *matHeaderCellDef> Activo </mat-header-cell>
            <mat-cell *matCellDef="let user"> {{user.activo}} </mat-cell>
          </ng-container>
          <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
          <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
        </mat-table>
      </div>

Service:

export class UsuariosService {

  private serviceUrl = "MyUrl";
  headers = new Headers({
    Authorization:
      "Bearer " + JSON.parse(localStorage.getItem("currentUser")).token,
    "Content-Type": "application/json"
  });
  options = new RequestOptions({ headers: this.headers });

  constructor(private http: Http, private httpClient: HttpClient) {}

  getUser(): Observable<User[]> {
    return this.httpClient.get<User[]>(this.serviceUrl);
  }

Component:

    export class UsuariosComponent {
      dataSource = new UserDataSource(this.UsuariosService);
      displayedColumns = [
        "id",
        "nombre",
        "apellido",
        "email",
        "perfil",
        "ultimoLogin",
        "activo"
      ];

export class UserDataSource extends DataSource<any> {
  constructor(private userService: UsuariosService) {
    super();
  }
  connect(): Observable<User[]> {
    return this.userService.getUser();
  }
  disconnect() {}
}

How can I add new row with link buttons as I do with JS file? Regards

Did not really understand your question well. Do you want to add another column for actions like edit or delete? — Yousef khan
– Yousef khan, Commented May 22, 2018 at 0:09

Finrod · Accepted Answer · 2020-06-13 07:52:38Z

1

Add another ng-container like this

<ng-container matColumnDef="action">
  <mat-header-cell *matHeaderCellDef>
    Action
  </mat-header-cell>

  <mat-cell *matCellDef="let row">
    <button mat-icon-button>
      <mat-icon>edit</mat-icon>
    </button>

    <button mat-icon-button>
      <mat-icon>delete</mat-icon>
    </button>
  </mat-cell>
</ng-container>

Also update your array of display columns to show action column

displayedColumns = [
  "id",
  "nombre",
  "apellido",
  "email",
  "perfil",
  "ultimoLogin",
  "activo",
  "action"
];

Update

import MatIconModule in your module:

import { MatIconModule} from '@angular/material

edited Jun 13, 2020 at 7:52

Finrod

2,5504 gold badges31 silver badges39 bronze badges

answered May 22, 2018 at 0:30

Yousef khan

3,2443 gold badges17 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Pedro Over a year ago

Shoiuld I import something to get <mat-icon> works? I getting file: 'mat-icon' is not a known element

Yousef khan Over a year ago

add MatIconModule from @angular/material. import import { MatIconModule} from '@angular/material'

Pedro Over a year ago

I try it as [theinfogrid.com/tech/developers/angular/… exmaple), but I always getting

ERROR Error: StaticInjectorError(AppModule)[UsuariosComponent -> MatIconRegistry]:    StaticInjectorError(Platform: core)[UsuariosComponent -> MatIconRegistry]:      NullInjectorError: No provider for MatIconRegistry!

Yousef khan Over a year ago

You will have to add material icons url in your index.html like mentioned in google.github.io/material-design-icons/#icon-font-for-the-web. For more details follow material.angular.io/components/icon/overview.

Yousef khan Over a year ago

Or you can just use font-awesome icons and forget about material icons. Like you have used in your javascript example

Kishore Konangi · Accepted Answer · 2018-07-08 05:53:59Z

0

As @yousef, suggested addition of icons are easy with "mat-icon" tag. We need to include Material Icons into our project. I have referred below github link to include mat-icons to my project.

CSS for MAT-ICONS

Steps to be followed:

Create a folder inside "theme" folder with mat-icons.
Create material-icons.scss file and copy the css content mentioned in above github link.
Download and place MaterialIcons-Regular.woff2, MaterialIcons-Regular.woff, MaterialIcons-Regular.ttf, MaterialIcons-Regular.eot and place inside the mat-icons folder.
Import this material-icons.scss in your theme.scss as given below:

@import "mat-icons/material_icons"

This steps will enables to use mat-icons accross our project.

answered Jul 8, 2018 at 5:53

Kishore Konangi

5543 silver badges15 bronze badges

Collectives™ on Stack Overflow

Add row with icons using material DataTables

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related