Ng2-smart-table : Use drop-downs or date pickers in inline editing

Question

I was searching for a better table representation for Angular2 and found ng2-smart-table is good to use. But the problem is it doesn't seems to provide a direct way to use drop downs or date pickers in in-line editing.

Is there any way to make it possible or what alternative components I can have to represent a table view in my Angular2 app.

Answer 1

For datepicker:

In settings[.ts]

settings={
columns:{
// other columns here

dob: {//date of birth
        title: 'yyyy/mm/dd hh:mm',
        type: 'html',
        editor: {
          type: 'custom',
          component: DoBComponent,
        },
   }
}

In dob.component.html

<owl-date-time autoClose [(ngModel)]="datevalue" dataType="string" 
 (click)="updateValue()">
</owl-date-time>

In dob.component.ts

datevalue: any;
  updateValue(){
    console.log(this.datevalue);
    this.cell.newValue = this.datevalue;
  }
where your DoBComponent extends DefaultEditor

In your module.ts

     declarations:[
//other compnents here
        DoBComponent
     ]
     entryComponents: [
      DoBComponent
    ]

hope this helps !!!

Ref: https://www.npmjs.com/package/ng-pick-datetime, https://akveo.github.io/ng2-smart-table/#/examples/custom-editors-viewers

Answer 2

I found something like this for drop-downs:

private settings = {
  columns: {
    name: {
      title: 'Name'
    },
    valid: {
      title: 'Valid',
      type: 'html',
      editor: {
        type: 'list',
        config: {
          list: [
            {value: true, title: 'Valid'},
            {value: false, title: 'Not valid'}
          ],
        },
      }
    }, //... more columns
  }
}