Ember Light Table

A lightweight contextual component based table addon that follows Ember's actions up, data down ideology.

Features

Custom component based column headers and cells
Infinite scroll support
Select & Multi-select
Fixed header and footer
Grouped columns
Expandable rows
Easy table manipulation
Easy override to table header and footer
Contextual component for header, body, and footer, as well as loading, no data, and expanded row

Installation

ember install ember-light-table

Helpful Links

Looking for help?

If it is a bug please open an issue on GitHub.

Usage

There are two parts to this addon. The first is the Table which you create with column definitions and rows, and the second is the component declaration.

Table Declaration

The Table constructor accepts an array of Columns or column options and an array of rows.

import Table from 'ember-light-table';
const table = new Table(columns, rows);

Here is a more real-word example

// components/my-table.js
import Ember from 'ember';
import Table from 'ember-light-table';

const computed = Ember.computed;

export default Ember.Component.extend({
  model: null,
  table: null,

  columns: computed(function() {
    return [{
      label: 'Avatar',
      valuePath: 'avatar',
      width: '60px',
      sortable: false,
      cellComponent: 'user-avatar'
    }, {
      label: 'First Name',
      valuePath: 'firstName',
      width: '150px'
    }, {
      label: 'Last Name',
      valuePath: 'lastName',
      width: '150px'
    }, {
      label: 'Address',
      valuePath: 'address'
    }, {
      label: 'State',
      valuePath: 'state'
    }, {
      label: 'Country',
      valuePath: 'country'
    }];
  }),

  init() {
    this._super(...arguments);
    this.set('table', new Table(this.get('columns'), this.get('model')));
  }
});

For a list of possible column options, please checkout out the docs.

Component Declaration

Now that we have our table, we can declare our component in our template.

{{#light-table table as |t|}}
  {{t.head}}

  {{#t.body as |body|}}
    {{#body.expanded-row as |row|}}
      Hello <b>{{row.firstName}}</b>
    {{/body.expanded-row}}

    {{#if isLoading}}
      {{#body.loader}}
        Loading...
      {{/body.loader}}
    {{/if}}

    {{#if table.isEmpty}}
      {{#body.no-data}}
        No users found.
      {{/body.no-data}}
    {{/if}}
  {{/t.body}}

  {{t.foot}}
{{/light-table}}

Please note that each of these contextual components have a wide array of options so it is advised to look through the documentation.

isabella232 / ember-light-table Goto Github PK