Ember/Angular Table Component

README.md

Ember/Angular advanced nested components

Purpose

Working with @ebryn on a particular control that we discovered to be a pretty challenging and interesting problem to solve in EmberJS. Wanted to solve the same problem in AngularJS so we could discuss and draw comparisons. It seems to me at this point in both frameworks the situation is mostly covered, but perhaps requires some wiring that would be unintuitive for the average developer.

Requirement

A generic table control with templatable columns. Given a data set in the form of an array of objects, we need a customizable table because we need to do things like show/hide columns, sort consistantly, etc.

But for now, a templatable table is the first step.

Example

It should look something like this (angular psuedo-code):

<custom-table rows="rowData">
  <custom-column  header-text="Foo">
    foo is {{foo}}
  </custom-column>
  <custom-column header-text="Bar">
    {{bar}} in some custom way
  </custom-column>
</custom-table>

Eventually we'll need to be able to do something like this (angular psuedo-code):

<custom-table rows="rowData">
  <custom-column  header-text="Foo">
     <p ng-repeat="thing in foo.things">
        {{thing}}
     </p>
  </custom-column>
  <custom-column header-text="Bar">
    <bar-graph data="bar"></bar-graph>
  </custom-column>
</custom-table>

Summary

So that's the background. We need a generic table control that allows us to customize the content of the cells in the table, is easy to extend with sorting and showing/hiding columns.

Also: Here's the Plunker for a possible Angular solution I came up with this evening: http://plnkr.co/edit/8FLFASLlAUPTEN5Tkgwr?p=preview