data-table-column.html

<link rel="import" href="data-table-column-filter.html">

<dom-module id="data-table-column">
  <template>
    <template id="header">
      <data-table-column-filter label="[[column.name]]" value="{{column.filterValue}}" hidden$="[[!column.filterBy]]"></data-table-column-filter>
      <div hidden$="[[column.filterBy]]">[[column.name]]</div>
    </template>
  </template>
  <script>
    Polymer({
      is: 'data-table-column',

      properties: {
        /**
         * If `true`, cell contents will be aligned on the right
         */
        alignRight: {
          type: Boolean,
          value: false
        },

        /**
         * Name of the column. This value is displayed in the header cell of the column
         */
        name: {
          type: String,
          value: ''
        },

        /**
         * Path to a property that will be filtered by this column. If set, a filter input
         * will be automaticelly placed on the header cell of the column.
         */
        filterBy: String,

        /**
         * Filter value that will be used to filter the items using the property defined
         * in `filterBy` property.
         */
        filterValue: String,

        /**
         * Minimum width of the column
         */
        width: {
          type: String,
          value: "100px"
        },

        /**
         * Ratio of how the extra space between columns is distributed. If every cell
         * has the same `flex` value, the space will be distributed evenly.
         */
        flex: {
          type: Number,
          value: 1
        },

        /**
         * If `true`, the cells of this column will be hidden.
         */
        hidden: {
          type: Boolean,
          value: false
        },

        /**
         * Display order of the column in relation with the other columns.
         */
        order: {
          type: Number,
          notify: true
        },

        /**
         * Path to a property that will be sorted by this column. If set, a sorting
         * indicator will be automatically placed in the header cell of this column.
         */
        sortBy: {
          type: String
        },

        /*
         * Reference to the parent <iron-data-table> element.
         */
        table: Object,

        /**
         * Template for the header cell
         */
        headerTemplate: {
          type: Object,
          readOnly: true,
          value: function() {
            var custom = Polymer.dom(this).querySelector('template[is=header]');

            if (custom && custom.parentElement) {
              // set dataHost to the context where template has been defined
              var column = custom.parentElement;
              custom._rootDataHost = column.dataHost._rootDataHost || column.dataHost;
              return custom;
            }

            return Polymer.dom(this.root).querySelector('#header');
          }
        },

        /**
         * Template for the row item cell
         */
        template: {
          type: Object,
          readOnly: true,
          value: function() {
            var template = Polymer.dom(this).querySelector('template:not([is=header])');

            if (template) {
              if (this.dataHost) {
                // set dataHost to the context where template has been defined
                template._rootDataHost = this.dataHost._rootDataHost || this.dataHost;
              }

              return template;
            }
          }
        }
      },

      observers: [
        '_alignRightChanged(table, alignRight)',
        '_filterValueChanged(table, filterValue, filterBy)',
        '_filterByChanged(table, filterBy)',
        '_flexChanged(table, flex)',
        '_headerTemplateChanged(table, headerTemplate)',
        '_hiddenChanged(table, hidden)',
        '_nameChanged(table, name)',
        '_orderChanged(table, order)',
        '_sortByChanged(table, sortBy)',
        '_templateChanged(table, template)',
        '_widthChanged(table, width)'
      ],

      _notifyTable: function(table, path, value) {
        if (table.columns) {
          var index = table.columns.indexOf(this);
          table.notifyPath('columns.' + index + '.' + path, value);
        }
      },

      _alignRightChanged: function(table, alignRight) {
        this._notifyTable(table, 'alignRight', alignRight);
      },

      _nameChanged: function(table, name) {
        this._notifyTable(table, 'name', name);
      },

      _sortByChanged: function(table, sortBy) {
        this._notifyTable(table, 'sortBy', sortBy);
      },

      _flexChanged: function(table, flex) {
        this._notifyTable(table, 'flex', flex);
      },

      _headerTemplateChanged: function(table, headerTemplate) {
        this._notifyTable(table, 'headerTemplate', headerTemplate);
      },

      _hiddenChanged: function(table, hidden) {
        this._notifyTable(table, 'hidden', hidden);
      },

      _orderChanged: function(table, order) {
        this._notifyTable(table, 'order', order);
      },

      _templateChanged: function(table, template) {
        this._notifyTable(table, 'template', template);
      },

      _widthChanged: function(table, width) {
        this._notifyTable(table, 'width', width);
      },

      _filterByChanged: function(table, filterBy) {
        this._notifyTable(table, 'filterBy', filterBy);
      },

      _filterValueChanged: function(table, filterValue, filterBy) {
        this._notifyTable(table, 'filterValue', filterValue);
        this.fire('column-filter-changed', {value: filterValue, filterBy: filterBy});
      }
    });
  </script>
</dom-module>