https://github.com/kturney/ember-tableish

A table implementation based on CSS grid
https://github.com/kturney/ember-tableish

ember

Last synced: 9 days ago
JSON representation

A table implementation based on CSS grid

• Host: GitHub
• URL: https://github.com/kturney/ember-tableish
• Owner: kturney
• License: mit
• Created: 2019-01-21T20:44:22.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2022-03-10T18:11:49.000Z (almost 3 years ago)
• Last Synced: 2024-11-15T22:53:55.766Z (about 1 month ago)
• Topics: ember
• Language: JavaScript
• Homepage:
• Size: 978 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# ember-tableish

[npm-badge]: https://img.shields.io/npm/v/ember-tableish.svg

[npm-badge-url]: https://www.npmjs.com/package/ember-tableish

[ember-observer-badge]: http://emberobserver.com/badges/ember-tableish.svg

[ember-observer-url]: http://emberobserver.com/addons/ember-tableish

[github-actions-badge]: https://github.com/kturney/ember-tableish/actions/workflows/main.yml/badge.svg?branch=master&event=push

[github-actions-url]: https://github.com/kturney/ember-tableish/actions/workflows/main.yml

[![Github Actions Status][github-actions-badge]][github-actions-url]

[![Latest NPM release][npm-badge]][npm-badge-url]

[![Ember Observer Score][ember-observer-badge]][ember-observer-url]

A table implementation based on [CSS grid](https://developer.mozilla.org/en-US/docs/Web/CSS/grid) instead of semantic HTML table elements.

Being grid based allows more flexibility, e.g. the ability to have rows be links.

## Compatibility

* Ember.js v3.24 or above

* Ember CLI v3.24 or above

* Node.js v12 or above

## Installation

```

ember install ember-tableish

```

## Usage

To render simple content:

```hbs

  

    

      First Name

    

    

      Middle Name

    

    

      Last Name

    

  

  

    {{#each this.people as |person|}}

      

        
{{person.firstName}}

        
{{person.middleName}}

        
{{person.lastName}}

      

    {{/each}}

  


```

To render longer content with [vertical-collection](https://github.com/html-next/vertical-collection):

```hbs

  

    

      First Name

    

    

      Middle Name

    

    

      Last Name

    

  

  

    

      
{{person.firstName}}

      
{{person.middleName}}

      
{{person.lastName}}

    

  


```

Default column width is [`1fr`](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#The_fr_Unit).

## Contributing

See the [Contributing](CONTRIBUTING.md) guide for details.

## License

This project is licensed under the [MIT License](LICENSE.md).