New Twiddle

components.data-table\.js

import Component from '@glimmer/component';

export default class extends Component {
}

controllers.application\.js

import Controller from '@ember/controller';

export default class ApplicationController extends Controller {
}

routes.index\.js

import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';

export default class IndexRoute extends Route {
  @service data;
  
  model() {
    return { people: this.data.people };
  }
}

services.data\.js

import Service from '@ember/service';

const COLORS = ['blue', 'green', 'orange', 'purple', 'red', 'yellow'];

let getRandomColor = () => COLORS[Math.floor(Math.random() * COLORS.length)];

export const EMBER_CORE_TEAM = [
  {
    firstName: 'Matthew',
    lastName: 'Beale',
    github: 'mixonic',
    twitter: 'mixonic',
    teams: ['The Steering Committee', 'The Ember.js Core Team'],
    favoriteColor: getRandomColor(),
  },
  {
    firstName: 'Edward',
    lastName: 'Faulkner',
    github: 'ef4',
    twitter: 'eaf4',
    teams: ['The Steering Committee', 'The Ember.js Core Team'],
    favoriteColor: getRandomColor(),
  },
  {
    firstName: 'Katie',
    lastName: 'Gengler',
    github: 'kategengler',
    twitter: 'katiegengler',
    teams: ['The Steering Committee', 'The Ember.js Core Team', 'The Ember CLI Core Team'],
    favoriteColor: getRandomColor(),
  },
  {
    firstName: 'Yehuda',
    lastName: 'Katz',
    github: 'wycats',
    twitter: 'wycats',
    teams: ['The Steering Committee', 'The Ember.js Core Team'],
    favoriteColor: getRandomColor(),
  },
  {
    firstName: 'Kenigbolo',
    lastName: 'Meya',
    github: 'kenigbolo',
    twitter: 'expensivestevie',
    teams: ['The Steering Committee'],
    favoriteColor: getRandomColor(),
  },
  {
    firstName: 'Leah',
    lastName: 'Silber',
    github: 'wifelette',
    twitter: 'wifelette',
    teams: ['The Steering Committee', 'The Ember.js Core Team', 'The Ember Learning Core Team'],
    favoriteColor: getRandomColor(),
  },
  {
    firstName: 'Godfrey',
    lastName: 'Chan',
    github: 'chancancode',
    twitter: 'chancancode',
    teams: ['The Ember.js Core Team'],
    favoriteColor: getRandomColor(),
  },
  {
    firstName: 'Tom',
    lastName: 'Dale',
    github: 'tomdale',
    twitter: 'tomdale',
    teams: ['The Ember.js Core Team'],
    favoriteColor: getRandomColor(),
  },
  {
    firstName: 'Chris',
    lastName: 'Garrett',
    github: 'pzuraq',
    twitter: 'pzuraq',
    teams: ['The Ember.js Core Team'],
    favoriteColor: getRandomColor(),
  },
  {
    firstName: 'Dan',
    lastName: 'Gebhardt',
    github: 'dgeb',
    twitter: 'dgeb',
    teams: ['The Ember.js Core Team', 'The Ember Data Core Team'],
    favoriteColor: getRandomColor(),
  },
  {
    firstName: 'Chad',
    lastName: 'Hietala',
    github: 'chadhietala',
    twitter: 'chadhietala',
    teams: ['The Ember.js Core Team'],
    favoriteColor: getRandomColor(),
  },
  {
    firstName: 'Robert',
    lastName: 'Jackson',
    github: 'rwjblue',
    twitter: 'rwjblue',
    teams: ['The Ember.js Core Team', 'The Ember CLI Core Team', 'The Ember Data Core Team'],
    favoriteColor: getRandomColor(),
  },
  {
    firstName: 'Ricardo',
    lastName: 'Mendes',
    github: 'locks',
    twitter: 'locks',
    teams: ['The Ember.js Core Team', 'The Ember Learning Core Team'],
    favoriteColor: getRandomColor(),
  },
  {
    firstName: 'Kris',
    lastName: 'Selden',
    github: 'krisselden',
    twitter: 'krisselden',
    teams: ['The Ember.js Core Team'],
    favoriteColor: getRandomColor(),
  },
  {
    firstName: 'Melanie',
    lastName: 'Sumner',
    github: 'melsumner',
    twitter: 'melaniersumner',
    teams: ['The Ember.js Core Team'],
    favoriteColor: getRandomColor(),
  },
  {
    firstName: 'Igor',
    lastName: 'Terzic',
    github: 'igorT',
    twitter: 'terzicigor',
    teams: ['The Ember.js Core Team', 'The Ember Data Core Team'],
    favoriteColor: getRandomColor(),
  },
  {
    firstName: 'Kelly',
    lastName: 'Selden',
    github: 'kellyselden',
    twitter: 'kellyselden',
    teams: ['The Ember CLI Core Team'],
    favoriteColor: getRandomColor(),
  },
  {
    firstName: 'David',
    lastName: 'Hamilton',
    github: 'hjdivad',
    twitter: 'hjdivad',
    teams: ['The Ember Data Core Team'],
    favoriteColor: getRandomColor(),
  },
  {
    firstName: 'Chris',
    lastName: 'Thoburn',
    github: 'runspired',
    twitter: 'runspired',
    teams: ['The Ember Data Core Team'],
    favoriteColor: getRandomColor(),
  },
  {
    firstName: 'Jared',
    lastName: 'Galanis',
    github: 'jaredgalanis',
    twitter: 'jaredgalanis',
    teams: ['The Ember Learning Core Team'],
    favoriteColor: getRandomColor(),
  },
  {
    firstName: 'Jessica',
    lastName: 'Jordan',
    github: 'jessica-jordan',
    twitter: 'jjordan_dev',
    teams: ['The Ember Learning Core Team'],
    favoriteColor: getRandomColor(),
  },
  {
    firstName: 'Amy',
    lastName: 'Lam',
    github: 'amyrlam',
    twitter: 'amyrlam',
    teams: ['The Ember Learning Core Team'],
    favoriteColor: getRandomColor(),
  },
  {
    firstName: 'Kenneth',
    lastName: 'Larsen',
    github: 'kennethlarsen',
    twitter: 'kennethlarsen',
    teams: ['The Ember Learning Core Team'],
    favoriteColor: getRandomColor(),
  },
  {
    firstName: 'Isaac',
    lastName: 'Lee',
    github: 'ijlee2',
    twitter: null,
    teams: ['The Ember Learning Core Team'],
    favoriteColor: getRandomColor(),
  },
  {
    firstName: 'Chris',
    lastName: 'Manson',
    github: 'mansona',
    twitter: 'real_ate',
    teams: ['The Ember Learning Core Team'],
    favoriteColor: getRandomColor(),
  },
  {
    firstName: 'Robert',
    lastName: 'Wagner',
    github: 'rwwagner90',
    twitter: 'shipshapecode',
    teams: ['The Ember Learning Core Team'],
    favoriteColor: getRandomColor(),
  },
  {
    firstName: 'Jen',
    lastName: 'Weber',
    github: 'jenweber',
    twitter: 'jwwweber',
    teams: ['The Ember Learning Core Team'],
    favoriteColor: getRandomColor(),
  },
  {
    firstName: 'Krati',
    lastName: 'Ahuja',
    github: 'kratiahuja',
    twitter: 'kratiahuja',
    teams: ['Emeritus'],
    favoriteColor: getRandomColor(),
  },
  {
    firstName: 'David',
    lastName: 'Baker',
    github: 'acorncom',
    twitter: 'acorncom',
    teams: ['Emeritus'],
    favoriteColor: getRandomColor(),
  },
  {
    firstName: 'Tobias',
    lastName: 'Bieniek',
    github: 'Turbo87',
    twitter: 'TobiasBieniek',
    teams: ['Emeritus'],
    favoriteColor: getRandomColor(),
  },
  {
    firstName: 'Jacob',
    lastName: 'Bixby',
    github: 'trabus',
    twitter: 'trabus',
    teams: ['Emeritus'],
    favoriteColor: getRandomColor(),
  },
  {
    firstName: 'Erik',
    lastName: 'Bryn',
    github: 'ebryn',
    twitter: 'ebryn',
    teams: ['Emeritus'],
    favoriteColor: getRandomColor(),
  },
  {
    firstName: 'Trek',
    lastName: 'Glowacki',
    github: 'trek',
    twitter: 'trek',
    teams: ['Emeritus'],
    favoriteColor: getRandomColor(),
  },
  {
    firstName: 'Nathan',
    lastName: 'Hammond',
    github: 'nathanhammond',
    twitter: 'nathanhammond',
    teams: ['Emeritus'],
    favoriteColor: getRandomColor(),
  },
  {
    firstName: 'Todd',
    lastName: 'Jordan',
    github: 'toddjordan',
    twitter: 'tddjordan',
    teams: ['Emeritus'],
    favoriteColor: getRandomColor(),
  },
  {
    firstName: 'Sivakumar',
    lastName: 'Kailasam',
    github: 'sivakumar-kailasam',
    twitter: 'sivakumar_k',
    teams: ['Emeritus'],
    favoriteColor: getRandomColor(),
  },
  {
    firstName: 'Terence',
    lastName: 'Lee',
    github: 'hone',
    twitter: 'hone02',
    teams: ['Emeritus'],
    favoriteColor: getRandomColor(),
  },
  {
    firstName: 'Alex',
    lastName: 'Matchneer',
    github: 'machty',
    twitter: 'machty',
    teams: ['Emeritus'],
    favoriteColor: getRandomColor(),
  },
  {
    firstName: 'Brendan',
    lastName: 'McLoughlin',
    github: 'bmac',
    twitter: 'BezoMaxo',
    teams: ['Emeritus'],
    favoriteColor: getRandomColor(),
  },
  {
    firstName: 'Clemens',
    lastName: 'Müller',
    github: 'pangratz',
    twitter: 'pangratz',
    teams: ['Emeritus'],
    favoriteColor: getRandomColor(),
  },
  {
    firstName: 'Martin',
    lastName: 'Muñoz',
    github: 'mmun',
    twitter: '_mmun',
    teams: ['Emeritus'],
    favoriteColor: getRandomColor(),
  },
  {
    firstName: 'Alex',
    lastName: 'Navasardyan',
    github: 'twokul',
    twitter: 'twokul',
    teams: ['Emeritus'],
    favoriteColor: getRandomColor(),
  },
  {
    firstName: 'Stefan',
    lastName: 'Penner',
    github: 'stefanpenner',
    twitter: 'stefanpenner',
    teams: ['Emeritus'],
    favoriteColor: getRandomColor(),
  },
  {
    firstName: 'Christoffer',
    lastName: 'Persson',
    github: 'wecc',
    twitter: 'ChristofferP',
    teams: ['Emeritus'],
    favoriteColor: getRandomColor(),
  },
  {
    firstName: 'Stanley',
    lastName: 'Stuart',
    github: 'fivetanley',
    twitter: 'fivetanley',
    teams: ['Emeritus'],
    favoriteColor: getRandomColor(),
  },
  {
    firstName: 'Peter',
    lastName: 'Wagenet',
    github: 'wagenet',
    twitter: 'wagenet',
    teams: ['Emeritus'],
    favoriteColor: getRandomColor(),
  },
];

export default Service.extend({
  get people() {
    return EMBER_CORE_TEAM;
  }
});

templates.application\.hbs

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

<div class="p-4 h-screen overflow-hidden flex flex-col">
  {{outlet}}
</div>

templates.components.data-table\.hbs

<div class="shadow overflow-y-auto border-b border-gray-200 sm:rounded-lg">
  <table hidden class="bg-red-700 min-w-full">
    <thead>
      <tr>
        {{#each @columns as |column|}}
          <th scope="col" class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b border-gray-200">
            {{column.label}}
          </th>
        {{/each}}
      </tr>
    </thead>
    <tbody></tbody>
  </table>

  <table class="min-w-full">
    <thead>
      <tr>
        {{#each @columns as |column|}}
          <th scope="col" class="sticky top-0 px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b border-gray-200">
            {{column.label}}
          </th>
        {{/each}}
      </tr>
    </thead>
    <tbody>
      {{#each @data as |row|}}
        <tr>
          {{#each @columns as |column|}}
            <td class="px-6 py-3 whitespace-nowrap text-sm text-gray-900">
              {{get row column.key}}
            </td>
          {{/each}}
        </tr>
      {{/each}}
    </tbody>
  </table>
</div>

templates.index\.hbs

<DataTable
  @columns={{array
    (hash key="firstName" label='First name')
    (hash key="lastName" label='Last name')
    (hash key="github" label='GitHub')
    (hash key="twitter" label='Twitter')
  }}
  @data={{@model.people}}
/>

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0"
  }
}