Alphabetical Table Grids

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

helpers.table.js

import Ember from 'ember';

export function drawTable(){
    var array = [
'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',];
    var windowSize = $(window).width();
    var maxWidth = 50;
    var maxColumn = 2;

    if(windowSize < 400){
        maxWidth = 33;
        maxColumn = 3;
    }
    if(windowSize < 1800){
        maxWidth = 25;
        maxColumn = 4;
    }
      if(windowSize < 2400){
        maxWidth = 20;
        maxColumn = 5;
    }
    
    var maxItemInColumn = Math.ceil(array.length/maxColumn);
    
    var result = "<div style='width:100%;'>";
    result += "<ul style='float:left;'>";
    for (var j = 0; j < array.length; j++) {
        result += "<li>" + array[j] + "</li>";
        if ((j + 1) % maxItemInColumn === 0) {
            result += "</ul><ul style='float:left;'>";
        }
    }
    result += "</ul>";
    result += "</div>";

    var d1 = document.getElementById('grids');
		d1.insertAdjacentHTML('afterend', result);
}
drawTable();
$( window ).resize(function() {
    drawTable()
});

export default Ember.Helper.helper(table);

templates.application.hbs

<h1 id="grids">Alphbetical Table Grids</h1>

<br>
    {{#each-table items as |table|}}
      {{index}}
    {{/each-table}}
    

templates.components.each-table.hbs

{{#each (table) as |table|}}
  {{yield}}
{{/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"
  }
}