How to customize action column style?

[iaMeteor]

If I want to disable delete and hide its icon, and add a custom action icon. How to style it?

[tribui]

Hi @iaMeteor, the following settings is a sample of Actions column customization:

settings = {
    actions: {
      delete: false,
      custom: [
        {
          name: 'activate',
          title: '<i class="nb-checkmark"></i>'
        }
      ],
      position: 'right', // left|right
    },
    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>',
    },
    columns: {...}
}

You can reference this source to see how to handle your custom action event: https://github.com/akveo/ng2-smart-table/blob/master/src/ng2-smart-table/components/tbody/cells/custom.component.ts

[alvarovp27]

Hi, I'm also trying to implement a custom action button. The @tribui snippet works for me, but for some reason, the title doesn't get centered, as expected. This is what I have:

settings = {
  actions: {
    add: false,
    edit: false,
    delete: false,
    custom: [{ name: 'edit', title: '<i class="nb-edit"></i>' }],
    position:  'left',
  },
  [...]
}

This is the result:

The result is the same if I use a string as title instead of an HTML tag.

Is there any workaround for it?

Thanks.

[AbhisheshPradhan]

+1 ^

[AbhisheshPradhan]

To center the title, I created a custom action for edit then in bootstrap-rtl.scss added the below at the end

.nb-theme-corporate .ng2-smart-actions ng2-st-tbody-edit-delete{
display: none !important;
}

[dmosquera-devel]

@alvarovp27 Did you find a solution?

[amir1369x]

@alvarovp27 Did you find any solution?

[tiecoo]

still with no solution?

[tiecoo]

:host /deep/ ng2-smart-table .ng2-smart-actions a.ng2-smart-action{ margin-bottom: -45px !important; }

you can do like this to edit the height ! @ah-arabzadeh @dmosquera-devel @alvarovp27

[tahina123]

@iaMeteor You can try to add this in 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; }

[AbhisheshPradhan]

go to: @themes -> styles -> bootstrap-rtl.scss and add
.ng2-smart-actions ng2-st-tbody-edit-delete{
display: none !important;
}

table settings:

that is how I did it.

Works with filter row as well

[pspiritz]

i have two custom action button... i need to place in one row
can somebody help me.

[tahina123]

Hope that it will solve your probleme
https://stackoverflow.com/questions/52086092/add-custom-action-button-ng2-smart-table/52721993#52721993 @pspiritz

[WillyBallesteros]

i have two custom action button... i need to place in one row
can somebody help me.

I have edit and delete buttons, I add a custom action button, and add this style sheets to css file component.

:host /deep/ ng2-st-tbody-edit-delete {
display: flex !important;
height: 100 !important;
width: 66% !important;
padding-top: 26px;
}

:host /deep/ ng2-st-tbody-create-cancel {
padding-top: 17px;
}

:host
/deep/
ng2-st-tbody-custom
a.ng2-smart-action.ng2-smart-action-custom-custom {
width: 100% !important;
text-align: center;
font-size: 1.1em;
color: #3baf29;
padding-top: 26px;
padding-bottom: 26px;
height: 100 !important;
}

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

:host /deep/ ng2-smart-table .ng2-smart-actions {
width: 100% !important;
display: inline-flex !important;
height: 100%;
}

[ishansinghania]

:host ::ng-deep {
input-editor input[placeholder="Name"] {
width: 10em;
margin-left: 1em;
}
select-editor select {
width: 5em;
margin-left: 1em;
}
}
you can use it similar way to change your styling of the action buttons