A table implementation based on CSS grid instead of semantic HTML table elements.
Being grid based allows more flexibility, e.g. the ability to have rows be links.
- Ember.js v3.24 or above
- Ember CLI v3.24 or above
- Node.js v12 or above
ember install ember-tableish
To render simple content:
<EmberTableish as |table|>
<table.Headers as |headers|>
<headers.Header @width='10rem'>
First Name
</headers.Header>
<headers.Header @width='10%'>
Middle Name
</headers.Header>
<headers.Header>
Last Name
</headers.Header>
</table.Headers>
<table.Body>
{{#each this.people as |person|}}
<table.Row>
<div>{{person.firstName}}</div>
<div>{{person.middleName}}</div>
<div>{{person.lastName}}</div>
</table.Row>
{{/each}}
</table.Body>
</EmberTableish>To render longer content with vertical-collection:
<EmberTableish as |table|>
<table.Headers as |headers|>
<headers.Header @width='10rem'>
First Name
</headers.Header>
<headers.Header @width='10%'>
Middle Name
</headers.Header>
<headers.Header>
Last Name
</headers.Header>
</table.Headers>
<VerticalCollection
class={{table.bodyCls}}
@tagName='div'
@estimateHeight='1.5rem'
@items={{this.people}}
as |person|>
<LinkTo class={{table.rowCls}} @route='person' @model={{person.id}}>
<div>{{person.firstName}}</div>
<div>{{person.middleName}}</div>
<div>{{person.lastName}}</div>
</LinkTo>
</VerticalCollection>
</EmberTableish>Default column width is 1fr.
See the Contributing guide for details.
This project is licensed under the MIT License.
