Adding html input text inside of datatable

ozhangulal

Hello everyone, I am using standard datatable, but i need to do column filtering but a little bit specific because of this i need to add html input text bottom of the column header ? I am sharing with you my .html, service.ts and component.ts ;

.html page;

<kt-portlet>
<kt-portlet-header [class]="'kt-portlet__head--lg'">
<ng-container ktPortletTitle>
<h3 class="kt-portlet__head-title">
<span>All Skills</span>
</h3>
</ng-container>
</kt-portlet-header>

<kt-portlet-body>
    <kt-data-table *ngIf="skills$"  [dataSource]="skills$ | async" [dtOptions]="dtOptions"></kt-data-table>
</kt-portlet-body>

</kt-portlet>

component.ts

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { Skill } from '../../../../core/models/index';
import { Store } from '@ngrx/store';
import * as fromApp from '../../../../core/reducers/index';
import { selectAll } from '../../../../core/selectors/skill.selector';
import { SkillService } from '../skill.service';
import { Router } from '@angular/router';
import { LayoutUtilsService } from '../../../../core/_base/crud';
import * as fromSkill from '../../../../core/actions/skill.actions';
import { skip } from 'rxjs/operators';

@Component({
selector: 'kt-view-skills',
templateUrl: './view-skills.component.html',
styleUrls: ['./view-skills.component.scss']
})
export class ViewSkillsComponent implements OnInit {

skills$: Observable<Skill[]>;
dtOptions: DataTables.Settings;

constructor(
private store: Store<fromApp.AppState>,
private skillService: SkillService,
private layoutUtilsService: LayoutUtilsService,
private router: Router
) { }

deleteSkill(id: any) {
    const title = 'Record Delete';
    const description = 'Are you sure to permanently delete this record?';
    const waitDesciption = 'Record is deleting...';

    const dialogRef = this.layoutUtilsService.deleteElement(title, description, waitDesciption);
    dialogRef.afterClosed().subscribe(res => {
        if (!res) {
            return;
        }
        this.store.dispatch(new fromSkill.SkillDelete(id));
    });
}

ngOnInit() {
this.store.dispatch(new fromSkill.SkillMultipleGet());
this.skills$ = this.store.select(selectAll).pipe(skip(1));
this.dtOptions = this.skillService.getDataTableOptions(this);
}

private navigateToPage(url: string) {
    this.router.navigateByUrl(url);
}

search()
{
    console.log('test');
}

}

and the last one my service.ts

import { Injectable } from '@angular/core';
import { Skill, ListViewModel, SkillGroupSkill, RoleTemplateSkill, RoleTemplate } from '../../../core/models/index';
import { HttpClient } from '@angular/common/http';
import { AppConfig } from '../../../../environments/app.config';
import { Observable } from 'rxjs';
import { DataTableComponent } from '../../partials/content/general/data-table/data-table.component';
import { table } from 'console';

@Injectable({
providedIn: 'root'
})
export class SkillService {

constructor(private http: HttpClient) { }

addSkill(skillTemplate: Skill): Observable<Skill> {
    return this.http.post<Skill>(AppConfig.addSkill, skillTemplate);
}

updateSkill(skillTemplate: Skill) {
    return this.http.put<Skill>(AppConfig.updateSkill + skillTemplate.id, skillTemplate);
}

getSkill(skillId: string): Observable<Skill> {
    return this.http.get<Skill>(AppConfig.getSingleSkillWithRelatedData + skillId);
}

deleteSkill(id: any) {
    return this.http.delete(AppConfig.deleteSkill + id);
}

getSkills(): Observable<Skill[]> {
    return this.http.get<Skill[]>(AppConfig.getSkills);
}

instantiateSkill(): Skill {
    const skill = {}  as Skill;
    return skill;
}

getDataTableOptions(self): DataTables.Settings {
    const dtOptions = {
        columns: [
            {    //(keyup)="search($event)"
                id:'skillTable',
                name:'skillTable',
                title: 'Name <br> <input type="text" id="searchSkill" name="searchSkill" placeHolder="search skill" (keyup)="search($event)">',
                data: 'name',
                render(data: any, type: any, row: any) {
                    return `<a href="${AppConfig.detailSkillPage}${row.id}" class="skillName">${data}</a>`;
                },
                createdCell(cell, cellData, rowData) {
                    const skillNode = $(cell).find('a.skillName');
                    if (skillNode) {
                        skillNode.on('click', (event: any) => {
                            event.preventDefault();
                            self.navigateToPage(AppConfig.detailSkillPage + rowData.id);
                        });
                    }
                }
            },
            {
                title: 'Actions',
                data: null,
                orderable: false,
                render(data: any, type: any, row: any) {
                    return `<a class="editName fa fa-edit icon" href="${AppConfig.editSkillPage}${row.id}">
            </a>
            <a elementId="${row.id}" class="deleteSkill fa fa-trash icon--delete">
            </a>`;
                },
                createdCell(cell, cellData, rowData) {
                    const skillNode = $(cell).find('a.editName');
                    const deleteSkill = $(cell).find('a.deleteSkill');
                    if (skillNode && deleteSkill) {
                        skillNode.on('click', (event: any) => {
                            event.preventDefault();
                            self.navigateToPage(AppConfig.editSkillPage + rowData.id);
                        });

                        deleteSkill.on('click', (event: any) => {
                            event.preventDefault();
                            self.deleteSkill(rowData.id);
                        });
                    }
                }
            }
        ],
        lengthMenu: [5, 10, 25]
    };
    return dtOptions;
}

getSkillRoleTemplates(roleTemplates: ListViewModel[]) {
    const roleTemplateSkills: RoleTemplateSkill[] = [];
    roleTemplates.forEach(element => {
        roleTemplateSkills.push(
            {
                roleTemplateId: element.id,
                id: element.roleTemplateSkillId,
                timestamp: element.timestamp,
                createdBy: element.createdBy,
                createdOn: element.createdOn
            }
        );
    });
    return roleTemplateSkills;
}


getSkillGroupSkills(skillGroup: ListViewModel[]): SkillGroupSkill[] {
    const skillGroups: SkillGroupSkill[] = [];
    skillGroup.forEach(element => {
        skillGroups.push(
            {
                skillGroupId: element.id,
                id: element.skillGroupSkillId,
                timestamp: element.timestamp,
                createdBy: element.createdBy,
                createdOn: element.createdOn
            }
        );
    });
    return skillGroups;
}

search()
{
console.log('test');
}

}

if you take care of this, already apperciated it . Thanks.