Image inside cell in ng2-smart-table

Question

I have used this module for display data in table one thing that I don't understand is how I can render image in the cell??

I wondered so I google it and found that we can use custom component in ng2-smart-table but still there is one loophole in this (or maybe I don't understand properly? ) I am storing my all data in local storage I managed to add button in the cell and also open the popup for choosing the option( galary/camera ) but I don't know or I can't figure it out how can I display in the cell??

so anyone with any idea??

putting some code for reference

1) Home.ts ( only the code that is req )

settings = {
    filter: false,
    sort: false,
    external: 'external',
    edit: {
      editButtonContent: 'Edit', // 'Modifier',
      saveButtonContent: 'Save', // 'Enregistrer',
      cancelButtonContent: 'Cancel', // 'Annuler',
      confirmSave: true
    },
    add: {
      addButtonContent: 'Add a sample', // Ajouter un prélèvement
      createButtonContent: 'Validate', // Valider
      cancelButtonContent: 'Cancel', // Annuler,
      confirmCreate: true
    },
    delete: {
      deleteButtonContent: 'Remove', // 'Supprimer',
      confirmDelete: true
    },
    actions: {
      columnTitle: ''
    },
    mode: 'inline',
    columns: {
      list: {
        title: 'List A/B/C',
        editor: {
          type: 'textarea'
        }
      },
      status: {
        title: 'ABX',
        editor: {
          type: 'textarea',
        }
      },
      paper: {
        title: 'Préco',
        editor: {
          type: 'textarea'
        }
      },
      image: {
        title: 'Photo',
        filter: false,
        type: 'custom',
        renderComponent: ButtonImageComponent,
        defaultValue: 'Photo',
        editor: {
          type: 'custom',
          component: ButtonImageComponent,
        },
      }
    }
  };

2) Home.html

<ng2-smart-table [settings]="settings" (deleteConfirm)="onDeleteConfirm($event)" [source]="data" (editConfirm)="onEditConfirm($event)"
                  (createConfirm)="onCreateConfirm($event)"></ng2-smart-table>

3) Button Component.ts ( Custome button that I have added at the last column)

import { Component, EventEmitter,  OnInit, Output } from '@angular/core';
import { ActionSheetController, Platform, Events } from '@ionic/angular';

import { Camera, CameraOptions } from '@ionic-native/camera/ngx';

@Component({
  selector: 'app-button-image',
  templateUrl: './button-image.component.html',
  styleUrls: ['./button-image.component.scss'],
})
export class ButtonImageComponent implements OnInit {
   base64Image: any ;

  constructor(public actionSheetController: ActionSheetController,public event: Events, public platform: Platform, public camera: Camera) { }

  ngOnInit() {}
  async presentActionSheet() {
    const actionSheet = await this.actionSheetController.create({
      header: 'Option',
      buttons: [{
        text: 'Take photo',
        role: 'destructive',
        icon: !this.platform.is('ios') ? 'ios-camera-outline' : null,
        handler: () => {
          this.captureImage(false);
        }
      }, {
        text: 'Choose photo from Gallery',
        icon: !this.platform.is('ios') ? 'ios-images-outline' : null,
        handler: () => {
          this.captureImage(true);
        }
      }]
    });
    await actionSheet.present();
  }
  async captureImage(useAlbum: boolean) {
    const options: CameraOptions = {
      quality: 100,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      ...useAlbum ? {sourceType: this.camera.PictureSourceType.SAVEDPHOTOALBUM} : {}
    };

    const imageData = await this.camera.getPicture(options);

    this.base64Image = `data:image/jpeg;base64,${imageData}`;
    this.event.publish('image:selectes', this.base64Image);
    // this.photos.unshift(this.base64Image);

  }
}

4) And its HTML

<ion-button (click)="presentActionSheet()">Select</ion-button>

yyater97 yyater97 · Accepted Answer · 2019-12-19T16:20:18

create smart table with html code:

<ng2-smart-table [settings]="settings" [source]="source"
  (create)="onCreateConfirm($event)"
  (edit)="onEditConfirm($event)"
  (delete)="onDeleteConfirm($event)"
></ng2-smart-table>

create setting object in file ...component.ts

settings = {
mode: 'external',
add: {
  addButtonContent: '<i class="nb-plus"></i>',
  createButtonContent: '<i class="nb-checkmark"></i>',
  cancelButtonContent: '<i class="nb-close"></i>',
},
edit: {
  editButtonContent: '<i class="nb-edit"></i>',
  saveButtonContent: '<i class="nb-checkmark"></i>',
  cancelButtonContent: '<i class="nb-close"></i>',
},
delete: {
  deleteButtonContent: '<i class="nb-trash"></i>',
  confirmDelete: true,
},
columns: {
  name: {
    title: 'Tên',
    type: 'string',
  },
  image: {
    title: 'Hình ảnh',
    filter: false,
    type: 'html',
    valuePrepareFunction: (images) => {
      return `<img class='table-thumbnail-img' src="${images}"/>`
    }
  },
},};

You can defined size of image or something about layout of 'table-thumbnail-img' class in style.css

Image inside cell in ng2-smart-table

2 Answers