ember-tableish

ember-tableish

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.

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:

<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.

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.