Switch branches/tags
addepar andy/add-column andy/lltree-add-rm andy/lltree-touchup andy/readme-doc-instructions andy/tree-add-rm azirbel/fix-blueprint azirbel/is-destroying-check-addepar azirbel/sorting azirbel/wiggle-fix billy/add-migration-into-readme billy/add-yarn-lock-to-gitignore billy/alphan-2 billy/check-empty-column billy/custom-header-row billy/fillup-columns billy/fix-ember-cli-eslint billy/fix-resize-sencor-callback billy/header-actions billy/more-component-tests billy/new-table-css billy/prepare-alpha billy/refactor-multiselection billy/replace-debugger billy/row-height-api billy/send-action-from-header billy/send-footer-event billy/subcolumns billy/table-theme billy/temp billy/test-support-drag-column billy/update-ember-decorator bugfix/use-sticky-polyfill-in-all-browsers cyril/componentize cyril/ember-1.10 cyril/ember-1.13 cyril/ember-2.0 cyril/find-fixrow cyril/show-scrollbars cyril/tests cyril/update-blueprints demo-app dev-htmlbars dev dlloyd/move-pkg-to-addepar-org ebryn/ember-1.8-morph-support-dist ebryn/fix-html ebryn/handlebars-2.0 ebryn/htmlbars ember-1.9 ember-1.10 ember-1.11 ember-1.12 ember-table-one gh-pages-legacy gh-pages jordan/ember-1.10 kevin/performance/style-bindings lydia/remove-css-importants lydia/remove-problematic-css-importants lydia/table-height-option lydia/tableHeight master pzuraq/feat/add-vertical-collection-passthroughs pzuraq/polyfill/polyfill-thead-tfoot-sticky pzuraq/upgrade/ember-1.10 revert-501-andy/tree-table-nullable selection-after-rows-change thang/bugScrollbar
Nothing to show
Clone or download
ynotdraw and twokul Yield to inverse when tbody rows are empty (#608)
* Yield to inverse when tbody rows are empty

* Yield to inverse if it is supported
Latest commit 13a8cad Dec 12, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode [modernize] Adds Contextual Component API (#541) Jun 2, 2018
addon-test-support [feat] Adds column level configs functionality (#571) Jul 6, 2018
addon Yield to inverse when tbody rows are empty (#608) Dec 12, 2018
app [bugfix] Removes a bunch of unnecessary files that weren't being used ( Jun 18, 2018
config [bugfix] Properly alias cellValue (#567) Jun 30, 2018
tests Yield to inverse when tbody rows are empty (#608) Dec 12, 2018
vendor Initial Commit from Ember CLI v2.12.1 Jun 26, 2017
.bowerrc Initial Commit from Ember CLI v2.12.1 Jun 26, 2017
.editorconfig Initial Commit from Ember CLI v2.12.1 Jun 26, 2017
.ember-cli Initial Commit from Ember CLI v2.12.1 Jun 26, 2017
.eslintignore [upgrade] Ember 3.0 (#528) May 17, 2018
.eslintrc.js [upgrade] Ember 3.0 (#528) May 17, 2018
.gitignore Add yarn.lock to gitignore (#462) Dec 5, 2017
.npmignore [upgrade] Ember 3.0 (#528) May 17, 2018
.prettierrc.js [restructure] New Table API (#517) Apr 26, 2018
.sass-lint.yml [restructure] New Table API (#517) Apr 26, 2018
.travis.yml [bugfix] Properly alias cellValue (#567) Jun 30, 2018
.watchmanconfig Initial Commit from Ember CLI v2.12.1 Jun 26, 2017
LICENSE.md [upgrade] Ember 3.0 (#528) May 17, 2018
README.md fix README typo (#576) Jul 9, 2018
ember-cli-build.js [guides] Finalize Guides for v2.0.0-beta.1 (#549) Jun 16, 2018
index.js [bugfix] Basic Fastboot Support (#548) Jun 13, 2018
jsconfig.json cleanup(build): Removes Bower, uses NPM and latest vertical-collection Jul 26, 2017
package.json Release v2.0.0-beta.6 Oct 31, 2018
testem.js [upgrade] Ember 3.0 (#528) May 17, 2018


Build Status

Ember Table

An addon to support large data set and a number of features around table. Ember Table can handle over 100,000 rows without any rendering or performance issue. This version of Ember Table supports Ember 1.11 to latest version of Ember.


ember install ember-table


  • Column resizing, column reordering.
  • Table resizing.
  • Fixed first column.
  • Custom row and custom header.
  • Handles transient state at cell level.
  • Single, multiple row selection.
  • Table grouping.


For more detailed documentation, clone the repo, run yarn && yarn start and then navigate to http://localhost:4200/docs


To use Ember Table, you need to create columns and rows dataset.

columns is an array of objects which has multiple fields to define behavior of the column. The objects can be simple POJOs, and there are no hard requirements about their shape. They may have a valuePath, and if they do this path will be used to get the value from each row for that column. If you only want to use the default template, you can also specify a name on the column which will be rendered in the template.

  columns: [
      name: `Open time`,
      valuePath: `open`
      name: `Close time`,
      valuePath: `close`

rows could be a javascript array, ember array or any data structure that implements length and objectAt(index). This flexibity gives application to avoid having all data at front but loads more data as user scrolls. Each object in the rows data structure should contains all fields defined by all valuePath in columns array.

  rows: computed(function() {
    const rows = emberA();

      open: '8AM',
      close: '8PM'

      open: '11AM',
      close: '9PM'

    return rows;


The following template renders a simple table.

  {{#ember-table as |t|}}
    {{t.head columns=columns}}

    {{t.body rows=rows}}

You can use the block form of the table to customize its template. The component structure matches that of actual HTML tables, and allows you to customize it at any level. At the cell level, you get access to these four values:

  • value - The value of the cell
  • cell - A unique cell cache. You can use this to track cell state without dirtying the underlying model.
  • column - The column itself.
  • row - The row itself.

You can use these values to customize cell in many ways. For instance, if you want to have every cell in a particular column use a component, you can add a component field to your column (or feel free to use any other property name you like):

  {{#ember-table as |t|}}
    {{t.head columns=columns}}

    {{#t.body rows=rows as |b|}}
      {{#b.row as |r|}}
        {{#r.cell as |value column row|}}
          {{component column.component value=value}}

The rendered table is a plain table without any styling. You can define styling for your own table. If you want to use default table style, import the ember-table/default SASS file.

Optional Footer

You can also use the ember-tfoot component, which has the same API as ember-tbody:

  {{#ember-table as |t|}}
    {{t.head columns=columns}}

    {{t.body rows=rows}}

    {{t.foot rows=footerRows}}

Migrating from old Ember table

To support smooth migration from old version of Ember table (support only till ember 1.11), we have move the old source code to separate package ember-table-legacy. It's a separate package from this Ember table package and you can install it using yarn or npm. This allows you to have 2 versions of ember table in your code base and you can start your migrating one table at at time. The recommended migration steps are as follows (if you are using ember 1.11):

  1. Rename all your ember-table import to ember-table-legacy. (for example: import EmberTable from 'ember-table/components/ember-table' becomes import EmberTableLegacy from 'ember-table-legacy/components/ember-table-legacy'. Remove reference of ember-table in package.json.
  2. Install ember-table-legacy using yarn add ember-table-legacy or npm install ember-table-legacy
  3. Run your app to make sure that it works without issue.
  4. Reinstall the latest version of this ember-table repo.
  5. You can start using new version of Ember table from now or replacing the old ones.