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)

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.

Outputs()

1. getRowData
Example.

## 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

$3

$3

.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;
}

$3

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