How to override properties of a add on in ember

Question

I wan to use ember-models-table addon and set the default values for customIcons and customClasses so I have added a component called form-table

app/components/form-table.js

and added the following code to it import modelsTableComponent from 'ember-models-table/components/models-table';

import modelsTableComponent from 'ember-models-table/components/models-table';

export default modelsTableComponent.extend({
    didInsertElement: function () {
       this._super(...arguments);

        this.$().attr('customIcons', Ember.Object.create({
            "sort-asc": "fa fa-chevron-down",
            "sort-desc": "fa fa-chevron-up",
            "column-visible": "fa fa-check-square-o",
            "column-hidden": "fa fa-square-o",
            "nav-first": "fa fa-chevron-left",
            "nav-prev": "fa fa-angle-left",
            "nav-next": "fa fa-angle-right",
            "nav-last": "fa fa-chevron-right",
            "caret": "fa fa-caret-down",
            "expand-row": "fa fa-plus",
            "collapse-row": "fa fa-minus"
        }));

        this.$().attr('customClasses', Ember.Object.create({
            "clearFilterIcon": "fa fa-times form-control-feedback",
            "clearAllFiltersIcon": "fa fa-times-circle-o"
        }));      
    }
});

but when I call

{{form-table
          data=table.data
          columns=table.columns}}

from the application.hbs under the templates folder and having the following code inside application.hbs under the controller folder I see nothing. And I don't get any error either.

import Ember from 'ember';

export default Ember.Controller.extend({
    table: {
        data: [
            Ember.Object.create({ id: 1, firstName: 'john', lastName: 'Smith', city: "CityA" }),
            Ember.Object.create({ id: 1, firstName: 'bob', lastName: 'Smith', city: "CityB" }),
        ],
        columns: [
            {
                "propertyName": "id",
                "title": "ID"
            },
            {
                "propertyName": "firstName",
                "title": "First Name"
            },
            {
                "propertyName": "lastName",
                "title": "Last Name"
            },
            {
                "propertyName": "city",
                "title": "City"
            }
        ]
    },

});

Howerver if I replace my code in the application.hbs file from

{{form-table
              data=table.data
              columns=table.columns}}

to

{{models-table
              data=table.data
              columns=table.columns}}

everything works. Does that mean I can't extend an add on ?

Answer 1

You missed the template for your {{form-table}} component. If you don't have to change components layout just specify it's template when extending:

export default modelsTableComponent.extend({
  layoutName: 'components/models-table'
});

Oh just noted from @kumkanillam answer that you also using didInsertElement hook wrong. DidInsertElement hook is meant for manipulation of dom elements. If you like to provide different defaults to {{models-table}} component you should define customIcons and customClasses as properties of your extended component. ember-models-table uses getWithDefault to access the property. Since properties would be always defined this will retrieve your properties defined in extend. You are still able to pass custom values to component on declaration as kumkanillam suggested.

So your extended component should look like:

import modelsTableComponent from 'ember-models-table/components/models-table';

export default modelsTableComponent.extend({
  layoutName: 'components/models-table',
  customIcons: {
    "sort-asc": "fa fa-chevron-down",
    "sort-desc": "fa fa-chevron-up",
    "column-visible": "fa fa-check-square-o",
    "column-hidden": "fa fa-square-o",
    "nav-first": "fa fa-chevron-left",
    "nav-prev": "fa fa-angle-left",
    "nav-next": "fa fa-angle-right",
    "nav-last": "fa fa-chevron-right",
    "caret": "fa fa-caret-down",
    "expand-row": "fa fa-plus",
    "collapse-row": "fa fa-minus"
  },
  customClasses: {
    "clearFilterIcon": "fa fa-times form-control-feedback",
    "clearAllFiltersIcon": "fa fa-times-circle-o"
  }
});

also make sure to delete the auto-generated template file if you have one. Otherwise that will override the inherited template.

Also in Ember 2.0 version the layoutName is no longer is needed.