inline-data-table

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

4. import the below module into app.module.ts file or in your feature module e.g feature.module.ts e.g.

    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;

  ngOnInit(): void {
    let url = 'https://dummyjson.com/products';
    this.http.get(url).subscribe((data: any) => {
      console.log(data.products);
      this.dtOptions = {
        data: data.products,
        columns: [
          { display: 'Brand', data: 'brand', inputStyles: { fontSize: '12px' }, inputConfig: { appearance: 'outline', label: 'Category', type: 'text' } },
          { display: 'Category', data: 'category', inputStyles: { fontSize: '12px' }, inputConfig: { appearance: 'outline', label: 'Category', type: 'text' } },
          { display: 'Price', data: 'price', inputStyles: { fontSize: '12px' }, inputConfig: { appearance: 'outline', label: 'Category', type: 'number' } },
          { display: 'Title', data: 'title', inputStyles: { fontSize: '12px' }, inputConfig: { appearance: 'outline', label: 'Category', type: 'date' } },
          { display: 'Actions', icons: { edit: true, delete: true, discard: true } },
        ],
        length: data.products.length,
        columnFilter: true,
        component: this
      };
    })
  }
}

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

Statement

With reference to the following local authority PCN:

Date Issued

Reference

This vehicle:

Registration

Make

Model

Color

At the following time, date and location:

Date

Time

Location

            </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); }