{"id":21192160,"url":"https://github.com/mu-semtech/ember-paper-data-table","last_synced_at":"2025-07-10T03:31:28.330Z","repository":{"id":57224125,"uuid":"121250772","full_name":"mu-semtech/ember-paper-data-table","owner":"mu-semtech","description":"Extension of ember-data-table with the ember-paper style","archived":false,"fork":false,"pushed_at":"2019-03-14T16:46:12.000Z","size":128,"stargazers_count":2,"open_issues_count":0,"forks_count":3,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-06-25T18:06:22.552Z","etag":null,"topics":["data-table","ember-addon","emberjs","mu-frontend","mu-semtech"],"latest_commit_sha":null,"homepage":"https://ember-paper-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}},"created_at":"2018-02-12T13:36:53.000Z","updated_at":"2020-01-13T18:58:01.000Z","dependencies_parsed_at":"2022-08-30T02:40:41.744Z","dependency_job_id":null,"html_url":"https://github.com/mu-semtech/ember-paper-data-table","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/mu-semtech/ember-paper-data-table","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mu-semtech%2Fember-paper-data-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mu-semtech%2Fember-paper-data-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mu-semtech%2Fember-paper-data-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mu-semtech%2Fember-paper-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-paper-data-table/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mu-semtech%2Fember-paper-data-table/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263937055,"owners_count":23532641,"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":["data-table","ember-addon","emberjs","mu-frontend","mu-semtech"],"created_at":"2024-11-20T19:07:46.383Z","updated_at":"2025-07-10T03:31:23.316Z","avatar_url":"https://github.com/mu-semtech.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Ember Paper Data Table\nExtension of [ember-data-table](https://github.com/mu-semtech/ember-data-table/) with [ember-paper](https://github.com/miguelcobain/ember-paper) styling.\n\n## Demo\nView a demo here: [https://ember-paper-data-table.semte.ch](https://ember-paper-data-table.semte.ch)\n\n## Installation\n```bash\nember install ember-paper\nember install ember-paper-data-table\n```\n\nImport the styles in `app.scss`\n```scss\n@import 'ember-paper';\n@import 'ember-paper-data-table';\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/mu-semtech/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\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## Documentation\nHave a look at the core [ember-data-table](https://github.com/mu-semtech/ember-data-table) for the full documentation.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmu-semtech%2Fember-paper-data-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmu-semtech%2Fember-paper-data-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmu-semtech%2Fember-paper-data-table/lists"}