{"id":19728529,"url":"https://github.com/mu-semtech/ember-data-table","last_synced_at":"2026-03-05T02:03:40.471Z","repository":{"id":6347881,"uuid":"55315205","full_name":"mu-semtech/ember-data-table","owner":"mu-semtech","description":"Data tables for Ember following Google Design specs","archived":false,"fork":false,"pushed_at":"2024-11-13T15:35:34.000Z","size":468,"stargazers_count":18,"open_issues_count":5,"forks_count":21,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-09-19T21:19:24.525Z","etag":null,"topics":["data-table","ember-addon","emberjs","mu-frontend","musemtech"],"latest_commit_sha":null,"homepage":"https://ember-data-table.semte.ch/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mu-semtech.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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,"publiccode":null,"codemeta":null}},"created_at":"2016-04-02T20:40:48.000Z","updated_at":"2022-01-15T16:25:07.000Z","dependencies_parsed_at":"2024-06-18T18:32:07.581Z","dependency_job_id":"1fc97881-d637-43b6-9dee-b246126efdcf","html_url":"https://github.com/mu-semtech/ember-data-table","commit_stats":{"total_commits":180,"total_committers":14,"mean_commits":"12.857142857142858","dds":0.3388888888888889,"last_synced_commit":"c690a3948b2d9d5f91d69f0a935c6b5cdb4862ca"},"previous_names":[],"tags_count":28,"template":false,"template_full_name":null,"purl":"pkg:github/mu-semtech/ember-data-table","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mu-semtech%2Fember-data-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mu-semtech%2Fember-data-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mu-semtech%2Fember-data-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mu-semtech%2Fember-data-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mu-semtech","download_url":"https://codeload.github.com/mu-semtech/ember-data-table/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mu-semtech%2Fember-data-table/sbom","scorecard":{"id":666960,"data":{"date":"2025-08-11","repo":{"name":"github.com/mu-semtech/ember-data-table","commit":"c690a3948b2d9d5f91d69f0a935c6b5cdb4862ca"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3.4,"checks":[{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Code-Review","score":3,"reason":"Found 10/30 approved changesets -- score normalized to 3","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE.md:0","Info: FSF or OSI recognized license: MIT License: LICENSE.md:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 11 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}}]},"last_synced_at":"2025-08-21T18:23:33.954Z","repository_id":6347881,"created_at":"2025-08-21T18:23:33.954Z","updated_at":"2025-08-21T18:23:33.954Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30106159,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-05T01:39:18.192Z","status":"online","status_checked_at":"2026-03-05T02:00:06.710Z","response_time":93,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["data-table","ember-addon","emberjs","mu-frontend","musemtech"],"created_at":"2024-11-12T00:01:49.158Z","updated_at":"2026-03-05T02:03:40.446Z","avatar_url":"https://github.com/mu-semtech.png","language":"JavaScript","readme":"# Ember Data Table\n[![Build Status](https://travis-ci.org/mu-semtech/ember-data-table.svg?branch=master)](https://travis-ci.org/mu-semtech/ember-data-table)\n[![npm version](https://badge.fury.io/js/ember-data-table.svg)](https://badge.fury.io/js/ember-data-table)\n\nData table for Ember based on a JSONAPI compliant backend.\n\nHave a look at [ember-paper-data-table](https://github.com/mu-semtech/emper-paper-data-table) to get a data table styled with [ember-paper](https://github.com/miguelcobain/ember-paper).\n\n## Installation\nIf you're using Ember \u003e v3.8\n```bash\nember install ember-data-table\n```\n\nFor Ember \u003c v3.8, use version 1.x of the addon\n```bash\nember install ember-data-table@1.2.2\n```\n\n## Getting started\nInclude the `DataTableRouteMixin` in the route which model you want to show in the data table. Configure the model name.\n\n```javascript\nimport Ember from 'ember';\nimport DataTableRouteMixin from 'ember-data-table/mixins/route';\n\nexport default Ember.Route.extend(DataTableRouteMixin, {\n  modelName: 'blogpost'\n});\n```\n\nNext, include the data table in your template:\n\n```htmlbars\n{{data-table\n  content=model\n  fields=\"firstName lastName age created modified\"\n  isLoading=isLoadingModel\n  filter=filter\n  sort=sort\n  page=page\n  size=size\n}}\n```\n\nNote: the filtering, sorting and pagination isn't done at the frontend. By including the `DataTableRouteMixin` in the route each change to the `filter`, `sort`, `page` and `size` params will result in a new request to the backend. The `DataTableRouteMixin` also sets an isLoadingModel flag while the route's model is being loaded.\n\nHave a look at [Customizing the data table](https://github.com/erikap/ember-data-table#customizing-the-data-table) to learn how you can customize the data table's header and body.\n\n## Data table component\n\n### Specification\n\nThe following parameters can be passed to the data-table component:\n\n| Parameter | Required | Default | Description |\n|-----------|----------|---------|-------------|\n| content | x | | a list of resources to be displayed in the table |\n| fields | | | names of the model fields to show as columns (seperated by whitespace) |\n| isLoading | | false | shows a spinner instead of the table content if true |\n| filter | | | current value of the text search |\n| sort | | | field by which the data is currently sorted |\n| page | | | number of the page that is currently displayed |\n| size | | | number of items shown on one page |\n| enableSizes | | true | flag to enable page size options dropdown |\n| sizes | | [5, 10, 25, 50, 100] | array of page size options (numbers) |\n| link | | | name of the route the first column will link to. The selected row will be passed as a parameter. |\n| onClickRow | | | action sent when a row is clicked. Takes the clicked item as a parameter. |\n| autoSearch | | true | whether filter value is updated automatically while typing (with a debounce) or user must click a search button explicitly to set the filter value.\n| noDataMessage | | No data | message to be shown when there is no content |\n| lineNumbers | | false | display a line number per table row (default: false). Must be true or false. |\n| searchDebounceTime | | 2000 | debounce time of the search action of the data table. Must be integer. |\n\nBy default the data table will make each column sortable. The search text box is only shown if the `filter` parameter is bound. Pagination is only shown if the pagination metadata is set on the model (see the [Ember Data Table Serializer mixin](https://github.com/mu-semtech/ember-data-table#serializer)).\n\n### Customizing the data table\nThe way the data is shown in the table can be customized by defining a `content` block instead of a `fields` parameter.\n\n```htmlbars\n{{#data-table content=model filter=filter sort=sort page=page size=size onClickRow=(action \"clickRow\") as |t|}}\n  {{#t.content as |c|}}\n    {{#c.header}}\n      {{th-sortable field='firstName' currentSorting=sort label='First name'}}\n      {{th-sortable field='lastName' currentSorting=sort label='Last name'}}\n      \u003cth\u003eAge\u003c/th\u003e\n      {{th-sortable field='created' currentSorting=sort label='Created'}}\n      \u003cth\u003eModified\u003c/th\u003e\n    {{/c.header}}\n    {{#c.body as |row|}}\n      \u003ctd\u003e{{row.firstName}}\u003c/td\u003e\n      \u003ctd\u003e{{row.lastName}}\u003c/td\u003e\n      \u003ctd\u003e{{row.age}}\u003c/td\u003e\n      \u003ctd\u003e{{moment-format row.created}}\u003c/td\u003e\n      \u003ctd\u003e{{moment-format row.modified}}\u003c/td\u003e\n    {{/c.body}}\n  {{/t.content}}\n{{/data-table}}\n```\nHave a look at the [helper components](https://github.com/mu-semtech/ember-data-table#helper-components).\n\n### Adding actions to the data table\nThe user can add actions on top of the data table by providing a `menu` block.\n```htmlbars\n{{#data-table content=model filter=filter sort=sort page=page size=size isLoading=isLoadingModel as |t|}}\n  {{#t.menu as |menu|}}\n    {{#menu.general}}\n      {{#paper-button onClick=(action \"export\") accent=true noInk=true}}Export{{/paper-button}}\n      {{#paper-button onClick=(action \"print\") accent=true noInk=true}}Print{{/paper-button}}          \n    {{/menu.general}}\n    {{#menu.selected as |selection datatable|}}\n      {{#paper-button onClick=(action \"delete\" selection table) accent=true noInk=true}}Delete{{/paper-button}}\n    {{/menu.selected}}\n  {{/t.menu}}\n  {{#t.content as |c|}}\n    ...\n  {{/t.content}}\n{{/data-table}}\n```\nThe menu block consists of a `general` and a `selected` block. The `menu.general` is shown by default. The `menu.selected` is shown when one or more rows in the data table are selected.\n\nWhen applying an action on a selection, the currently selected rows can be provided to the action by the `selection` parameter. The user must reset the selection by calling `clearSelection()` on the data table.\nE.g.\n```javascript\nactions:\n  myAction(selection, datatable) {\n    console.log(\"Hi, you reached my action for selection: \" + JSON.stringify(selection));\n    datatable.clearSelection();\n  }    \n```\n\n## Helper components\nThe following components may be helpful when customizing the data table:\n* [Sortable header](https://github.com/mu-semtech/ember-data-table#sortable-header)\n\n### Sortable header\nThe `th-sortable` component makes a column in the data table sortable. It displays a table header `\u003cth\u003e` element including an ascending/descending sorting icon in case the table is currently sorted by the given column.\n\n```htmlbars\n{{th-sortable field='firstName' currentSorting=sort label='First name'}}\n```\n\nThe following parameters are passed to the `th-sortable` component:\n\n| Parameter | Required | Description |\n|-----------|----------|-------------|\n| field | x | name of the model field in the column |\n| label | x | label to be shown in the column's table header |\n| currentSorting | x | current sorting (field and order) of the data according to [the JSONAPI specification](http://jsonapi.org/format/#fetching-sorting) |\n\nNote: the data table will update the `currentSorting` variable, but the user needs to handle the reloading of the data. The [Ember Data Table Route mixin](https://github.com/mu-semtech/ember-data-table#route) may be of use.\n\n## Mixins\nThe following mixins may be helpful to use with the data table:\n* [Serializer mixin](https://github.com/mu-semtech/ember-data-table#serializer)\n* [Route mixin](https://github.com/mu-semtech/ember-data-table#route)\n* [Default Query Params mixin](https://github.com/mu-semtech/ember-data-table#default-query-params)\n\n### Serializer\nUpon installation, the `DataTableSerializerMixin` is automatically included in your application serializer to add parsing of the filter, sortig and pagination meta data from the links in the [JSONAPI](http://jsonapi.org) responses. The data is stored in [Ember's model metadata](https://guides.emberjs.com/v2.9.0/models/handling-metadata/).\n\nTo include the `DataTableSerializerMixin` in your application, add the mixin to your application serializer:\n```javascript\nimport DS from 'ember-data';\nimport DataTableSerializerMixin from 'ember-data-table/mixins/serializer';\n\nexport default DS.JSONAPISerializer.extend(DataTableSerializerMixin, {\n\n});\n```\n\nE.g.\n```javascript\nmeta: {\n  count: 42\n},\nlinks: {\n  previous: '/posts?page[number]=1\u0026page[size]=10'\n  next: '/posts?page[number]=3\u0026page[size]=10'\n}\n```\nwill be parsed to\n```javascript\nmeta: {\n  count: 42,\n  pagination: {\n    previous: { number: 1, size: 10 },\n    next: { number: 3, size: 10 }\n  }\n}\n```\n\n### Route\nThe route providing data for the `data-table` component often looks similar. The model hook needs to query a list of resources of a specific model from the server. This list needs to be reloaded when the sorting, page or page size changes. The `DataTableRouteMixin` provides a default implementation of this behaviour. Just include the mixin in your route and specify the model to be queried as `modelName`.\n\n```javascript\nimport Ember from 'ember';\nimport DataTableRouteMixin from 'ember-data-table/mixins/route';\n\nexport default Ember.Route.extend(DataTableRouteMixin, {\n  modelName: 'post'\n});\n```\n\nThe `DataTableRouteMixin` specifies the `filter`, `page`, `sort` and `size` variables as `queryParams` of the route with the `refreshModel` flag set to `true`. As such the data is reloaded when one of the variables changes. A user can add custom options to be passed in the query to the server by defining a `mergeQueryOptions(parms)` function in the route. The function must return an object with the options to be merged.\n\n```javascript\nimport Ember from 'ember';\nimport DataTableRouteMixin from 'ember-data-table/mixins/route';\n\nexport default Ember.Route.extend(DataTableRouteMixin, {\n  modelName: 'post',\n  mergeQueryOptions(params) {\n    return { included: 'author' };\n  }\n});\n```\n\nNote: if the `mergeQueryOptions` returns a filter option on a specific field (e.g. `title`), the nested key needs to be provided as a string. Otherwise the `filter` param across all fields will be overwritten breaking the general search.\n\nE.g.\n```javascript\nmergeQueryOptions(params) {\n    return {\n        included: 'author',\n        'filter[title]': params.title\n    };\n}\n```\n\nThe `DataTableRouteMixin` also sets the `isLoadingModel` flag on the controller while the route's model is being loaded. Passing this flag to the data table's `isLoading` property will show a spinner while data is loaded.\n\n### Default Query Params\nThe `DefaultQueryParams` mixin provides sensible defaults for the `page` (default: 0), `size` (default: 25) and `filter` (default: '') query parameters. The mixin can be mixed in a controller that uses the `page` and `filter` query params.\n\n```javascript\nimport Ember from 'ember';\nimport DefaultQueryParamsMixin from 'ember-data-table/mixins/default-query-params';\n\nexport default Ember.Controller.extend(DefaultQueryParamsMixin, {\n  ...\n});\n```\n\nNote: if you want the search text field to be enabled on a data table, the filter parameter may not be `undefined`. Therefore you must initialize it on an empty query string (as done by the `DefaultQueryParams` mixin).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmu-semtech%2Fember-data-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmu-semtech%2Fember-data-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmu-semtech%2Fember-data-table/lists"}