material data table
npm install inline-data-table1. 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
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
};
})
}
}
1. dtOptions
Example.
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
Statement
.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;
}
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);
}