Pfthb

I have defined a model in EmberJS with the following attributes:

import DS from 'ember-data';

export default DS.Model.extend(
 "name": DS.attr('string'),
 "status": DS.attr('string'),
 "email1": DS.attr('string'),
 "account_name": DS.attr('string'),
 "phone_work": DS.attr('string'),
 "date_entered": DS.attr('string'),
 "date_modified": DS.attr('string')
);

I am creating a component called fields-list that would render these attributes into a table (headers, body; just like a typical table to list some fields). However, instead of making the table bound to this model only, I want to make the component fully dynamic, so that other models with different field names could also reuse this component to generate their tables as well.

This way, whenever the component is used, it detects the model and populates the headers of the table as well as the body according to the fields in that model.

How do I achieve this? If there is anything that's not clear in the query please do let me know, I've tried my best to explain the issue properly as much as I can. Thanks in advance!

I don't personally use Ember Data, so there might be better ways to do what you're doing, but I got a solution for you available as an ember twiddle or as a gist. This is nothing more than a proof of concept.

Let's break the question down really fast. You want to create a component that can take any model and magically build a table for you. At the highest level, we know that we need to be able to iterate over the data model's definition and create columns of specific types based off of the Ember Data types you've passed as DS.attr. Thinking further, we know Ember Data must have some sort of ability to do the same: eachAttribute. If it's a private API, recognize this is brittle and version specific (aka write tests).

So, given a model Foo:

import Model from 'ember-data/model';
import attr from 'ember-data/attr';

export default Model.extend(
 "name": attr('string'),
 "status": attr('string')
);

Let's get the model's definition via the constructor:

var record = this.store.createRecord('foo', 
 name: "model1",
 status: "status1"
);
this.modelClass = record.constructor;

Ember light table takes a columns definition object which we can create dynamically from within our component through the use of eachAttribute on said model class:

columns: computed('modelClass', function() 
 let modelClass = this.modelClass;
 if(!modelClass) return 
 let columns = ;
 modelClass.eachAttribute(function(key, meta) 
 columns.push(
 label: key,
 valuePath: key
 );
 );
 return columns;
)

it's here that you could inspect the meta parameter of the eachAttribute function for the specific type of each attribute to set the cellComponent property within the column definition should you want to render different cell types.

There's a project called Ember Admin that builds up a CRUD interface automagically off of your data model so there's a place of inspiration.

Why resort to addons if you can just build this yourself?

app/templates/some-route.hbs

<FieldsList
 @resources=users
 @columns='id, firstName, lastName, job.title, job.company.name'
 @sortBy='firstNameAsc'
 @filterBy='firstName, lastName'
/>

app/components/fields-list/component.js

import Component from '@ember/component';
import computed from '@ember/object';

export default Component.extend(
 classNames: ['fields-list'],

 // Splits the string of keys into an array
 columnMap: computed(function() 
 return this.columns.replace(/ /g, '').split(/,/g);
 )
);

app/components/fields-list/template.hbs

<ul>
 #each resources as 
 <li>
 column
 <span>get resource key</span>
 /each
 </li>
 else
 <li>No humans found</li>
 /each
</ul>

app/components/fields-list/style.scss

.fields-list 
 li 
 display: flex;
 span 
 flex: 1;
 
 

Done in ember-cli: 3.5.0