Add action column in angular 7 component

wpler

Hi,

on SmartAdmin Template with angular 7 I use the Datatables with an Ajax request.

The data look like (assets/data.json):

{
  "data": [
    {
      "id": 1,
      "name": "Tester 1",
      "campaigns": 12
    },
    {
      "id": 2,
      "name": "Tester 2",
      "campaigns": 3
    },
    {
      "id": 3,
      "name": "Tester 3",
      "campaigns": 0
    },
    {
      "id": 4,
      "name": "Tester 4",
      "campaigns": 1
    },
    {
      "id": 5,
      "name": "Tester 5",
      "campaigns": 11
    }
  ]
}

My Datatables component looks like:

import { Component, Input, ElementRef, AfterContentInit, OnInit } from '@angular/core';

@Component({
    selector: 'app-datatable',
    template: `
        <table class="dataTable responsive {{tableClass}}" width="{{width}}">
            <ng-content></ng-content>
        </table>
    `
})
export class DatatableComponent implements OnInit {
    @Input() public options: any;
    @Input() public filter: any;
    @Input() public detailsFormat: any;
    @Input() public paginationLength: boolean;
    @Input() public columnsHide: boolean;
    @Input() public tableClass: string;
    @Input() public width = '100%';
    constructor(private el: ElementRef) {}
    ngOnInit(): void {
        this.render();
    }
    render() {
        const element = $(this.el.nativeElement.children[0]);
        let options = this.options || {};
        let toolbar = '';
        if (options.buttons) { toolbar += 'B'; }
        if (this.paginationLength) { toolbar += 'l'; }
        if (this.columnsHide) { toolbar += 'C'; }
        if (typeof options.ajax === 'string') {
            const url = options.ajax;
            options.ajax = {
                url: url
            };
        }
        options = $.extend(options, {
            dom:
                '<"dt-toolbar"<"col-xs-12 col-sm-6"f><"col-sm-6 col-xs-12 hidden-xs text-right"' +
                toolbar +
                '>r>' +
                't' +
                '<"dt-toolbar-footer"<"col-sm-6 col-xs-12 hidden-xs"i><"col-xs-12 col-sm-6"p>>',
            oLanguage: {
                sSearch:
                    '<span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span> ',
                sLengthMenu: '_MENU_'
            },
            autoWidth: false,
            retrieve: true,
            responsive: true,
            initComplete: (settings, json) => {
                element
                    .parent()
                    .find('.input-sm')
                    .removeClass('input-sm')
                    .addClass('input-md');
            }
        });
        const _dataTable = element.DataTable(options);
        if (this.filter) {
            element.on('keyup change', 'thead th input[type=text]', function() {
                _dataTable.column(
                    $(this).parent().index() + ':visible'
                ).search(this.value).draw();
            });
        }
        if (!toolbar) {
            element.parent().find('.dt-toolbar')
                .append(
                    '<div class="text-right">' +
                    '<img src="assets/img/logo.png" alt="" style="width: 111px; margin-top: 3px; margin-right: 10px;">' +
                    '</div>'
                );
        }
        if (this.detailsFormat) {
            const format = this.detailsFormat;
            element.on('click', 'td.details-control', function() {
                const tr = $(this).closest('tr');
                const row = _dataTable.row(tr);
                if (row.child.isShown()) {
                    row.child.hide();
                    tr.removeClass('shown');
                } else {
                    row.child(format(row.data())).show();
                    tr.addClass('shown');
                }
            });
        }
    }
}

on the template I use it like:

<app-datatable [options]="{colReorder: true, ajax: 'assets/data.json', columns: [ { data: 'id' }, { data: 'name' }, { data: 'campaigns' } ]" paginationLength="true" tableClass="table table-striped table-bordered table-hover" width="100%">
<thead>
<tr>
<td data-hide="phone">ID</td>
<th data-class="expand">Name</th>
<th>Campaigns</th>
<th data-hide="phone" class="text-right">Action</th>
</tr>
</thead>
</app-datatable>

How can I add an action column on every row without define it in the data source (so I mean over the component)?

kthorngren

You would use columns.render to add the buttons or whatever you want for each row.

Kevin