Add custom action button - ng2-smart-table

Question

I'm trying to add a button to custom action, but a new column is not added in the action, making the button overlap with the others.

Code:

settings = {
    actions: {
      custom: [
        {
          name: 'Button',
          title: 'Button ',
        }
      ],
    },
    columns: {
      name: {
        title: 'Full name'
      },
      email: {
        title: 'Email'
      },
      lastLogin: {
        title: 'Last Login'
      }
    }
  };

I needed to put a link to the image, because I have little reputation here and the image tool is blocked for me.

reaction image:

What am I doing wrong?

Aldenalder

thats a css related issue – Gorge

Answer 1

you can try this. change your setting to:

settings = {
hideSubHeader: true,
actions: {
  custom: [
    {
      name: 'yourAction',
      title: '<i class="ion-document" title="YourAction"></i>'
    },
    {
      name: 'editAction',
      title: '<i class="ion-edit" title="Edit"></i>'
    },
    {
      name: 'deleteAction',
      title: '<i class="far fa-trash-alt" title="delete"></i>'
    }
  ],
  add: false,
  edit: false,
  delete: false
}
...
};

then add this into your component.scss

    :host /deep/ ng2-st-tbody-edit-delete {display: flex !important;
  height: 0 !important;
}

:host /deep/ ng2-st-tbody-custom a.ng2-smart-action.ng2-smart-action-custom-custom {
  display: inline-block;
  width: 50px;
  text-align: center;
  font-size: 1.1em;
}

:host /deep/ ng2-st-tbody-custom a.ng2-smart-action.ng2-smart-action-custom-custom:hover {
  color: #5dcfe3;
}

Seville

Thanks, it's help a lot, other think is how can we call method on those click? – Spun

Is there a way to call a method on those custom action clicks? – Phidias

I found this: In the table you need something like <ng2-smart-table [settings]="settings" [source]="source" (custom)="onCustomAction($event)"> and you need to define onCustomEvent method in your component class. Would be good if akveo put some better documentation on this VERY common type of requirement. – Baxley

Answer 2

There is one another css to align items,

    ::ng-deep {
      ng2-st-tbody-edit-delete {
        display: none;
        height: 0 !important;
      }
    
      ng2-st-tbody-custom {
        display: flex;
        text-align: center;
      }
    }`

Philippians

Answer 3

Now you can use just like below to change action icons of ng2 smart table. You can change the side of the action column use position: "right" property. for more refer

https://github.com/akveo/ngx-admin/blob/master/src/app/pages/tables/smart-table/smart-table.component.ts

settings = {
    edit: {
      editButtonContent: '<i class="nb-edit"></i>',
      saveButtonContent: '<i class="nb-checkmark"></i>',
      cancelButtonContent: '<i class="nb-close"></i>',
      confirmSave: true
    },
    delete: {
      deleteButtonContent: '<i class="nb-trash"></i>',
      confirmDelete: true
    },
    columns: {
      id: {
        title: "Id",
        filter: true
      },
      name: {
        title: "Name",
        filter: true
      },
      transport: {
        title: "Transport",
        filter: true,
        valuePrepareFunction: value => {
          return value === 1 ? "Yes" : "No";
        }
      },
      route: {
        title: "Route",
        filter: true
      },
      telephone: {
        title: "Telephone",
        filter: true
      },
      mobile: {
        title: "Mobile",
        filter: true
      },
      land_name: {
        title: "Land Name",
        filter: false
      }
    },
    actions: {
      add: false,
      position: "right"
    },

    pager: {
      display: true,
      perPage: 10
    }
  };

Elbertelberta

Answer 4

angular has deprecated the /deep/ combinator so I did the following for the same issue:

Added a style class in global css:

.ng2-custom-actions-inline {
  .ng2-smart-action-custom-custom {
    display: inline-block !important;
    height: auto !important;
    width: auto !important;
  }
}

Set the settings.rowClassFunction property in the smarttable's settings array:

rowClassFunction: (row) => { return 'ng2-custom-actions-inline' }

I got a clue from this answer:

https://github.com/akveo/ng2-smart-table/issues/779#issuecomment-428494547

Cabe

Answer 5

.ts


 actions: {

      // delete: false,
      add: false,
      custom: [
        {
          name: 'doclist',
          title: '<i class="nb-arrow-thin-right" title="doclist"></i>',
          
        },
      ],
      position: 'right'



    },





.scss



:host ::ng-deep tr .ng2-smart-actions{ display: flex; }

:host ::ng-deep nbng2-st-tbody-custom {display: flex;}

:host ::ng-deep ng2-st-tbody-edit-delete a.ng2-smart-action {display: inline-block !important;}
:host ::ng-deep ng2-st-tbody-create-cancel a.ng2-smart-action {display: inline-block !important;}
:host ::ng-deep ng2-st-tbody-custom a.ng2-smart-action.ng2-smart-action-custom-custom {
    display: inline-block;
    width: 80px;
    text-align: center;
}

Strenuous

Answer 6

Appending @payal s answer.

Adding hover effect.

CSS

::ng-deep {
  .my-custom-action:hover {
    color: red;
  }
  ng2-st-tbody-edit-delete {
    display: none;
    height: 0 !important;
  }

  ng2-st-tbody-custom {
    display: flex;
    text-align: center;
  }
}

Component

actions: {
  custom: [
    {
      name: 'view',
      title: '<i class="my-custom-action ion-eye" title="View"></i>',
    },
    {
      name: 'delete',
      title: '<i class="my-custom-action ion-trash-b" title="Delete"></i>',
    },
  ],
  add: false,
  edit: false,
  delete: false,
  position: 'right',
},

Barrelhouse