Installation

1. npm install inline-data-table
2. For the project you need to install angular cli 14 and above
3. to use angular material icons please these below links into your index.html file

    import { InlineDataTableModule  } from 'inline-data-table';

    @NgModule({
        declarations: [
            AppComponent,
        ],
        imports: [
            BrowserModule,
            AppRoutingModule,
            InlineDataTableModule,
            BrowserAnimationsModule,
        ],
        providers: [],
        bootstrap: [AppComponent]
    })

    export class AppModule { }

5. install angular material as its an core dependency for the package e.g. ng add @angular/material

How to use

Step1: in your html file (app.component.html)

<lib-inline-data-table *ngIf="dtOptions" [dtOptions]="dtOptions" >

Step2: In your .ts file (app.component.ts)

import { HttpClient } from '@angular/common/http'; import { Component } from '@angular/core';

@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { title = 'Angular inline edit data table example';

constructor( private http: HttpClient ) {

}

dtOptions: any;

Inputs()

1. dtOptions Example. <lib-inline-data-table *ngIf="dtOptions" [dtOptions]="dtOptions" >

Outputs()

1. getRowData Example. <lib-inline-data-table *ngIf="dtOptions" [dtOptions]="dtOptions" (getRowData)="getRowData($event)">

   dtOptions

   this is a object it takes several value to render table in the browser

   1. columnFilter by default its false to enable column filter feature change the value to true columnFilter: true/false
   2. length defines the total length of the recored want to display, which helps to implement pagination

HTML

            </div>
        </div>
        <div class="text-black-50 fw-medium mb-2">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque cum nulla voluptatibus voluptatum,
            inventore
            sapiente tempore
            Neque cum nulla voluptatibus voluptatum, inventore
            sapiente tempore
        </div>

        <div class="text-black-50 fw-medium mb-2">
            I can that the .........
        </div>

        <div class="row mb-2">
            <ng-container class="mr-2"
                *ngFor="let zipCode of typeList; let i = index; let odd= odd; let even = even"
                formArrayName="types">
                <div class="col-md-6 d-flex mb-3">
                    <input class="me-2" type="checkbox" [formControlName]="i" [id]="i" />
                    <label [for]="i" class="text-black-50 fw-medium ">{{zipCode}}</label>
                </div>
            </ng-container>
        </div>
        <div class="d-flex">
            <button class="btn btn-primary">
                Clear
            </button>
        </div>
        <div class="row mb-2">
            <div class="col-md-6">
                <div class="row">
                    <label for="inputone" class="col-md-5 col-form-label">input one</label>
                    <div class="col-md-7">
                        <input formControlName="inputone" type="text" class="form-control" id="inputone">
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="row">
                    <label for="inputtwo" class="col-md-5 col-form-label">input two</label>
                    <div class="col-md-7">
                        <input formControlName="color" type="text" class="form-control" id="inputtwo">
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

CSS

.statement { background-color: #d4e2f7; }

::ng-deep.mat-mdc-dialog-container { border: 2px solid black !important; border-radius: unset !important; }

label { font-weight: 600; }

input { border: 2px solid #c2c2c2; &:focus { outline: none; box-shadow: none; } &:focus-within { outline: none; } }

input[type="checkbox"] { width: 18px; cursor: pointer; }

TS

constructor(private fb: FormBuilder) {} public typeList: any = [ 'One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', ]; defaultValueInCheckbox = ['One', 'Two']; patchData: any = { dateIssued: '18/01/2024', reference: '123456789', registration: 'ABC12345', make: '1818', model: 'Feweee', color: 'black', date: '18/03/2023', time: '09:18', location: 'India Bangalore', inputone: 'test', inputtwo: 'test two', };

offenceForm = this.fb.group({ dateIssued: '', reference: '', registration: '', make: '', model: '', color: '', date: '', time: '', location: '', inputone: '', inputtwo: '', types: this.fb.array(this.typeList.map((value: any) => !value)), // types: this.fb.array(this.typeList.map((value: any) => this.defaultValueInCheckbox.indexOf(value) != -1)) // enable if data need to set by default in checkbox });

ngOnInit(): void { this.offenceForm.patchValue(this.patchData); }

onSubmit() { const getTypes: any = this.offenceForm.value.types; let valueToStore: any = {}; this.typeList.forEach((element: any, index: any) => { getTypes.map((item: any, idx: any) => { if (index === idx && item === true) { valueToStore[element] = item; }
}); }); console.log(valueToStore); }