crud-grid v1.0.1
ChnimComponents
Crud Grid is a data-table based on material table with CRUD operation.
Feature
✅ Display data : generate columns dynamically from the given modelSchema.
✅ Add new item : generate forms match the model types (supported inputs : text, number, email, date and select).
✅ Edit item : generate inline forms match the model types to edit the selected row.
✅ Delete item : Delete the selected row.
✅ Filtering and pagination.
demo
https://stackblitz.com/edit/crud-grid-example
Usage
app.module.ts
import { CrudGridModule } from 'crud-grid';
@NgModule({
...
imports: [
CrudGridModule
...
],
...
})
app.component.html
<crud-grid [showFilter]="true" [modelSchema]="UserSchema" [dataSource]="dataSource"
(HandleRowEvent)="handleRowAction($event)"></crud-grid>
app.component.ts
export class AppComponent {
opt = [{ label: "male", value: "M", isSelected: true }, { label: "female", value: "F", isSelected: false }];
dataSource: user[] = [
new user(1, this.opt , "sami","kh", "sami@mail.com", "22 888 999"),
new user(2, this.opt , "rami", "ba","rami@mail.com" ,"44 555 666"),
]
UserSchema = {
id: "number",
gender: {
type: "select",
data: [
{ label: "male", value: "M", isSelected: false },
{ label: "female", value: "F", isSelected: false }
]},
name: "text",
lastName: "text",
email: "text",
phone: "text",
}
handleRowAction(row: user) {
if (row.isDeleted) {
this.dataSource = this.dataSource.filter(x => x.id !== row.id);
}
else if (row.isAdded) {
console.log(this.dataSource)
this.dataSource = [row, ...this.dataSource]
}
else if (row.isUpdated) {
let ind = this.dataSource.findIndex(x => x.id === row.beforeUpdate.id);
if (ind > -1){
this.dataSource[ind] = row.afterUpdate;
}
}
}
}
Models
Crud grid also provides a base model such as GridEntityBase
and SelectData
to use when defining the model to display in the grid.
for example :
export class user extends GridEntityBase {
constructor(
public id: number,
public gender: SelectData[],
public name: string,
public lastName: string,
public email: string,
public phone: string,
) { super() }
}
Important note: the modelSchema and the model that represent the row of data must have the same property name (like userSchema and user in this example)
Configuration Options
Property | Type | Description | Default | required |
---|---|---|---|---|
@Input showFilter | boolean | Determines whether the input filter is display or not | false | false |
@Input dataSource | any[] | Data that will populate the table fields | undefined | true |
@Input modelSchema | any | An object to Determine the types of edit form or add form will be displayed | undefined | true |
@Output HandleRowEvent | EventEmitter | emits an object with supplementary metadata represents the modified row whether added, updated or deleted | - | - |