Cell Editing
Inline Cell editing can be enabled for any column using editable property of m-column component. If a column is editable, clicking a cell will switch it to editable mode.
<m-table [value]=countries>
<m-column field="country" editable="true"></m-column>
</m-table>
editing a cell triggers a bunch of events like onEditInit, onEdit, onEditCancel and onEditComplete from m-table component.
<m-table [value]=countries
(onEditInit)="editInit($event)" (onEdit)="edit($event)" (onEditCancel)="editCancel($event)" (onEditComplete)="editComplete($event)">
</m-table>
Edit Trigger
By Default column edit is triggered by clicking cell, to change trigger to button(pencil icon button) use editTrigger property of m-column component.
<m-column field="country" editable="true" editTrigger="button"></m-column>
Custom Edit template
By default editor element is input field, this could be customised using mTemplate property as 'editor'.
<m-column field="country" editable="true">
<ng-template let-col let-row="row" mTemplate="editor">
// custom html
</ng-template>
</m-column>
Table Component m-table
Properties
| Name | Default | Description |
|---|---|---|
| @Output() onEditInit |
- | Event emitted when a cell is switched to editable mode. |
| @Output() onEdit |
- | Event emitted when a data is being edited. |
| @Output() onEditCancel |
- | Event emitted when a editig cell is switched back to view mode using escape key. |
| @Output() onEditComplete |
- | Event emitted when cell edit is completed. |
Column Component m-column
Properties
| Name | Default | Description |
|---|---|---|
| @Input() editable: boolean |
false | whether cell is editable or not. |
| @Input() editTrigger: string |
'cell' | Edit trigger is 'cell' or 'button'. |