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 issues.
Ember Table versions each support a range of browsers and framework versions:
| Ember Table Version | Ember Versions Supported | Browser Support |
|---|---|---|
| 5.x | 3.12 - 4.x | Last two versions of Chrome, Safari, Edge, Firefox on desktop and mobile. |
| 4.x | 2.18 - 4.x | Last two versions of Chrome, Safari, Edge, Firefox on desktop and mobile. |
| 3.x | 2.8 - 3.28 (last 3.x version | Last two versions of Chrome, Safari, Edge, Firefox on desktop and mobile. |
| 2.x | 1.11 - 3.8 (or around 3.8) | IE11+ and newer browsers |
ember install ember-tableUse resolutions in your package.json to pin down ember-classy-page-object to version 0.7.0.
Newer versions are used to support Ember >= 3.28
- 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.
Documentation is available at: https://opensource.addepar.com/ember-table/docs
Ember Table uses ember-cli-addon-docs for its documentation.
To run the docs locally, 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 flexibility 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();
rows.pushObject({
open: '8AM',
close: '8PM',
});
rows.pushObject({
open: '11AM',
close: '9PM',
});
return rows;
});The following template renders a simple table.
<EmberTable as |t|>
<t.head @columns={{this.columns}} />
<t.body @rows={{this.rows}} />
</EmberTable>
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 cellcell- 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):
<EmberTable as |t|>
<t.head @columns={{this.columns}} />
<t.body @rows={{this.rows}} as |b|>
<b.row as |r|>
<r.cell as |value column row|>
{{component column.component value=value}}
</r.cell>
</b.row>
</t.body>
</EmberTable>
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.
You can also use the ember-tfoot component, which has the same API as
ember-tbody:
<EmberTable as |t|>
<t.head @columns={{this.columns}} />
<t.body @rows={{this.rows}} />
<t.foot @rows={{this.footerRows}} />
</EmberTable>
Ember Table comes with test helpers, for example:
To use these helpers, you should setup Ember Table for testing in your application's tests/test-helper.js file. For example:
import { setupForTest as setupEmberTableForTest } from 'ember-table/test-support';
setupEmberTableForTest();Ember Table provides experimental Glint types defined in the /types/ directory.
These types may change at any time and are NOT covered by Ember Table's semantic versioning.
They are intended to support standard documented usage of Ember Table and do not attempt to type the internals of the Ember Table addon.
If you are using Ember Table in a more advanced way (such as extending Ember Table components), you will still need to define your own types for those use cases.
Assuming you have the Ember Table addon installed, you can import and register Ember Table's Glint types in the manner recommended by the Glint docs:
// types/global.d.ts
import '@glint/environment-ember-loose';
import EmberTableRegistry from 'ember-table/template-registry';
declare module '@glint/environment-ember-loose/registry' {
export default interface Registry extends EmberTableRegistry, /* other addon registries */ {
// local entries
}
}- Define a type interface for your row contents. If your columns contain additional custom attributes, you can type those as well. Ember Table provides default interfaces that can be extended for this purpose.
- Extend the base Ember Table component passing in your row and (optional) column interfaces as generics.
- Use this extended version of the Ember Table component in your template.
// my-table-component.ts
import type { EmberTableColumn, EmberTableRow } from 'ember-table';
import EmberTableComponent from 'ember-table/components/ember-table/component';
interface MyTableColumn extends EmberTableColumn {
// Add any custom column attribute types here (optional)
}
interface MyTableRow extends EmberTableRow {
// Add the attributes and types for your table rows here
}
class MyEmberTableComponent extends EmberTableComponent<MyTableRow, MyTableColumn> {}
export default class MyTableComponent extends Component<MyTableComponentSignature> {
emberTableComponent = MyEmberTableComponent;
}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):
- Rename all your ember-table import to ember-table-legacy. (for example:
import EmberTable from 'ember-table/components/ember-table'becomesimport EmberTableLegacy from 'ember-table-legacy/components/ember-table-legacy'. Remove reference ofember-tableinpackage.json. - Install
ember-table-legacyusingyarn add ember-table-legacyornpm install ember-table-legacy - Run your app to make sure that it works without issue.
- Reinstall the latest version of this
ember-tablerepo. - You can start using new version of Ember table from now or replacing the old ones.
We use release-it.
To create a new release, run yarn run release. To do a dry-run: yarn run release --dry-run.
The tool will prompt you to select the new release version.
This library is documented using Ember Addon Docs. v0.6.3+ of that library bring a CSS reset files into the test suite of Ember Table, meaning many tests would be corrupted away from the useragent styles they were written against.
Because of this, building the docs requires going through Ember Try. For example to run tests asserting the docs build:
ember try:one ember-default-docs
You might also want to run a command with the addon docs libraries installed, for example to create a production build, and you can do so like this:
ember try:one ember-default-docs --- ember build -e production
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent