Table component for scrolling through lines of data
hide the overflow on the body when the mouse enters the component to stop the scroll event from moving the whole page instead of just the data in the component


Isn't that already the default behavior of scrollable divs? Well, except the page doesn't set overflow:hidden on itself. Once your cursor is in a scrollable area, scroll will transfer there. When it reaches the end, the page scroll will pick up the rest of your scroll (really apparent when answering in SE with a really tiny textarea).

So I believe you're preventing that "page picking up after the end" thing. If so, you don't need to disable scrolling for the component. Once you hover over it, just disable the page scroll and enable when you move out.

Now for your code, you're inconsistently doing the "egyptian" (collapsed, K&amp;R) brackets. Well, the problem is the inconsistency, not the fact that you're using one or the other. Just choose one style and stick with it.

maxRow: Ember.computed('content', function () {
  return Ember.get(this, 'content.length');
}),

let TableComponent = Ember.Component.extend({
  tagName: 'table',
  layout: layout,
  ...


To make these checks easier, try configuring your IDE to tell you. I believe most IDEs/text editors have plugins for eslint, jshint, and jslint.