Search code examples
ember-cliember-table

How to add a custom row for adding data to ember-table?

I would like to add a custom row at the bottom of an ember-table so that it will allow the user to insert new rows to the table. Which approach should I take? The idea is similar to the one asked here but using a fixed row and ember-table.

Solution

  • I'd suggest extending Ember Table to override footerContent:

    import Ember from 'ember';
import TableComponent from 'ember-table/components/ember-table';
MyTable = TableComponent.extend({
  footerContent: ...
});

    You'd then override Ember.Table.Row with a custom row, and put that into footerContent. You could define an extra action on that row which grabs the row's data and adds it to content backing the main table. (You'd need to pass a reference to content into your custom row).

    You can do the same thing by overriding bodyContent, but I think using a footer is perfect for this purpose, and I increasingly think overriding bodyContent is a bad idea.