Drop support for Ember <2.8

We have removed support for older versions of Ember: anything below 2.8 is not supported anymore.

Originally, we remove support for Ember <2.4 because it is the last LTS (Long Term Support) release to receive bugfixes and security updates for an extended period (bugfixes for 36 weeks and security updates for 54 weeks.) But based on the survey results from the community, we ended up dropping support for Ember 2.4, as well.

We have also updated the testing targets which now only include Ember 2.8+ versions.

Drop IE11 support

Microsoft has been recommending to use Edge for some time now (since 2016.) There is no practical reason to keep supporting it. This also allowed us to remove some of the polyfill code bringing down the size of the library.

Drop support for Node <10

Node 10 is the current LTS (Long Term Support) release. There is no practical reason to support anything below that version.

Drop unused polyfills

Ember Table had a few polyfills as dependencies (to make sure that future functionality is available on the older versions of Ember.) Since Ember Table 3 supports Ember 2.8+ moving forward, we have removed the obsolete polyfills and trimmed the size of the library down.

You can browse the code:

• https://github.com/Addepar/ember-table/pull/848
• https://github.com/Addepar/ember-table/pull/867

Closure Actions

As we are dropping support for the older versions of Ember, we need to make sure we trim the usage of old/deprecated APIs, as well. This time around it is the mechanism by which the actions are propagated or sendAction API. sendAction API has been deprecated in favour of closure actions seems like forever ago (Ember 2.0+.)

ember-cli-sass@10 upgrade

While we were upgrading Ember-related dependencies, we decided to upgrade ember-cli-sass as well: ember-table: https://github.com/Addepar/ember-table/pull/829.

v10 switched to a different SASS compiler: https://github.com/sass/dart-sass.

v10 is the latest version available that was published about two years ago. ember-cli-sass has been in the maintenance mode for some time now. The natural step forward would be to evaluate other preprocessors (like PostCSS). Maybe, in the next release!

@html-next/vertical-collection@2.0 upgrade

vertical-collection is the library that powers the infinite scroll capability of Ember Table. This is how it can render thousands of rows without any issues.

We have removed the legacy compatibility code and dropped support for Ember <2.8. This release complements Ember Table 3 release nicely.

You can browse the code:

• https://github.com/html-next/vertical-collection/pull/321
• https://github.com/html-next/vertical-collection/releases/tag/v2.0.0

New Features

A few new features that we are proud of.

New “slack” width constraints

We have added two new width constraint modes: eq-container-slack and gte-container-slack. The new modes allocate the excess container whitespace into an additional column that vanishes when it is no longer needed.

We have also introduced a new parameter: initialFillMode. It is used exclusively in slack modes to perform the initial column layout.

Values and defaults are the same as fillMode. In eq-container-slack mode, fillMode and initialFillMode can be set to different values. The former is used for enforcing the width constraint, while the latter is used only for initial sizing. Please, see the documentation for examples.

Width constraint and modes mapping:

You can browse the code here:

• https://github.com/Addepar/ember-table/pull/865

Scroll Indicators

This feature indicates the scroll (both vertical and horizontal, in the scroll direction) by adding the shadow to the edge of the table.

Huge shoutout to @ahmacleod and @kpfefferle for landing these in Ember Table!

You can browse the code here:

• https://github.com/Addepar/ember-table/pull/814
• https://github.com/Addepar/ember-table/pull/854

Custom Selection Matcher

This feature came directly from the use case discovered during the development of Marketplace. The consumers of Ember Table are now able to override how the selection is compared to a row value.

export default class PeopleTable extends Component {
  selectionMatchFunction(a, b) {
    if (!a || !b) {
      return false;
    }
    // make a selection based on two properties instead of one
    return a.firstName === b.firstName && a.lastName === b.lastName;
  }
}

<!-- people-table component -->
<EmberTable as |t|>
  <t.head @columns={{this.columns}} />
  <t.body
    @checkboxSelectionMode="none"
    @onSelect={{this.onSelect}}
    @rows={{this.rows}}
    @rowSelectionMode="single"
    @selection={{this.selection}}
    @selectionMatchFunction={{this.selectionMatchFunction}}
  />
</EmberTable>

You can browse the code here:

• https://github.com/Addepar/ember-table/pull/824