data-table-cell.html

<dom-module id="data-table-cell">
  <template>
    <style is="custom-style">
      :host {
        flex: 1 0 100px;
        padding: 0 24px 0 24px;
        min-height: 10px; /* Prevent iron-list from looping when item height is really small */
        height: 48px;
        display: flex;
        align-items: center;
        overflow: hidden;
        transition: flex-basis 200ms, flex-grow 200ms;
      }

      :host([header]) {
        height: 56px;
      }

      :host([hidden]) {
        display: none;
      }
    </style>
    <content></content>
  </template>
  <script>
    Polymer({
      is: 'data-table-cell',

      properties: {
        bind: Object,
        order: Number,
        header: Boolean,
        width: String,
        flex: Number,

        column: {
          type: Object,
          observer: '_columnChanged'
        },

        beforeBind: {
          type: Object,
          value: function() {
            return function(data, cell) {};
          }
        },

        _instance: {
          type: Object,
          computed: '_templatize(column, _templatizer)'
        },

        _templatizer: Object
      },

      observers: ['_bindData(_instance, bind)'],

      attached: function() {
        if (!Polymer.Settings.useNativeShadow) {
          // cell is supposed to be placed outside the local dom of iron-data-table.
          Polymer.StyleTransformer.dom(this, 'iron-data-table', this._scopeCssViaAttr, true);
          if (this.domHost) {
            Polymer.StyleTransformer.dom(this, this.domHost.tagName.toLowerCase(), this._scopeCssViaAttr, false);
          }
        }

        // in some cases the _columnChanged observer is run before the cell has
        // been turned into a html element and the inline styles don't get applied.
        // Applying them after attaching fixes makes sure they're applied.
        this._setColumnStyleProperties(this.column);

        // TODO: for some reason this needs to be done async to work with Shadow
        // DOM. Left the sync call there also to prevent flickering with Shady DOM.
        this.async(function() {
          this._setColumnStyleProperties(this.column);
        });
      },

      _setColumnStyleProperties: function(column) {
        this.style.flexGrow = column.flex;
        this.style.flexDirection = column.alignRight ? 'row-reverse' : 'row';
        this.style.flexBasis = column.width;
        this.style.flexGrow = column.flex;
      },

      _orderChanged: function(e) {
        this.style.order = e.detail.value;
      },

      _widthChanged: function(e) {
        this.style.flexBasis = e.detail.value;
      },

      _flexChanged: function(e) {
        this.style.flexGrow = e.detail.value;
      },

      _hiddenChanged: function(e) {
        this.hidden = e.detail.value;
      },

      _templatizeRowChanged: function(e) {
        if (!this.header) {
          this._templatizer = e.detail.value;
        }
      },

      _templatizeHeaderChanged: function(e) {
        if (this.header) {
          this._templatizer = e.detail.value;
        }
      },

      _templatize: function(column, templatizer) {
        return templatizer.bind(column)(this);
      },

      _bindData: function(instance, data) {
        if (!this.header) {
          this.beforeBind(data, this);
        }
        instance.bind(data);
      },

      _columnChanged: function(column, oldColumn) {
        this._setColumnStyleProperties(column);

        this._addListener(column, oldColumn, 'width');
        this._addListener(column, oldColumn, 'flex');
        this._addListener(column, oldColumn, 'order');

        this.hidden = column.hidden;
        this._addListener(column, oldColumn, 'hidden');

        if (this.header && column.templatizeHeader) {
          this._templatizer = column.templatizeHeader;
        } else if (column.templatizeRow) {
          this._templatizer = column.templatizeRow;
        }
        this._addListener(column, oldColumn, 'templatizeRow');
        this._addListener(column, oldColumn, 'templatizeHeader');
      },

      // Adding listeners manually *seems* to work better with forwarded parent props
      // than normal data-binding. Something to do with notifying the paths correctly.
      _addListener: function(column, oldColumn, prop) {
        var eventName = Polymer.CaseMap.camelToDashCase(prop) + '-changed';
        var observerName = '_' + prop + 'Changed';

        if (oldColumn) {
          this.unlisten(oldColumn, eventName);
        }

        this.listen(column, eventName, observerName);
      }
    });
  </script>
</dom-module>