Inline edit and aggregated data

This tutorial fits ember-models-table version 2.3.0 or higher.

Inline edit

Editing data in the table means that at some point instead of the data in the cells there are input fields with the current values, and the user is given the opportunity to change values and save (or cancel) changes.

New Component models-table/cell-edit-toggle is used to set table row in the edit-mode. It renders “Edit”-button by default and renders buttons “Save” and “Cancel” after click on “Edit”. This Component may be placed in the last column:

1
2
3
4
5
6
7
8
columns = [
  {/* ... */},
  {
    title: "Edit",
    component: "edit-row",
    editable: false
  }
];

You can set edit-row using columnComponents:

1
2
3
4
5
6
7
8
9
10
11
{{models-table
  data=model
  columns=columns
  columnComponents=(hash
    edit-row=(component
      "models-table/cell-edit-toggle"
      saveRowAction=(action "onSaveRow")
      cancelRowAction=(action "onCancelRow")
    )
  )
}}

Closure actions onSaveRow and onCancelRow must be passed. First one is called on saving data (it means click on “Save” in the cell-edit-toggle). Second one is called on canceling edit (it means click on “Cancel” in the cell-edit-toggle). Both of them can may return Promise (like record.save()) or “simple” value:

1
2
3
4
5
6
7
8
9
10
11
12
Controller.extend({
  actions: {
    onSaveRow(param) {
      return param.record.save();
    },
 
    onCancelRow({record}) {
      record.rollbackAttributes();
      return true;
    }
  }
});

Both method will be called with a single argument. It’s an object with one field called record (editing row).

All table columns are editable by default. You may set field editable to false for columns that should not be edited.

New Component models-table/cell-content-edit is rendered in the cell when its row is on edit-mode. It shows a simple input with bound value from the cell ({{get record column.propertyName}}). This Component is useful in the simple cases. However how to render select-box or more complex input-element (like color-picker)? Well, you have to create your own Component. It can look very complicated, but it has only one task – change value for bound record’s property.

Field componentForEdit in the column definition is used to set Component’s name that will be rendered when row will be in the edit-mode. As a component it can be set with columnComponents:

1
2
3
4
5
6
columns= [
  {
    propertyName: 'date',
    componentForEdit: 'date-edit'
  }
];
1
2
3
4
5
6
7
8
9
10
11
{{models-table
  data=model
  columns=columns
  columnComponents=(hash
    date-edit=(component
      "date-edit"
      extraData=extraData
      extraAction=(action "extraAction")
    )
  )
}}

Editing data in a table is not a very complicated process, but it can require a lot of small Components. In the worst case, a separate Component per column.

Aggregated data

From the very beginning tfoot in the ember-models-table‘s tables wasn’t used at all or was just empty. Finally in the current version (2.3.0) it’ve started to benefit. Now tfoot contains a single row if at least one column has not empty componentForFooterCell. It has to contain Component’s name represented as a cell (not as it’s content). It means that Component’s tag should be td.

Component ember-models-table is now added to models-table/cell-column-summary with a handful of predetermined properties.

  • mappedData
  • mappedExpandedItems
  • mappedSelectedItems

Each one is a result of mapBy on data execution, expandedItems and selectedItems. column.propertyName goes as a property name of taken values.

There is no sense to use this Component as componentForFooterCell. because its template is almost empty. It’s better to create a child-component:

1
2
3
import CellColumnSummary from './models-table/cell-column-summary';
export default CellColumnSummary.extend({
});

Based on the described three properties, a few more are calculated, namely, the minimum, maximum, average value and sum for mappedData and mappedSelectedItems (mappedExpandedItems is skipped). Those properties are useful only if column contains numbers.

As usual demo for new features is available on ember-twiddle – Inline edit and columns summary. This one big demo contains next:

  • models-table/cell-edit-toggle usage
  • Custom components usage for inline data-edit
  • Predefined aggregate data usage
  • Custom aggregate data usage

, , ,

Add comment

Top ↑ | Main page | Back