{"id":15540206,"url":"https://github.com/miguelcobain/ember-yeti-table","last_synced_at":"2025-05-05T22:27:29.148Z","repository":{"id":32883598,"uuid":"119976035","full_name":"miguelcobain/ember-yeti-table","owner":"miguelcobain","description":"Yeti Table","archived":false,"fork":false,"pushed_at":"2025-01-14T17:07:32.000Z","size":21780,"stargazers_count":61,"open_issues_count":40,"forks_count":16,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-21T03:09:57.370Z","etag":null,"topics":["datagrid","ember","tables","yeti"],"latest_commit_sha":null,"homepage":"https://miguelcobain.github.io/ember-yeti-table","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/miguelcobain.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2018-02-02T11:54:50.000Z","updated_at":"2025-01-14T17:06:53.000Z","dependencies_parsed_at":"2023-12-25T23:35:49.619Z","dependency_job_id":"519e5ca8-e470-4ed3-819a-d819490dbc98","html_url":"https://github.com/miguelcobain/ember-yeti-table","commit_stats":{"total_commits":285,"total_committers":12,"mean_commits":23.75,"dds":"0.10877192982456141","last_synced_commit":"db9ac6ffbd2bb6cf01140819f40ef215b30ae776"},"previous_names":[],"tags_count":27,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miguelcobain%2Fember-yeti-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miguelcobain%2Fember-yeti-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miguelcobain%2Fember-yeti-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miguelcobain%2Fember-yeti-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/miguelcobain","download_url":"https://codeload.github.com/miguelcobain/ember-yeti-table/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252585474,"owners_count":21772158,"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":["datagrid","ember","tables","yeti"],"created_at":"2024-10-02T12:13:12.676Z","updated_at":"2025-05-05T22:27:29.122Z","avatar_url":"https://github.com/miguelcobain.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Yeti Table [![Build Status](https://github.com/miguelcobain/ember-yeti-table/actions/workflows/ci.yml/badge.svg?branch=master)](https://github.com/miguelcobain/ember-yeti-table/actions/workflows/ci.yml) [![Ember Observer Score](http://emberobserver.com/badges/ember-yeti-table.svg)](http://emberobserver.com/addons/ember-yeti-table)\n\nYeti Table provides a new expressive way to build tables in Ember with flexibility in mind.\n\n## Installation\n\n```\nember install ember-yeti-table\n```\n\n## Why Yeti Table?\n\nPerhaps the biggest difference compared to other table solution is that Yeti Table uses templates to define your columns.\nIn many other table solutions you need to define columns in javascript.\nYeti Table was born from an experimentation of trying to define columns in templates.\n\nIn practice, this empowers customization and feels more in line with writing regular HTML tables.\nThis fact has many implications on the whole API of Yeti Table.\n\nYeti table currently weights around `6.17kb` (minified and gzipped).\n\n## Features\n\nYeti Table was built with the needs of a real production app in mind. Out of the box, it supports:\n\n- **Client side row sorting** - On a single column or on multiple columns.\n- **Client side row filtering** - You can apply a global filter to the table or just to specific columns.\n- **Client side pagination** - Provides pagination controls, but encourages you to build your own as well.\n- **Server side data** - Allows your server to drive the table pagination, filtering and sorting if you choose to. Useful when the dataset is too large to fetch.\n- **Customization** - Does not provide any styles. You can customize pretty much everything about how the tables are rendered on your templates. This includes custom css classes, click handlers and custom filtering and sorting logic.\n\n## Usage\n\nYour starting point for Yeti Table will be the `@data` argument. It accepts an array of objects\nor a promise that resolves to such an array.\n\nThen you must define your table columns inside the header component, each of them with a `@prop` argument that corresponds to the\nproperty key of each object that you want to display for that column. Yeti Table will update itself based on\nthese property names, e.g if a `firstName` property of an object changes, Yeti Table might need to re-sort\nor re-filter the rows.\n\nAfterwards, we just need to define our table body. If you use `\u003ctable.body/\u003e` in the blockless form,\nYeti Table \"unrolls\" all the rows for you. This is useful for simple tables. Here is such an example:\n\n```hbs\n\u003cYetiTable @data={{this.data}} as |table|\u003e\n\n  \u003ctable.header as |header|\u003e\n    \u003cheader.column @prop=\"firstName\"\u003e\n      First name\n    \u003c/header.column\u003e\n    \u003cheader.column @prop=\"lastName\"\u003e\n      Last name\n    \u003c/header.column\u003e\n    \u003cheader.column @prop=\"points\"\u003e\n      Points\n    \u003c/header.column\u003e\n  \u003c/table.header\u003e\n\n  \u003ctable.body/\u003e\n\n\u003c/YetiTable\u003e\n```\n\nYou will probably need to make more customizations, and to do so you will need to use `\u003ctable.header\u003e`\nand/or `\u003ctable.body\u003e` in the block form. This form allows you to:\n\n- Use any component or markup as a cell's content\n- Use the row data across multiple cells of the same row\n- Attach click listeners to the row or cell\n- Use row data to conditionally add classes\n\nEach `\u003cbody.row\u003e` component accepts an optional `@onClick` action that will be called if the row is clicked.\n\nAdditionally, you might need to toggle the visibility of each row, and for that we can use the `@visible` argument\non the `\u003cheader.column\u003e` component. It defaults to `true`. Setting it to false will hide all the cells for that column\naccross all rows.\n\nThe `\u003cheader.column\u003e` component also accepts a `@columnClass` argument. Yeti Table will apply this class all the cells\nfor that column accross all rows.\n\nCheck out more advanced features on the [Yeti Table documentation site](https://miguelcobain.github.io/ember-yeti-table).\n\n## Compatibility\n\n- Ember.js v3.20 or above\n- Ember CLI v3.20 or above\n\n## Editor integration\n\nYou can get autocomplete and additional information inside [Visual Studio Code](https://code.visualstudio.com/) by installing [els-addon-docs](https://github.com/lifeart/els-addon-docs) addon for [Unstable Ember Language Server](https://marketplace.visualstudio.com/items?itemName=lifeart.vscode-ember-unstable).\n\n## Credits\n\nCredits to the amazing [Ember Table](https://github.com/Addepar/ember-table) addon.\n\nYeti Table was also inpired by [DataTables](https://datatables.net/) in a lot of its features.\n\n## Contributing\n\n### Installation\n\n- `git clone \u003crepository-url\u003e`\n- `cd ember-yeti-table`\n- `npm install`\n\n### Linting\n\n- `npm run lint:hbs`\n- `npm run lint:js`\n- `npm run lint:js -- --fix`\n\n### Running tests\n\n- `ember test` – Runs the test suite on the current Ember version\n- `ember test --server` – Runs the test suite in \"watch mode\"\n- `ember try:each` – Runs the test suite against multiple Ember versions\n\n### Running the dummy application\n\n- `ember serve`\n- Visit the dummy application at [http://localhost:4200](http://localhost:4200).\n\nFor more information on using ember-cli, visit [https://ember-cli.com/](https://ember-cli.com/).\n\n## Contributing\n\nSee the [Contributing](CONTRIBUTING.md) guide for details.\n\n## License\n\nThis project is licensed under the [MIT License](LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmiguelcobain%2Fember-yeti-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmiguelcobain%2Fember-yeti-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmiguelcobain%2Fember-yeti-table/lists"}