I am currently working on implementing a data table feature that allows for an extended child row to be displayed when clicking the + icon. This row will show additional data along with some buttons that are bound via AJAX before transitioning to Angular 2.
Each row will have a child row for additional actions and information.
Below is the code snippet for the component:
import {Component, Input, ElementRef, AfterContentInit, OnInit} from '@angular/core';
declare var $: any;
@Component({
selector: 'sa-datatable',
template: `
<table class="dataTable {{tableClass}}" width="{{width}}">
<ng-content></ng-content>
</table>
`,
styles: [
require('smartadmin-plugins/datatables-bundle/datatables.min.css')
]
})
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: string = '100%';
constructor(private el: ElementRef) {
}
ngOnInit() {
Promise.all([
System.import('script-loader!smartadmin-plugins/datatables-bundle/datatables.min.js'),
]).then(()=>{
this.render()
})
}
render() {
let element = $(this.el.nativeElement.children[0]);
let options = this.options || {}
// Rest of the component logic...
}
To use the component in another template HTML file:
<div class="well">
<h1>Store Items</h1>
<sa-datatable [options]="options"
[detailsFormat]="detailsFormat"
tableClass="display projects-table table table-striped table-bordered table-hover"
width="100%">
<thead>
<tr>
<th data-hide="phone"></th>
<th data-hide="phone">Item</th>
<th data-class="expand"><i
class="fa fa-fw fa-user text-muted hidden-md hidden-sm hidden-xs"></i>
UUID
</th>
<th data-hide="phone"><i
class="fa fa-fw fa-phone text-muted hidden-md hidden-sm hidden-xs"></i>
Item ID
</th>
<th>Profit</th>
<th data-hide="phone,tablet"><i
class="fa fa-fw fa-map-marker txt-color-blue hidden-md hidden-sm hidden-xs"></i>
FTP Status
</th>
</tr>
</thead>
</sa-datatable>
</div>
The problem arises when trying to bind the button action within the detailsFormat method after expanding the row by clicking the + icon. The end goal is to have the button binding work as expected even after expanding the row. Any suggestions on how to achieve this functionality?