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", "[email protected]", "22 888 999"),
    new user(2, this.opt , "rami", "ba","[email protected]" ,"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 | - | -