{"id":13533281,"url":"https://github.com/Addepar/ember-table","last_synced_at":"2025-04-01T21:32:08.963Z","repository":{"id":5971709,"uuid":"7193433","full_name":"Addepar/ember-table","owner":"Addepar","description":null,"archived":false,"fork":false,"pushed_at":"2025-02-06T15:00:47.000Z","size":32520,"stargazers_count":1691,"open_issues_count":99,"forks_count":355,"subscribers_count":193,"default_branch":"master","last_synced_at":"2025-03-25T21:15:16.744Z","etag":null,"topics":["ember","ember-addon","table"],"latest_commit_sha":null,"homepage":"https://opensource.addepar.com/ember-table/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Addepar.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2012-12-16T18:10:18.000Z","updated_at":"2025-03-17T14:50:20.000Z","dependencies_parsed_at":"2024-04-15T13:47:27.924Z","dependency_job_id":"7984b8a1-e682-4d84-81e0-47fbaa900afd","html_url":"https://github.com/Addepar/ember-table","commit_stats":{"total_commits":696,"total_committers":104,"mean_commits":"6.6923076923076925","dds":0.8936781609195402,"last_synced_commit":"b2e513f2766c518b4ea63ce4c259dac2cd7241d7"},"previous_names":[],"tags_count":79,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Addepar%2Fember-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Addepar%2Fember-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Addepar%2Fember-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Addepar%2Fember-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Addepar","download_url":"https://codeload.github.com/Addepar/ember-table/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246190578,"owners_count":20738061,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ember","ember-addon","table"],"created_at":"2024-08-01T07:01:18.330Z","updated_at":"2025-04-01T21:32:08.952Z","avatar_url":"https://github.com/Addepar.png","language":"JavaScript","readme":"![npm version](https://img.shields.io/npm/v/ember-table)\n\n# Ember Table\n\nAn addon to support large data set and a number of features around table. Ember Table can\nhandle over 100,000 rows without any rendering or performance issues.\n\nEmber Table versions each support a range of browsers and framework versions:\n\n| Ember Table Version | Ember Versions Supported     | Browser Support |\n| ------------------- | ---------------------------- | --------------- |\n| 5.x                 | 3.12 - 4.x                   | Last two versions of Chrome, Safari, Edge, Firefox on desktop and mobile. |\n| 4.x                 | 2.18 - 4.x                   | Last two versions of Chrome, Safari, Edge, Firefox on desktop and mobile. |\n| 3.x                 | 2.8 - 3.28 (last 3.x version | Last two versions of Chrome, Safari, Edge, Firefox on desktop and mobile. |\n| 2.x                 | 1.11 - 3.8 (or around 3.8)   | IE11+ and newer browsers |\n\n## Install\n\n```bash\nember install ember-table\n```\n### Using ember-table with Ember \u003c= 3.24\nUse resolutions in your package.json to pin down `ember-classy-page-object` to version `0.7.0`.\nNewer versions are used to support Ember \u003e= 3.28\n\n## Features\n\n- Column resizing, column reordering.\n- Table resizing.\n- Fixed first column.\n- Custom row and custom header.\n- Handles transient state at cell level.\n- Single, multiple row selection.\n- Table grouping.\n\n## Documentation\n\nDocumentation is available at: https://opensource.addepar.com/ember-table/docs\n\nEmber Table uses [ember-cli-addon-docs](https://github.com/ember-learn/ember-cli-addon-docs) for its documentation.\nTo run the docs locally, clone the repo, run `yarn \u0026\u0026 yarn start` and then navigate to `http://localhost:4200/docs`.\n\n## Usage\n\nTo use `Ember Table`, you need to create `columns` and `rows` dataset.\n\n`columns` is an array of objects which has multiple fields to define behavior of the column.\nThe objects can be simple POJOs, and there are no hard requirements about their shape.\nThey _may_ have a `valuePath`, and if they do this path will be used to get the value from\neach row for that column. If you only want to use the default template, you can also\nspecify a `name` on the column which will be rendered in the template.\n\n```javascript\ncolumns: [\n  {\n    name: `Open time`,\n    valuePath: `open`,\n  },\n  {\n    name: `Close time`,\n    valuePath: `close`,\n  },\n];\n```\n\n`rows` could be a javascript array, ember array or any data structure that implements `length` and\n`objectAt(index)`. This flexibility gives application to avoid having all data at front but loads more\ndata as user scrolls. Each object in the `rows` data structure should contains all fields defined\nby all `valuePath` in `columns` array.\n\n```javascript\nrows: computed(function() {\n  const rows = emberA();\n\n  rows.pushObject({\n    open: '8AM',\n    close: '8PM',\n  });\n\n  rows.pushObject({\n    open: '11AM',\n    close: '9PM',\n  });\n\n  return rows;\n});\n```\n\n### Template\n\nThe following template renders a simple table.\n\n```\n  \u003cEmberTable as |t|\u003e\n    \u003ct.head @columns={{this.columns}} /\u003e\n\n    \u003ct.body @rows={{this.rows}} /\u003e\n  \u003c/EmberTable\u003e\n```\n\nYou can use the block form of the table to customize its template. The component\nstructure matches that of actual HTML tables, and allows you to customize it at\nany level. At the cell level, you get access to these four values:\n\n- `value` - The value of the cell\n- `cell` - A unique cell cache. You can use this to track cell state without\n  dirtying the underlying model.\n- `column` - The column itself.\n- `row` - The row itself.\n\nYou can use these values to customize cell in many ways. For instance, if you\nwant to have every cell in a particular column use a component, you can add a\n`component` field to your column (or feel free to use any other property name\nyou like):\n\n```\n  \u003cEmberTable as |t|\u003e\n    \u003ct.head @columns={{this.columns}} /\u003e\n\n    \u003ct.body @rows={{this.rows}} as |b|\u003e\n      \u003cb.row as |r|\u003e\n        \u003cr.cell as |value column row|\u003e\n          {{component column.component value=value}}\n        \u003c/r.cell\u003e\n      \u003c/b.row\u003e\n    \u003c/t.body\u003e\n  \u003c/EmberTable\u003e\n```\n\nThe rendered table is a plain table without any styling. You can define styling for your own table.\nIf you want to use default table style, import the `ember-table/default` SASS file.\n\n### Optional Footer\n\nYou can also use the `ember-tfoot` component, which has the same API as\n`ember-tbody`:\n\n```\n  \u003cEmberTable as |t|\u003e\n    \u003ct.head @columns={{this.columns}} /\u003e\n\n    \u003ct.body @rows={{this.rows}} /\u003e\n\n    \u003ct.foot @rows={{this.footerRows}} /\u003e\n  \u003c/EmberTable\u003e\n```\n\n## Writing tests for Ember Table in your application\n\nEmber Table comes with test helpers, for example:\n\nTo use these helpers, you should setup Ember Table for testing in your application's `tests/test-helper.js` file. For example:\n\n```js\nimport { setupForTest as setupEmberTableForTest } from 'ember-table/test-support';\n\nsetupEmberTableForTest();\n```\n\n## EXPERIMENTAL: Using Ember Table with Glint\n\nEmber Table provides **experimental** Glint types defined in the `/types/` directory.\nThese types may change at any time and are **NOT** covered by Ember Table's semantic versioning.\nThey are intended to support standard documented usage of Ember Table and do not attempt to type the internals of the Ember Table addon.\nIf 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.\n\n### Glint Types Installation\n\nAssuming 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](https://typed-ember.gitbook.io/glint/using-glint/ember/using-addons#using-glint-enabled-addons):\n\n```ts\n// types/global.d.ts\nimport '@glint/environment-ember-loose';\nimport EmberTableRegistry from 'ember-table/template-registry';\n\ndeclare module '@glint/environment-ember-loose/registry' {\n  export default interface Registry extends EmberTableRegistry, /* other addon registries */ {\n    // local entries\n  }\n}\n```\n\n### Glint Types Usage\n\n1. 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.\n1. Extend the base Ember Table component passing in your row and (optional) column interfaces as generics.\n1. Use this extended version of the Ember Table component in your template.\n\n```ts\n// my-table-component.ts\nimport type { EmberTableColumn, EmberTableRow } from 'ember-table';\nimport EmberTableComponent from 'ember-table/components/ember-table/component';\n\ninterface MyTableColumn extends EmberTableColumn {\n  // Add any custom column attribute types here (optional)\n}\n\ninterface MyTableRow extends EmberTableRow {\n  // Add the attributes and types for your table rows here\n}\n\nclass MyEmberTableComponent extends EmberTableComponent\u003cMyTableRow, MyTableColumn\u003e {}\n\nexport default class MyTableComponent extends Component\u003cMyTableComponentSignature\u003e {\n  emberTableComponent = MyEmberTableComponent;\n}\n```\n\n```hbs\n{{! my-table-component.hbs }}\n\u003cthis.emberTableComponent as |t|\u003e\n  {{! Use Ember Table as usual. Row and column arguments will be enforced to match the appropriate types. }}\n  {{! Yielded items (rows, columns) will be typed according to the specified interfaces. }}\n  {{! Cell values will be typed as a union of all defined row attribute types. }}\n\u003c/this.emberTableComponent\u003e\n```\n\n## Migrating from old Ember table\n\nTo support smooth migration from old version of Ember table (support only till ember 1.11), we have\nmove the old source code to separate package [ember-table-legacy](https://github.com/Addepar/ember-table-legacy).\nIt's a separate package from this Ember table package and you can install it using yarn or npm.\nThis allows you to have 2 versions of ember table in your code base and you can start your migrating\none table at at time. The recommended migration steps are as follows (if you are using ember 1.11):\n\n1. Rename all your ember-table import to ember-table-legacy. (for example:\n   `import EmberTable from 'ember-table/components/ember-table'` becomes\n   `import EmberTableLegacy from 'ember-table-legacy/components/ember-table-legacy'`. Remove reference\n   of `ember-table` in `package.json`.\n2. Install `ember-table-legacy` using `yarn add ember-table-legacy` or `npm install ember-table-legacy`\n3. Run your app to make sure that it works without issue.\n4. Reinstall the latest version of this `ember-table` repo.\n5. You can start using new version of Ember table from now or replacing the old ones.\n\n# Notes for maintainers\n\n### Releasing new versions (for maintainers)\n\nWe use [`release-it`](https://github.com/release-it/release-it).\nTo create a new release, run `yarn run release`. To do a dry-run: `yarn run release --dry-run`.\nThe tool will prompt you to select the new release version.\n\n**You must be a member of the @Addepar/web-core team on GitHub to bypass master\nbranch protection.**\n\n### Generating documentation.\n\nThis library is documented using Ember Addon Docs. v0.6.3+ of that library\nbring a CSS reset files into the test suite of Ember Table, meaning many\ntests would be corrupted away from the useragent styles they were written\nagainst.\n\nBecause of this, building the docs requires going through Ember Try. For\nexample to run tests asserting the docs build:\n\n```\nember try:one ember-default-docs\n```\n\nYou might also want to run a command with the addon docs libraries installed,\nfor example to create a production build, and you can do so like this:\n\n```\nember try:one ember-default-docs --- ember build -e production\n```\n","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAddepar%2Fember-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FAddepar%2Fember-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAddepar%2Fember-table/lists"}