How to make an a responsive table grid with alphabetical ordered columns

MASSIVE shout-out to @jenweber for helping me debug this throughout the day!

The problem was hiding in plain site at:

row.push(terms[i]);

As she explained , arrays of models have their own accessors. Therefore, we swapped that out for:

row.push(terms.objectAt(i));

And just like that, my 1-year old problem was SOLVED!

So the final code looked like:

// alpha-grid/component.js

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

export default Component.extend({

  rows: computed('terms.[]', function() {
    let terms = this.terms;
    let columns = Math.floor(window.innerWidth / 100);
    let itemsPerColumn = Math.ceil(terms.length / columns);
    let rows = [];
    for (let rowNumber = 0; rowNumber < itemsPerColumn; rowNumber++) {
      let row = [];
      for (let i = rowNumber; i < terms.length; i+= itemsPerColumn) {
        row.push(terms.objectAt(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);
  }
});
{{!-- alpha-grid/template.hbs (includes TailwindCSS) }}

<div class="flex flex-wrap">
	{{#each rows as |row|}}
		<div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/4 xxl:w-1/4 txl:w-1/4 txl:w-1/4 fxl:w-1/4">
			{{#each row as |item|}}
				<div>{{item.term}}</div>
			{{/each}}
		</div>
	{{/each}}
</div>
{{!-- term/letter }}

{{alpha-grid terms=model}}

{{outlet}}

Thank you all!

3 Likes