2

I know there is a way to add a customComponent to ng2-smart-table cells. Is there any way I can do the same to column header? Basically I want to add a help icon next to the column header title and add a click event to the icon.

Could not find any such readily available configuration in the documentation.

Nikhil Bharadwaj
  • 867
  • 4
  • 24
  • 42

3 Answers3

2

this example might help you 

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

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

shashi kumar
  • 362
  • 2
  • 9
  • 1
    If I understand question well it isn't good answer, because you should put some code into columns where in your example are dots ... It's issue related with headers not rows. btw your first link leads to 404. – greygreg87 Jan 31 '20 at 10:27
1

I have added sort icon in the column header of the ng2-smart-table. The following code should be entered in the component css file which you are using the table.

    :host /deep/ ng2-smart-table thead > tr > th a.sort::after { 
      border-bottom-color: #222b45;
      border-width: 0.375rem;
      position: absolute;
      margin: 0;
      transform: scale(0.7);
      right: 0.55rem;
      content: url(/assets/images/sort-arrow.png);
    }

the content should add the required icon

Moritz Ringler
  • 9,772
  • 9
  • 21
  • 34
N.Ekanayake
  • 43
  • 5
0

Here is the way to add icon to column, using css, but it won't be interactive:

.slash-outlined {
  .ng2-smart-title {
    display: inline-block;
    white-space: nowrap;

    &::before {
      display: inline-block;
      width: 20px;
      vertical-align: middle;
      margin-right: 5px;
      content: url(/assets/images/slash-outline.svg);
    }
  }
}

Column config:

excludeFromOnlineBooking: {
  title: '',
  type: 'custom',
  filter: false,
  sort: false,
  class: 'slash-outlined',
  renderComponent: NbCustomResourceBookingCellComponent,
  titleKey: 'location.resource-list.exclude-from-online-booking',
}

To make icon handle click event, you can try to locate this pseudo element using pure JavaScript in component's AfterViewInit and bind events there.

Here is the issue reference in ng2-smart-table github https://github.com/akveo/ng2-smart-table/issues?page=2&q=is%3Aopen+is%3Aissue

Koryakov Konstantsin
  • 365
  • 2
  • 5