Alphabetical Table Grids

components.alpha-grid.js

import Ember from 'ember';

export default Ember.Component.extend({
  rows: Ember.computed('names', function() {
    let names = this.get('names');
    let columns = Math.floor($(window).width() / 100);
    let itemsPerColumn = Math.ceil(names.length / columns);
    
    let rows = [];
    for (let rowNumber = 0; rowNumber < itemsPerColumn; rowNumber++) {
      let row = [];
  		for (let i = rowNumber; i < names.length; i+= itemsPerColumn) {
        row.push(names[i]);
      }
      rows.push(row);
    }
    return rows;
  }),
  handleResize() {
    this.notifyPropertyChange('rows');
  },
  didInsertElement() {
    this.handleResize = this.handleResize.bind(this);
    window.addEventListener('resize', this.handleResize);
  },
  willDestroyElement() {
		window.removeEventListener('resize', this.handleResize);
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  names: [
'Aaron',
'Abel',
'Abraham',
'Adam',
'Adrian',
'Aiden',
'Alan',
'Alejandro',
'Alex',
'Alexander',
'Amir',
'Andrew',
'Angel',
'Anthony',
'Antonio',
'Asher',
'Ashton',
'August',
'Austin',
'Avery',
'Axel',
'Ayden',
'Beau',
'Benjamin',
'Bennett',
'Bentley',
'Blake',
'Brandon',
'Brantley',
'Braxton',
'Brayden',
'Brody',
'Bryce',
'Bryson',
'Caleb',
'Calvin',
'Camden',
'Cameron',
'Carlos',
'Carson',
'Carter',
'Charles',
'Chase',
'Chris',
'Christian',
'Christopher',
'Cole',
'Colton',
'Connor',
'Cooper',
'Damian',
'Daniel',
'David',
'Dawson',
'Dean',
'Declan',
'Diego',
'Dominic',
'Dylan',
'Easton',
'Edward',
'Eli',
'Elias',
'Elijah',
'Elliot',
'Elliott',
'Emmanuel',
'Emmett',
'Eric',
'Ethan',
'Evan',
'Everett',
'Ezekiel',
'Ezra',
'Finn',
'Gabriel',
'Gael',
'Gavin',
'George',
'Giovanni',
'Graham',
'Grant',
'Grayson',
'Greyson',
'Harrison',
'Hayden',
'Henry',
'Hudson',
'Hunter',
'Ian',
'Isaac',
'Isaiah',
'Ivan',
'Jace',
'Jack',
'Jackson',
'Jacob',
'James',
'Jameson',
'Jason',
'Jasper',
'Jaxon',
'Jaxson',
'Jayce',
'Jayden',
'Jeremiah',
'Jeremy',
'Jesse',
'Jesus',
'Jill',
'Joel',
'John',
'Jonah',
'Jonathan',
'Jordan',
'Jose',
'Joseph',
'Joshua',
'Josiah',
'Juan',
'Jude',
'Julian',
'Justin',
'Kai',
'Kaiden',
'Kaleb',
'Karter',
'Kayden',
'Kevin',
'King',
'Kingston',
'Landon',
'Leo',
'Leonardo',
'Levi',
'Liam',
'Lincoln',
'Logan',
'Lorenzo',
'Luca',
'Lucas',
'Luis',
'Luke',
'Maddox',
'Malachi',
'Marcus',
'Mason',
'Mateo',
'Matteo',
'Matthew',
'Maverick',
'Max',
'Maximus',
'Maxwell',
'Messiah',
'Micah',
'Michael',
'Miguel',
'Miles',
'Nathan',
'Nathaniel',
'Nicholas',
'Noah',
'Nolan',
'Oliver',
'Oscar',
'Owen',
'Parker',
'Patrick',
'Preston',
'Renee',
'Rhett',
'Richard',
'Robert',
'Roman',
'Rosemary',
'Rowan',
'Ryan',
'Ryder',
'Ryker',
'Samuel',
'Santiago',
'Sawyer',
'Sebastian',
'Silas',
'Steven',
'Tanya',
'Theodore',
'Thomas',
'Timothy',
'Tristan',
'Tucker',
'Tyler',
'Victor',
'Vincent',
'Waylon',
'Wesley',
'Weston',
'William',
'Wyatt',
'Xander',
'Xavier',
'Zach',
'Zachary',
'Zayden',
'Zion',]
});

templates.application.hbs

<h1 id="grids">Alphbetical Table Grids</h1>
<br>
{{alpha-grid names=this.names}}

    

templates.components.alpha-grid.hbs

{{#each rows as |row|}}
  <div style="display: flex">
    {{#each row as |item|}}
      <div style="min-width: 100px">{{item}}</div>
    {{/each}}
  </div>
{{/each}}

twiddle.json

{
  "version": "0.15.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.2.2",
    "ember-template-compiler": "3.2.2",
    "ember-testing": "3.2.2"
  },
  "addons": {
    "ember-data": "3.2.0"
  }
}