New Twiddle

components.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 {
  appName = 'Ember Twiddle';
}

router\.js

import EmberRouter from '@ember/routing/router';
import config from './config/environment';

const Router = EmberRouter.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('users', function() {
    this.route('index', function() {
      this.route('create');
    });
  });
});

export default Router;

routes.index\.js

import Route from '@ember/routing/route';

export default class IndexRoute extends Route {
  redirect() {
    this.transitionTo('users.index');
  }
}

routes.users.index\.js

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

export default class UsersIndexRoute extends Route {
  @service usersApi
  
  async model() {
    let users = await this.usersApi.findAll();
    
    return { users };
  }
}

services.users-api\.js

import Service from '@ember/service';

const USERS = [
  {
    name: 'Jane Cooper',
    title: 'Regional Paradigm Technician',
    email: 'jane.cooper@example.com',
    role: 'Admin'
  },
  {
    name: 'Cody Fisher',
    title: 'Product Directives Officer',
    email: 'cody.fisher@example.com',
    role: 'Owner'
  },
  {
    name: 'Esther Howard',
    title: 'Forward Response Developer',
    email: 'esther.howard@example.com',
    role: 'Member'
  },
  {
    name: 'Jenny Wilson',
    title: 'Central Security Manager',
    email: 'jenny.wilson@example.com',
    role: 'Member'
  },
  {
    name: 'Kristin Watson',
    title: 'Lead Implementation Liaison',
    email: 'kristin.watson@example.com',
    role: 'Admin'
  },
  {
    name: 'Cameron Williamson',
    title: 'Internal Applications Engineer',
    email: 'cameron.williamson@example.com',
    role: 'Member'
  },
];

export default class UsersApiService extends Service {
  async findAll() {
    return USERS;
  }
}

templates.application\.hbs

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

<div class="p-8">
  {{outlet}}
</div>

templates.components.table\.hbs

<div class="flex flex-col">
  <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
    <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
      <div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
        <table class="min-w-full divide-y divide-gray-200">
          <thead class="bg-gray-50">
            <tr>
              {{#each @columns as |column|}} 
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  {{column.name}}
                </th>
              {{/each}}
            </tr>
          </thead>
          <tbody class="bg-white divide-y divide-gray-200">
            <tr>
              <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                Jane Cooper
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                Regional Paradigm Technician
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                jane.cooper@example.com
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                Admin
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                <a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
              </td>
            </tr>

            <!-- More items... -->
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

templates.users.index\.hbs

<div class="md:flex md:items-center md:justify-between">
  <div class="flex-1 min-w-0">
    <h2 class="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate">
      Users
    </h2>
  </div>
  <div class="mt-4 flex md:mt-0 md:ml-4">
    <button type="button" class="ml-3 inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
      Create
    </button>
  </div>
</div>

{{outlet}}

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"
  }
}