README

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.4 or above
Ember CLI v2.13 or above
Node.js v8 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.

Cross-browser testing provided by:

Usage no npm install needed!