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

7

Apologies if I seem a little thick… I just finally figured out what all those j and i things meant this weekend. The joys of being self-taught. :face_with_monocle:

I knew this wouldn’t work, but not sure how to separate the two.

export default Component.extend({
  rows: computed('terms.[]', function() {
    let params = this.terms
    this.get.findAll('term', { letter: params.letter });
    let columns = Math.floor(window.innerWidth / 100);
    let itemsPerColumn = Math.ceil(params.length / columns);

    let rows = [];
    for (let rowNumber = 0; rowNumber < itemsPerColumn; rowNumber++) {
      let row = [];
      for (let i = rowNumber; i < params.length; i+= itemsPerColumn) {
        row.push(params[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);
  }
});

And.

Uncaught TypeError: Cannot read property 'letter' of undefined

Of course.