aha-table.html

<!--
/**
 * @module aha-table
 *
 * Internal table helper component used by px-data-table.
 *
 * Originally based on https://github.com/liuwenchao/aha-table, but heavily modified.
 *
 */
-->

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="px-pagination.html">
<link rel="import" href="px-data-table-cell.html">
<link rel="import" href="../px-icon-set/px-icon-set.html">
<link rel="import" href="../px-icon-set/px-icon.html">
<link rel="import" href="../app-localize-behavior/app-localize-behavior.html"/>
<link rel="import" href="css/aha-table-styles.html">

<dom-module id="aha-table">
  <template>
    <style include="aha-table-styles"></style>
    <content id="columndefs"></content>

    <template is="dom-if" if="{{showColumnChooser}}">
      <div class="flex columnChooser u-mb-">
        <px-dropdown class="u-ml--" display-value="{{localize('Show/Hide Column')}}" items='{{_columnChooserItems}}' multi hide-selected clear-selections-on-change>
        </px-dropdown>
      </div>
    </template>

    <div class="scroll-body">

      <div id="scrollBodyTableContainer" class$="table {{_getTableClass(tableCells, tableColumns)}}" role="grid">
        <!-- Header -->
        <div class="tr tr--header" role="row">
          <template is="dom-repeat" items="{{meta}}" as="column">
            <template is="dom-if" if="{{!column.hide}}">
              <span role="columnheader" class$="{{_getHeaderClass(column)}}" draggable="{{enableColumnReorder}}" on-touchstart="_dragStartColumnHeader" on-touchmove="_touchMoveHeader" on-touchleave="_dragLeave" on-touchend="_touchDropColumnHeader" on-dragleave="_dragLeave" on-dragstart="_dragStartColumnHeader" on-dragover="_dragOverHeader" on-drop="_dragDropColumnHeader" on-dragend="_dragEndColumnHeader">
                <div class="flex header--container">
                  <span
                    class$="{{_getTextSortingClass(sortable, column, sortedColumn)}}"
                    on-tap="_sort">{{column.label}}<px-icon icon$="{{_getSortingIcon(sortable, column, sortedColumn, descending)}}" class$="{{_getSortingClass(sortable, column, sortedColumn, descending)}}"></px-icon>
                  </span>
                  <template is="dom-if" if="{{!_isEqual(column.type, 'selected')}}">
                    <template is="dom-if" if="{{enableColumnResize}}">
                      <div class="header--drag-handle" on-down="_headerResizeMouseDown" on-track="_headerTrack"></div>
                    </template>
                  </template>
                </div>
              </span>
            </template>
          </template>
        </div>

        <!-- Second Header (filter/select all) -->
        <div class$="{{_getSecondHeaderClass(_enableFilterRow)}}" role="row">
          <template is="dom-repeat" items="{{meta}}" as="column" id="filterRepeat">
            <span class$="{{_getFilterHeaderClass(column)}}" role="gridcell" hidden$="{{column.hide}}">
              <!-- select all checkbox -->
              <template is="dom-if" if="{{_isEqual(column.type, 'selected')}}">
                <span class="flex" hidden$="{{column.hide}}">
                  <template is="dom-if" if="{{!singleSelect}}">
                    <input id="selectAllCheckbox" role="checkbox" aria-label="Click to select or deselect all rows" type="checkbox" on-change="_clickSelectAll"/>
                  </template>
                </span>
              </template>

              <!-- filter entry -->
              <template is="dom-if" if="{{_isFilterableColumn(column, filterable)}}">
                <input role="textbox" aria-label="Enter text to filter column" placeholder="{{localize('Filter')}}" class="text-input text-input--filter" type="text" on-input="_filter" />
              </template>
            </span>
          </template>
        </div>
        <!-- Data rows -->
        <template id="recordList" is="dom-repeat" items="{{displayedRows}}" as="internalRow" strip-whitespace>

          <div role="row" class$="{{_getRowClass(internalRow,striped)}}">
            <!-- Data cells -->
            <template is="dom-repeat" items="{{meta}}" as="column">
              <!-- selected column checkbox or radio button -->
              <template is="dom-if" if="{{_isEqual(column.type, 'selected')}}">
                <span role="gridcell" class$="{{_getSelectedCellClass(internalRow._selected, internalRow._highlight)}}" hidden$="{{column.hide}}" on-tap="_clickRow">
                  <span class="flex flex--middle">
                    <template is="dom-if" if="{{!singleSelect}}">
                      <input role="checkbox" aria-label="Click to select row" type="checkbox" checked="{{internalRow._selected::change}}"/>
                    </template>
                    <template is="dom-if" if="{{singleSelect}}">
                      <input role="checkbox" aria-label="Click to select row" type="radio" name="selected" checked="{{internalRow._selected::change}}"/>
                    </template>
                  </span>
                </span>
              </template>
              <template id="cellRepeat" is="dom-if" if="{{!_isEqual(column.type, 'selected')}}">
                <template is="dom-if" if="{{!column.hide}}">
                  <px-data-table-cell
                      on-save="_save"
                      row-highlighted="[[internalRow._highlight]]"
                      cell-highlighted="[[_getHighlightValue(internalRow, column, column.highlightdefined)]]"
                      cell-selected="[[internalRow._selected]]"
                      on-validate="_handleValidateEvent"
                      cell-type="{{column.type}}"
                      dropdown-items="{{column.dropdownItems}}"
                      placeholder="{{column.placeholder}}"
                      cell-display-value="{{_readContent(internalRow, column)}}"
                      cell-value="{{_getInternalDataAt(internalRow, column.name)}}"
                      cell-display-tooltip="{{_shouldClipDatumString(internalRow, column)}}"
                      cell-editable="{{column.editable}}"
                      cell-validation="{{_getInternalCellValidationStateAt(internalRow, column.name)}}"
                      column-name="{{column.name}}"
                      on-tap="_clickCell">
                  </px-data-table-cell>
                </template>
              </template>
            </template>
          </div>
        </template>
      </div>

      <template is="dom-if" if="{{!displayedRows.length}}">
        <div class="flex flex--center no-results">{{localize('No Results')}}</div>
      </template>
    </div>

    <!-- Pagination controls -->
    <div class="pagination">
      <px-pagination class$="{{_getPaginationVisibility(hidePaginationControl)}}"
                    id="pagination"
                    data-remote="{{dataRemote}}"
                    number-of-items="{{_adaptedNumberOfItems}}"
                    page-size="{{pageSize}}"
                    page-size-options="{{pageSizeOptions}}"
                    first-item-index-to-display="{{firstItemIndex}}"
                    language="{{language}}"
                    use-key-if-missing="{{useKeyIfMissing}}"
                    resources="{{resources}}">
      </px-pagination>
    </div>
  </template>

</dom-module>
<script>
  Polymer({
    is: 'aha-table',

    behaviors: [
      Polymer.AppLocalizeBehavior
    ],

    properties: {
      //data: instance of the model data
      data: {
        type: Array,
        notify: true,
        value: function () {
          return [];
        }
      },
      //meta: instance of the model meta
      meta: {
        type: Array,
        value: function () {
          return [];
        }
      },
      //selected: all selected row will be referenced here.  Really only readable.
      selectedRows: {
        type: Array,
        value: function () {
          return [];
        },
        notify: true
      },
      //selectable: if table row is selectable
      selectable: {
        type: Boolean,
        value: false,
        observer: "_selectableChanged"
      },
      //single-select: if only one row can be selected
      singleSelect: {
        type: Boolean,
        value: false,
        observer: "_singleSelectChanged"
      },
      //striped: if table row is striped
      striped: {
        type: Boolean,
        value: false
      },
      //tableCells: if table row is striped
      tableCells: {
        type: Boolean,
        value: false
      },
      //tableColumns: if table row is striped
      tableColumns: {
        type: Boolean,
        value: false
      },
      //filterable: if table row is filterable
      filterable: {
        type: Boolean,
        value: false,
      },
      //filterable: if table columns are sortable
      sortable: {
        type: Boolean,
        value: false,
      },
      includeAllColumns: {
        type: Boolean,
        value: false,
        observer: '_includeAllColumnsChanged'
      },
      dynamicColumns: {
        type: Boolean,
        value: false
      },
      columnType: {
        type: String,
        value: "string"
      },
      //_enableFilterRow: if table row is _enableFilterRow
      _enableFilterRow: {
        type: Boolean,
        value: false
      },
      //sortedColumn: sorted column name
      sortedColumn: {
        type: String,
        value: ""
      },
      // the column names that are filtered on
      filteredColumns: {
        type: Array,
        value: function () {
          return [];
        }
      },
      //all rows that are currently displayed on the page (visible right now)
      displayedRows: {
        type: Array,
        value: function () {
          return [];
        }
      },
      //descending: current sorting order
      descending: {
        type: Boolean,
        value: false
      },
      /**
       * Property to set the the total number of entries in the table,
       * assuming that dataRemote is true and the data provided is only
       * for the visible page.
       *
       * Requires dataRemote="true" to take effect
       *
       *      <px-data-table data-remote="true" page-size total-entries="100"  first-item-index="0" table-data="{{data}}"></px-data-table>
       *
       * @default false
       */
      totalEntries: {
        type: Number,
        value: 10,
        observer: '_calculateAdaptedNumberOfItems'
      },
      /**
       * Property to set the the remote index of the first item on this page,
       * assuming that dataRemote is true and the data provided is only
       * for the visible page.
       *
       * Requires dataRemote="true" to take effect
       *
       * If on page 2 with a page size of 10, then the first-item-index would be 11.
       *
       *      <px-data-table data-remote="true" page-size total-entries="100"  first-item-index="0" table-data="{{data}}"></px-data-table>
       *
       * @default false
       */
      firstItemIndex: {
        type: Number,
        value: 1
      },
      /**
       * Property to set the the data paradigm.
       *
       * If this is false, then px-data-table expects all of the data to be provided to it.
       *
       * If this is true, then px-data-table will expect only one page's worth of data to be supplied.
       * This will require other fields to be set, e.g. page-size, total-entries, and first-item-index
       *
       *      <px-data-table data-remote="true" page-size total-entries="100"  first-item-index="0" table-data="{{data}}"></px-data-table>
       *
       * @default false
       */
      dataRemote: {
        type: Boolean,
        value: false
      },
      /**
       * Property to set the page size instead of the default of 10.
       *
       * In data-remote mode, page size may not match count of data provided.
       * Page size could be 50, but only 40 items are provided.
       *
       *      <px-data-table page-size="50" table-data="{{data}}"></px-data-table>
       *
       * @default 10
       */
      pageSize: {
        type: Number,
        value: 10,
        observer: '_setPageSize'
      },

      /**
       * When dataRemote is true, then this reflects the total count on observer
       * and numberOfItems reflects count of items in tableProperty to track the number of items in the table
       */
      _adaptedNumberOfItems: {
        type: Number,
      },

      /**
       * Property to track the number of items in the table
       *
       * Without dataRemote==true, this will be the total number of items
       * With dataRemote==true this will either be the page size or the number of items if less than the page size
       */
      numberOfItems: {
        type: Number,
        observer: '_calculateAdaptedNumberOfItems'
      },
      /**
       * Property to set the visibility of the table pagination controls.
       *
       *      <px-data-table hide-pagination-control="false" table-data="{{data}}"></px-data-table>
       *
       * @default false
       */
      hidePaginationControl: {
        type: Boolean,
        value: false
      },
      /**
       * Property to set the visibility of the table column chooser (used
       * to show and hide columns)
       *
       * @default false
       */
      showColumnChooser: {
        type: Boolean,
        value: false
      },
      /**
       * Property to enable draggability of column headers for reordering
       * columns
       *
       * @default false
       */
      enableColumnReorder: {
        type: Boolean,
        value: false
      },
      /**
       * Property to enable resizing of column headers through click and drag
       *
       * @default false
       */
      enableColumnResize: {
        type: Boolean,
        value: false
      },
      _internalData: {
        type: Array,
        value: function(){
          return [];
        }
      },
      /**
       * Array holding the column names in their displayed order
       *
       */
      _columnChooserItems: {
        type: Array,
        value: function() {
          return [];
        }
      },
      /**
       * Whether we're currently displaying an insertion column (when dragging columns)
       *
       */
      _displayingInsertion: {
        type: Boolean,
        value: false
      },
      _requestInsertionIndicatorRemoval: {
        type: Boolean,
        value: false
      },
      /**
       * When currently resizing a header
       */
      _headerInitialSize: {
        type: Number,
        value: 0
      },
      _columnDragged: {
        type: String,
        value: ''
      },
      _isAttached: {
        type: Boolean,
        value: false
      },
      //scroll body html element
      scrollBody: {
        type: String,
        value: '#scrollBodyTableContainer'
      },
      /**
       * Options displayed in the page size dropdown.
       */
      pageSizeOptions: {
        type: Array,
        value: function() {
          return [{"key":"1","val":"10"},
                  {"key":"2","val":"20"},
                  {"key":"3","val":"50"},
                  {"key":"4","val":"100"}];
        }
      }
    },

    observers: [
      '_updateDisplayedRows(firstItemIndex)', // when the first item to display changes
      '_updateDisplayedRows(pageSize)', // when the size of the page changes
      '_dataChanged(data.*)',
      '_computeColumnChooserItems(meta, meta.*)',
      '_computeIfColumnFilterEnabled(meta.splices, filterable, meta.*, selectable, singleSelect)'
    ],

    listeners: {
      'validate': '_handleValidateEvent',
      'px-dropdown-selection-changed': '_columnChooserChanged'
    },

    ready: function() {
      this.addEventListener('px-data-table-highlight-loaded', this._highlightLoaded.bind(this));
      var boundHandler = this._columnChanged.bind(this);
      this._observer = Polymer.dom(this.$.columndefs).observeNodes(boundHandler);
    },

    attached: function () {
      this._isAttached = true;
    },

    _columnChanged: function(info){
      if(this.selectable && this.meta.length === 0) this.push('meta', this._generateMetaForColumn("_selected", "selected", true, this.localize("Selected") + " (0)"));

      var addedColumns = info.addedNodes.filter(function(node) {
        return (node.nodeType === Node.ELEMENT_NODE && node.nodeName === 'PX-DATA-TABLE-COLUMN');
      });
      var removedColumns = info.removedNodes.filter(function (node) {
        return (node.nodeType === Node.ELEMENT_NODE && node.nodeName === 'PX-DATA-TABLE-COLUMN');
      });

      if(addedColumns.length > 0) {

        for (var i = 0; i < addedColumns.length; i++) {

          // default the type of the column to a string
          if (!addedColumns[i].type) {
            addedColumns[i].type = 'string';
          }

          if (!addedColumns[i]['label']) {
            var name = addedColumns[i]['name'] || '';
            addedColumns[i].label = name.charAt(0).toUpperCase() + name.slice(1);
          }

          this._addColumn(addedColumns[i]);
        }
      }

      removedColumns.forEach(function (columnToRemove) {
        this.meta.forEach(function (column, idx) {
          if (columnToRemove === column) {
            this.splice('meta', idx, 1);
          }
        }.bind(this));

      }.bind(this));
    },

    _addColumn: function(addedColumn) {
      //meta needs to reflect the order in light dom. Find the node just before this one
      var previousNode,
        notFound = this.getEffectiveChildren().every(function (column, index) {
          if (column.name === addedColumn.name) {
            return false;
          }

          previousNode = column;
          return true;
        });

      //if column found
      if (!notFound) {

        var idx = 0;
        //make sure we insert in the right place
        if (previousNode) {
          this.meta.forEach(function (column, index) {
            if (column.name === previousNode.name) {
              idx = index + 1;
            }
          });
          this.splice('meta', idx, 0, addedColumn);
        }
        else {
          if(this.selectable) idx += 1;
          this.splice('meta', idx, 1, addedColumn);
        }
      }
      else {
        this.push('meta', addedColumn);
      }
    },

    _selectedColumnExists: function(){
      return this.meta && this.meta[0] && this.meta[0].name === '_selected';
    },

    _highlightLoaded: function (evt) {
      evt = Polymer.dom(evt);
      var column = this._findFirstMatchingElementNameFromEventPath(evt, "PX-DATA-TABLE-COLUMN");

      column._highLightElLoadedCount += 1;
      if (column._highLightElLoadedCount === Polymer.dom(column).querySelectorAll('px-data-table-highlight').length) {
        var columnIndex = this._findMetaIndexFromColumnElement(column);
        if (columnIndex > 0) {
          this.set('meta.' + columnIndex + '.highlightdefined', true);
        }
      }
    },

    _findMetaIndexFromColumnElement: function (columnElement) {
      var columnIndex = -1;
      this.meta.some(
        function (item, idx) {
          if (item === columnElement) {
            columnIndex = idx;
            return true;
          }
        }
      );
      return columnIndex;
    },

    _findFirstMatchingElementNameFromEventPath: function (evt, nodeName) {
      var el;
      evt.path.some(function (node) {
        if (node.nodeName === nodeName) {
          el = node;
          return true;
        }
      });
      return el;
    },

    _dataChanged: function (changeRec) {
      if (this.data === undefined || this.data === null || (!this._isAttached && changeRec.base.length === 0)) {
        this._internalData = [];
        return;
      }

      //wait for us to be attached before processing data changes
      //debounce it as well
      if (!this._isAttached) {
        var _this = this;
        this.debounce('attach', function () {
          _this._dataChanged(changeRec);
        }, 10);
        return;
      }
      //check for dynamic table
      var refresh = false;
      if (this.dynamicColumns  && this.data && this.data[0]){
        var new_col = Object.keys(this.data[0]);
        var old_col = this.meta.reduce((init, one)=>{init.push(one.name); return init;} , []);

        if (new_col.length != old_col.length){
            this.meta = [];
            refresh = true;
        }else {
          for (var i = 0; i < new_col.length; i ++){
            if( new_col[i] != old_col[i]){
              this.meta = [];
              refresh = true;
              break;
            }
          }

        }

      }
      // if includeAllColumns is true, or if no px-data-table-columns have been defined,
      // need to calculate meta from the actual data passed in to the table
      if(this.includeAllColumns || this.meta.length === 0 || (this.meta.length === 1 && this.meta[0].name === "_selected")) {
        this._generateMetaFromData();
      }

      if ( !this._typeofComparison(this._internalData, "undefined") && this._internalData.length === 0) {
        this._internalData = this._initializeInternalData();
      } else {
        this._internalData = this._refreshInternalData(refresh);
      }
      this.selectedRows = this._internalData.filter(function (it) {
        return it._selected === true;
      });

      this._filterSortAndUpdateDisplayedTable();

      var pathNumber = new RegExp('([#])([0-9])+');

      if (pathNumber.test(changeRec.path)) {
        var index = pathNumber.exec(changeRec.path)[0].slice(1);
        var pathPieces = changeRec.path.split('.'),
          columnName = pathPieces[pathPieces.length - 1],
          column;
        this.meta.some(function (columnEl) {
          if (columnEl.name === columnName) {
            column = columnEl;
            return true;
          }
        });
        if (this._cellChanged(this._readContent(this._internalData[index], column), changeRec.value)) {
          this._handleValidateEvent(evt);
        }
      }

    },

    _getNumberOfItems: function (numberOfItems,totalEntries,dataRemote) {
      return dataRemote ? totalEntries : numberOfItems;
    },

    _includeAllColumnsChanged: function(newValue) {
      if(newValue === true) {
        this._generateMetaFromData();
      }
      else if (newValue === false && this._isAttached && this.getContentChildren('#columndefs').length > 0) {
        this.meta = this.getContentChildren('#columndefs').filter(function(node) {
          return (node.nodeType === Node.ELEMENT_NODE && node.nodeName === 'PX-DATA-TABLE-COLUMN');
        });
        this._selectableChanged(this.selectable);
      }
    },

    _selectableChanged: function(newSelectable) {
      // if meta is already defined and then selectable is set, we need to backfill the meta with the _selected column
      if (newSelectable === true && this.meta !== null && this.meta !== undefined && this.meta.length > 0) {
        this.splice('meta', 0, 0, this._generateMetaForColumn("_selected", "selected", true, this.localize("Selected") + " (0)"));
      } else if (newSelectable === false && this.meta !== null && this.meta !== undefined && this.meta.length > 0 && this.meta[0].name === "_selected") {
        this.shift('meta');
      }
    },

    _singleSelectChanged: function() {
      if(this._internalData && this.selectedRows.length > 1) this._setAllRows(false);
    },

    /********** Generating column metadata *************/


    _generateMetaFromData: function() {
      for(var prop in this.data[0]) {
        var previousNode,
            notFound = this.meta.every(function(column, index) {
              if(column.name === prop) {
                return false;
              }
              return true;
            });

        // if column not found
        if(notFound) {
          var colInfo = this._generateMetaForColumn(prop, this.columnType, false, prop.charAt(0).toUpperCase() + prop.slice(1));
          this.push('meta', colInfo);
        }
      }
    },

    _generateMetaForColumn: function (prop, type, isSelectAll, label) {
      return Polymer.Base.create('px-data-table-column', {
        name: prop,
        label: label,
        type: type,
        sortable: this.sortable,
        filterable: this.filterable,
        editable: false,
        required: false,
        hide: false,
        selectAll: isSelectAll,
        validate: function () { return { 'passedValidation': true }; }
      });
    },

    /********** Filter/Sort main function *************/

    _filterSortAndUpdateDisplayedTable: function () {
      var i,
        index,
        count = 0,
        self = this,
        len;

      // start at original data source (shadow fields, _selected and _filtered are still set)
      this.filteredSortedData = this._internalData;

      // reset back to unfiltered
      // leave _selected as is since selected rows should stay selected
      for (i = 0, len = this._internalData.length; i < len; i++) {
        this._setInternalDataAt(this._internalData[i], '_filtered', false);
      }

      if (!this.dataRemote) {
        // If remote, all sorting/filtering is done on server

        // sort
        if (this.sortedColumn) {
          this.filteredSortedData = this._sortByColumn(this.filteredSortedData);
        }

        // filter
        for (index in this.filteredColumns) {
          this.filteredSortedData = this._filterByColumn(this.filteredColumns[index].name,
            this.filteredColumns[index].userEntry, this.filteredSortedData);
        }

        // count total number of rows
        self = this;
        this._internalData.forEach(function (row) {
          if (!self._getInternalCellStateAt(row, '_filtered')) {
            count++;
          }
        });

        this.set('numberOfItems', count);

        // with filtering/sorting, it's best just to go back to the first page
        this.$.pagination.goToPageNumber(1);
      } else {
        this.$.pagination.updateDisplay();
        this.set('numberOfItems', this.totalEntries);
      }

      this._updateDisplayedRows();

      //update selected rows when changing the filter if the select all is enabled
      var selectAllCheckbox = Polymer.dom(this.root).querySelector("#selectAllCheckbox");
      if(selectAllCheckbox !== null && selectAllCheckbox !== undefined && selectAllCheckbox.checked){
          selectAllCheckbox.checked=false;
      }
    },

    /********** Internal data structure ***********/

    _refreshInternalData: function (resetDataState) {
      var _internalData = [],
        i,
        len;
      for (i = 0, len = this.data.length; i < len; i++) {
        var thisObj = this.data[i],
          cellDataObj = { dataIndex: i },
          resetDataFlag = resetDataState || i >= this._internalData.length;
        for (var key in thisObj) {
          if (Object.prototype.hasOwnProperty.call(thisObj, key)) {
            cellDataObj[key] = {};
            cellDataObj[key].value = thisObj[key];
            if (resetDataFlag) {
              cellDataObj[key]._validation = { passedValidation: true };
            } else if(this._internalData[i].row[key]._validation) {
              cellDataObj[key]._validation = this._internalData[i].row[key]._validation;
            }
          }
        }
        _internalData.push({
          row: cellDataObj,
          _filtered: (resetDataFlag ? false : this._internalData[i]._filtered),
          _selected: (resetDataFlag ? false : this._internalData[i]._selected),
          _highlight: (resetDataFlag ? { value: false, highlightColor: '' } : this._internalData[i]._highlight)
        });
      }
      return _internalData;
    },

    _initializeInternalData: function () {
      // make internal data structure with shadow fields
      return this._refreshInternalData(true);
    },

    // set helper method so we don't have to sprinkle logic of this internal data structure throughout
    _setInternalDataAt: function (row, columnName, value) {
      if (columnName === '_selected' || columnName === '_filtered' || columnName === '_highlight') {
        // shadow fields are in root of row in internal data
        this.set('displayedRows.' + this.displayedRows.indexOf(row) + '.' + columnName, value);
        row[columnName] = value;

      }
      else {
        // the user's data is in the row column of internal data
        row.row[columnName].value = value;
      }
    },

    // get helper method so we don't have to sprinkle logic of this internal data structure throughout
    _getInternalDataAt: function (row, columnName) {
      return this._getInternalCellStateAt(row, columnName).value;
    },

    _getInternalCellValidationStateAt: function (row, columnName) {
      return this._getInternalCellStateAt(row, columnName)._validation;
    },

    _setInternalCellValidationStateAt: function (row, columnName, value) {
      row.row[columnName]._validation = value;
    },

    _getInternalCellStateAt: function (row, columnName) {
      if (columnName === '_selected' || columnName === '_filtered') {
        // shadow fields are in root of row in internal data
        return row[columnName];
      }
      else {
        // the user's data is in the row column of internal data
        return (row.row[columnName] ? row.row[columnName] : {});
      }
    },

    /******* Update Displayed rows when major changes ****/

    _setPageSize: function () {
      this.$.pagination.setPageSize(this.pageSize);
    },

    _getInternalRowStateAt: function (row, columnName) {
      if(columnName === '_selected' || columnName === '_filtered') {
        return row;
      }
      else {
        return row.row;
      }
    },

    _updateDisplayedRows: function () {
      var fromPage,
        to;

      if (this.firstItemIndex !== null && this.firstItemIndex !== undefined &&
        this.pageSize !== null && this.pageSize !== undefined &&
        this.filteredSortedData !== undefined && this.filteredSortedData !== null && !this.hidePaginationControl) {

        fromPage = this.firstItemIndex - 1; // pagination is 1-based
        to = fromPage + parseInt(this.pageSize, 10);

        this.filteredSortedData = this.filteredSortedData.map( row => {
          row.isNew = true;
          return row;
        });

        if (this.dataRemote) {
          this.set('displayedRows', this.filteredSortedData);
        } else {
          this.set('displayedRows', this.filteredSortedData.slice(fromPage, to));
        }

      } else if (this.filteredSortedData !== undefined && this.filteredSortedData !== null && this.hidePaginationControl) {

        this.filteredSortedData = this.filteredSortedData.map( row => {
          row.isNew = true;
          return row;
        });

        this.set('displayedRows', this.filteredSortedData);
      }
    },

    /********** Sorting ************/

    /*
     * Fires a sort change request event
     *
     * Only called if remoteData==true
     *
     * Information is stored in `evt.detail`:
     * ```
     * document.getElementById("mytable").addEventListener("px-sort-change-intent", function(e) {
     *   var data = e.detail;
     *   console.log("Intended sort: ", JSON.parse(data));
     * });
     * // ==> [{name:'columnA',direction:'ascending'}] or [{name:'columnB',direction:'descending'}]
     * ```
     * @event px-sort-change-intent
     */
    _triggerSortChangeRequest: function () {
        // debouncing so this can be called anytime params are updated
        this.debounce('_debounceTriggerSortChangeRequest', function() {
          // currently only supports single column sort
          // event interface is set up to handle multi-column sort
          this.fire('px-sort-change-intent', !this.sortedColumn ? '[]' : JSON.stringify([{
            name: this.sortedColumn,
            direction: this.descending ? 'descending' : 'ascending'
          }]));
        }, 300);
    },

    // sort by header click handler
    _sort: function(e, p) {
      if(!this.sortable) return;
      var column = e.model.column,
        sortingColumn;
      if (column && column.sortable) {
        sortingColumn = column.name;
        if(sortingColumn === this.sortedColumn && !this.descending) {
          this.set('descending', !this.descending);
        }
        else if(sortingColumn === this.sortedColumn && this.descending) {
          this.set('sortedColumn', '');
        } else {
          this.set('sortedColumn', sortingColumn);
          this.set('descending', false); // always start ascending when click new column
        }
      }
      if (!this.dataRemote) {
        this._filterSortAndUpdateDisplayedTable();
      } else {
        this._triggerSortChangeRequest();
      }
    },

    _sortByColumn: function (rowsToSort) {

      var sortFunction = this._getSortFunction(),
        sortedRows;
      // sorting map: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#Sorting_maps
      sortedRows =
        rowsToSort
          .map(function (e, i) {
            var v;
            if (this.sortedColumn === '_selected') {
              v = this._getInternalCellStateAt(e, this.sortedColumn);
            } else {
              v = this._getInternalDataAt(e, this.sortedColumn);
            }

            // call internal state function...
            if (undefined === v || null === v) {
              v = '';
            }
            return {
              index: i,
              value: this._typeofComparison(v, "string") ? v.toLowerCase() : v
            };
          }, this)
          .sort(sortFunction.bind(this))
          .map(function (e) {
            return rowsToSort[e.index];
          });

      return sortedRows;
    },

    _getSortFunction: function () {
      var sortFunction;

      if (this.sortedColumn !== '_selected') {
        // use custom sort function if there is one
        this.meta.forEach(function (obj) {
          if (this.sortedColumn === obj.name) {
            sortFunction = this._resolveFunctionOnWindow("sort-function-name", obj);
          }
        }, this);
      }
      if (!sortFunction) {
        if (this.sortedColumn === "_selected") {
          sortFunction = this._defaultSortSelected;
        }
        else {
          sortFunction = this._defaultSortAlphabetically;
        }
      }

      return sortFunction;
    },

    _resolveFunctionOnWindow: function (elAttributeName, elObj) {
      var customFunction = window,
        customFunctionFullPath,
        i,
        customFunctionRef = elObj[elAttributeName];

      if (customFunctionRef === null || customFunctionRef === undefined) {
        if (elObj instanceof HTMLElement) {
          customFunctionRef = elObj.attributes[elAttributeName];
        }
        if (customFunctionRef === null || customFunctionRef === undefined) {
          return null;
        }
      }

      customFunctionFullPath = customFunctionRef.value.split(".");

      for (i in customFunctionFullPath) {
        customFunction = customFunction[customFunctionFullPath[i]];
        if (customFunction === undefined) {
          console.warn("px-data-table: Custom function was used, but was not found on window. Is the path correct?");
          return null;
        }
      }

      return customFunction;
    },

    // fallback default sort function if per-column sort isn't specified.
    _defaultSortAlphabetically: function(a, b) {
      if(this.descending) {
        return (a.value < b.value) ? 1 : -1;
      }
      else {
        return (a.value > b.value) ? 1 : -1
      }
    },

    _defaultSortSelected: function(a, b) {
      if(this.descending) {
        return (a.value && !b.value) ? 1 : (!a.value && b.value) ? -1 : 0;
      }
      else {
        return (a.value && !b.value) ? -1 : (!a.value && b.value) ? 1 : 0;
      }
    },

    /********** Filtering ************/

    /*
     * Fires a filter change request event
     *
     * Only called if remoteData==true
     *
     * Information is stored in `evt.detail`:
     * ```
     * document.getElementById("mytable").addEventListener("px-filter-change-intent", function(e) {
     *   var data = e.detail;
     *   console.log("Intended filters: ", JSON.parse(data));
     * });
     * // ==> [{name:'columnA',userEntry:'asdf'},{name:'columnB',userEntry:'qwert'}]
     * ```
     * @event px-filter-change-intent
     */
    _triggerFilterChangeRequest: function () {
        // debouncing so this can be called anytime params are updated
        this.debounce('_debounceTriggerFilterChangeRequest', function() {
          this.fire('px-filter-change-intent', JSON.stringify(this.filteredColumns));
        }, 300);
    },

    // filter on typed content in header handler
    _filter: function (e) {
      // have to do modelForElement because dom-if cancels out dom-repeat model (https://github.com/Polymer/polymer/issues/1865)
      var column = this.$.filterRepeat.modelForElement(e.target).column,
        userEntry,
        isNotInFilteredColumnsList,
        index,
        filteredColumn;

      if (column && column.filterable) {
        userEntry = e.target.value;
        isNotInFilteredColumnsList = true;

        for (index in this.filteredColumns) {
          filteredColumn = this.filteredColumns[index];
          if (filteredColumn.name === column.name) {
            isNotInFilteredColumnsList = false;
            if (userEntry === "" || userEntry === undefined || userEntry === null) {
              // don't filter on this column anymore
              this.filteredColumns.splice(index, 1);
            }
            else {
              // update the user entry with the latest content
              filteredColumn.userEntry = userEntry;
            }

          }
        }
        if (isNotInFilteredColumnsList) {
          if (userEntry !== "" && userEntry !== undefined && userEntry !== null) {
            // add the new column to the filtered list
            this.filteredColumns.push({ "name": column.name, "userEntry": userEntry });
          }
        }
        if (!this.dataRemote) {
          this._filterSortAndUpdateDisplayedTable();
        } else {
          this._triggerFilterChangeRequest();
        }
      }
    },

    _filterByColumn: function (columnName, userEntry, rowsToFilter) {
      var filterFunction = this._getFilterFunction(columnName),
        i,
        len,
        matched,
        self = this,
        filteredRows;

      for (i = 0, len = rowsToFilter.length; i < len; i++) {
        // if it's not filtered already
        if (rowsToFilter[i]._filtered === false) {
          matched = filterFunction(userEntry, this._getInternalDataAt(rowsToFilter[i], columnName));
          if (!matched) {
            this._setInternalDataAt(rowsToFilter[i], '_filtered', true);
          }
        }
      }

      this.filtered = rowsToFilter.some(function (row) {
        return self._getInternalCellStateAt(row, '_filtered');
      });

      filteredRows = rowsToFilter.filter(function (r) {
        return !self._getInternalCellStateAt(r, '_filtered');
      });
      return filteredRows;
    },

    _getFilterFunction: function (columnName) {
      var filterFunction;

      // use custom filter function if there is one
      this.meta.forEach(function (obj) {
        if (columnName === obj.name) {
          filterFunction = this._resolveFunctionOnWindow('filter-function-name', obj);
        }
      }, this);

      if (!filterFunction) {
        filterFunction = this._defaultFilter;
      }

      return filterFunction;
    },

    _defaultFilter: function (searchString, cellValue) {
      if (searchString === undefined || searchString === null || searchString === "") {
        return true;
      }
      if (cellValue || (typeof(cellValue)=="boolean")) {
        return (cellValue.toString().toLowerCase().indexOf(searchString.toString().toLowerCase()) > -1);
      }
    },

    _save: function (evt) {
      var row = evt.model.internalRow,
        column = evt.model.column,
        newValue = evt.detail.newValue;

      if (row) {
        this.fire('before-save', { "event": evt, "row": row, "column": column });

        this._setInternalDataAt(row, column.name, newValue);
        evt.currentTarget.cellValue = this._getInternalDataAt(row, column.name);
        evt.currentTarget.cellDisplayValue = this._readContent(row, column);
        this.data[row.row.dataIndex][column.name] = newValue;

      }

      if (column.required && !evt.target.validity.valid) {
        this.fire('after-invalid', { "event": evt, "row": row, "column": column });
      }
      this.fire('after-save', { "event": evt, "row": row, "column": column });

    },
    _cellChanged: function (oldValue, newValue) {
      return (oldValue !== newValue);
    },
    _handleValidateEvent: function (evt) {
      var column = evt.model.column,
        validationObj = column.validate(evt.detail.newValue);

      evt.currentTarget.cellValidation = validationObj;
      this._setInternalCellValidationStateAt(evt.model.internalRow, column.name, validationObj);
    },
    _clickRow: function (evt) {
      var column = evt.model.column,
          row = evt.model.internalRow,
          detail = {"row": row, "column": column},
          selectAllCheckbox;
      if(column.editable || column.type === 'dropdown') return;

      if (this.selectable) {
        this._selectRow(row, this.$.recordList.indexForElement(evt.currentTarget));

        if(!this.singleSelect) {
          // always just make sure selectAll checkbox is unchecked when 1 row is clicked
          selectAllCheckbox = Polymer.dom(this.root).querySelector("#selectAllCheckbox");
          selectAllCheckbox.checked = false;
        }

        // if sorted row is selected, then it is no longer selected
        if (this.sortedColumn === '_selected') {
          this.set('sortedColumn', '');
        }
      }
      this.fire('px-row-click', detail); // fire the event after it is marked selected
    },
    _clickCell: function (evt) {
      var column = evt.model.column,
          row = evt.model.internalRow,
          detail = {"row": row, "column": column, "rowIndex":this.$.recordList.indexForElement(evt.currentTarget)};
      this._clickRow(evt);
      this.fire('px-cell-click', detail); // fire the event after it is marked selected
    },
    _clickSelectAll: function (e) {
      if (e.target.checked) {
        this._setAllRows(true); // selected
      }
      else {
        this._setAllRows(false); // unselected
      }
    },

    _setAllRows: function (isSelected) {
      var i,
          len;

      if(isSelected) {
      //set selected to true when selecing all for tags shown by filter
        for(i = 0, len = this._internalData.length; i < len; i++) {
          if(this.filteredSortedData.includes(this._internalData[i])){
            this._setInternalDataAt(this._internalData[i], '_selected', isSelected);
          }
        }
      } else {
        //set selected to false
        for(i = 0, len = this._internalData.length; i < len; i++) {
          this._setInternalDataAt(this._internalData[i], '_selected', isSelected);
        }
      }

      // notify viewing rows of change
      for (i = 0, len = this.displayedRows.length; i < len; i++) {
        this.notifyPath('displayedRows.' + i + '._selected', this.displayedRows[i]._selected);
      }

      // remove everything from user-facing selectedRows property
      this.splice('selectedRows', 0, this.selectedRows.length);
      if (isSelected) {
        // add everything to selectedRows property
        for(i = 0, len = this._internalData.length; i < len; i++) {
          if(this._internalData[i]._selected) {
            this.push('selectedRows', this._internalData[i]);
          }
        }
      }

      this.set('meta.0.label', this.localize("Selected") + " (" + this.selectedRows.length + ")");
      this.fire('px-select-all-click', this.selectedRows);

    },

    _selectRow: function (row, indexInDisplayedRows) {
      this.fire('before-select', row);
      if (this.selectedRows.indexOf(row) > -1) {
        row._selected = false;
        this.notifyPath('displayedRows.' + indexInDisplayedRows + '._selected', row._selected);
        this.splice('selectedRows', this.selectedRows.indexOf(row), 1);
      }
      else {
        if(this.singleSelect) this._setAllRows(false);
        row._selected = true;
        this.notifyPath('displayedRows.' + indexInDisplayedRows + '._selected', row._selected);
        this.push('selectedRows', row);
      }
      this.set('meta.0.label', this.localize("Selected") + " (" + this.selectedRows.length + ")");
      this.fire('after-select', row);
    },

    /******** Drag and drop ********/

    _dragDropColumnHeader: function (evt) {
      if (this.enableColumnReorder) {
        this._dropColumnHeader(this._findHeaderFromChild(evt.target));
      }
    },

    _touchDropColumnHeader: function (evt) {
      if (this.enableColumnReorder) {
        this._removeDragFromSourceHeader();
        var target = document.elementFromPoint(event.changedTouches[0].clientX, event.changedTouches[0].clientY);
        target = this._findHeaderFromChild(target);

        this._dropColumnHeader(target);
      }
    },

    _dropColumnHeader: function (target) {

      //find the target we're actually interested in: the header
      var srcName = this._columnDragged,
        toMove,
        regex,
        targetName,
        targetColumn,
        columns,
        parent;

      regex = target.classList.toString().match(/.*aha-(.*)-th/);
      targetName = (regex && regex.length > 1) ? regex[1] : null;

      if (targetName != null) {

        //Allow drop if target != moving column
        if (targetName !== srcName) {
          columns = this.getEffectiveChildren();

          columns.forEach(function (column) {
            //how not to base that on text?
            if (column.name === srcName) {
              toMove = column;
            }
            if (column.name === targetName) {
              targetColumn = column;
            }
          });

          //allow drop on selected only if this is not the first (not including
          //selected) column. Otherwise no need to do anything
          if (toMove && targetName !== '_selected' || toMove !== columns[0]) {
            parent = Polymer.dom(toMove).parentNode;
            //remove and insert in the right place
            Polymer.dom(parent).removeChild(toMove);
            Polymer.dom.flush();

            //if the target is the 'selected' column just add column at the beginning
            //because 'selected' is not in the light dom
            if (targetName === '_selected') {
              Polymer.dom(parent).insertBefore(toMove, columns[0]);
            }
            else {
              Polymer.dom(parent).insertBefore(toMove, targetColumn.nextSibling);
            }
          }
        }
        else {
          //we're dropping on ourselves
          target.classList.remove('dragged');
        }
      }

      this._removeInsertionDisplay();
    },

    _dragOverHeader: function (evt) {
      if (this.enableColumnReorder) {

        var target = this._findHeaderFromChild(evt.target);

        //if we're not actually dragging over the
        //insertion indicator.
        if (!target.classList.contains('aha-insertion-indicator-th')) {

          //allow
          evt.preventDefault();
          this._allowColumnDrop(target, this._requestInsertionIndicatorRemoval && this._displayingInsertion);
        }
      }
    },

    _touchMoveHeader: function (evt) {
      if (this.enableColumnReorder) {

        var target = document.elementFromPoint(event.changedTouches[0].clientX, event.changedTouches[0].clientY);
        target = this._findHeaderFromChild(target);

        //if we're not actually dragging over the
        //insertion indicator.
        if (!target.classList.contains('aha-insertion-indicator-th')) {

          this._allowColumnDrop(target, target !== this._findHeaderFromChild(evt.target));
        }
      }
    },


    _allowColumnDrop: function (target, moveIndicator) {

      //manage the insertion indicator
      if (moveIndicator) {

        //the indicator is already shown, and has been requested to be dismissed.
        //instead move it to the position we want IF it is different from
        //the current one. Othewr wise just leave it and cancel the dismissal.
        this.set('_requestInsertionIndicatorRemoval', false);
        var targetIdx,
          indicatorIdx,
          regex = target.classList.toString().match(/.*aha-(.*)-th/),
          targetName = (regex && regex.length > 1) ? regex[1] : null;

        //don't bother doing more if the target doesn't seem genuine
        if (targetName != null) {
          this.meta.forEach(function (column, index) {

            if (column.name === targetName) {
              targetIdx = index;
            }
            else if (column.name === 'insertion-indicator') {
              indicatorIdx = index;
            }
          });

          //check against undefined cause the value can genuinely be 0
          if (targetIdx !== undefined && (targetIdx + 1) !== indicatorIdx) {

            //remove
            var indicator = this.splice('meta', indicatorIdx, 1)[0];

            //if the target idx was bigger than the indicator reduce it by 1 to
            //account for the removal of the indicator we just did
            if (targetIdx + 1 > indicatorIdx) {
              targetIdx--;
            }

            //reinsert at the right place
            this.splice('meta', targetIdx + 1, 0, indicator);
          }
        }
      }
      else if (!this._displayingInsertion) {

        //Just add the indicator
        var regex = target.classList.toString().match(/.*aha-(.*)-th/),
          targetName = (regex && regex.length > 1) ? regex[1] : null;

        if (targetName !== null) {
          //the indicator is not displayed, just insert it at the right place
          var targetIdx;
          this.meta.forEach(function (column, index) {

            if (column.name === targetName) {
              targetIdx = index;
            }
          });

          //create insertion display column data
          var insertCol = this._generateMetaForColumn('insertion-indicator', 'string', false, '');
          insertCol.filterable = false;
          insertCol.sortable = false;

          this.splice('meta', targetIdx + 1, 0, insertCol);
          this.set('_displayingInsertion', true);
        }
      }
    },

    _dragLeave: function (evt) {
      this._removeInsertionDisplay();
    },

    _dragEndColumnHeader: function (evt) {

      //make sure the collumn we were dragging doesn't show as dragged anymore
      this._removeDragFromSourceHeader();
    },

    _removeInsertionDisplay: function () {

      var _this = this;
      this.set('_requestInsertionIndicatorRemoval', true);

      //use a timeout so we can cancel the removal if the indicator needs
      //to be displayed somewhere else i the enar future (100ms). Makes dragging
      //smoother
      window.setTimeout(function () {
        if (_this.enableColumnReorder &&
          _this._displayingInsertion &&
          _this._requestInsertionIndicatorRemoval) {

          //actually remove column showing the insertion point
          var insertionColIdx;
          _this.meta.forEach(function (column, index) {

            if (column.name === 'insertion-indicator') {
              insertionColIdx = index;
            }
          });

          _this.splice('meta', insertionColIdx, 1);
          _this.set('_displayingInsertion', false);
          this._columnDragged = '';
        }
      }, 100);
    },

    _dragStartColumnHeader: function (evt) {

      var target = this._findHeaderFromChild(evt.target);
      if (this.enableColumnReorder && target.classList.contains('moveable')) {

        //parse column name
        var name = target.classList.toString().match(/.*aha-(.*)-th/)[1];
        this._columnDragged = name;

        target.classList.add('dragged');

        //mobile
        if (evt.changedTouches) {

          //prevent default so it won't scroll the table while dragging
          evt.preventDefault();

          //show indicator right now to make it more obvious something is happening
          this._allowColumnDrop(target, false);
        }
      }
      else {
        evt.preventDefault();
      }
    },

    _removeDragFromSourceHeader: function () {

      var src = Polymer.dom(this.root).querySelector('.dragged');
      if (src) {
        src.classList.remove('dragged');
      }
    },

    /********* Hide/Show columns *********/

    _columnChooserChanged: function(evt) {
      if(evt.detail.selected) {
        this.showColumn(evt.detail.key);
      }
      else {
        this.hideColumn(evt.detail.key);
      }
    },

    _computeColumnChooserItems: function() {
      // debounce, since meta and meta.* change very often when building the table
      this.debounce('computeItems', function() {
        var items = [];
        this.meta.forEach(function(column, index) {
          if(column.name !== '_selected' && column.name !== 'insertion-indicator' && !column.disableHide) {
            items.push({ key: column.name, val: column.label, selected: !column.hide});
          }
        });
        if (JSON.stringify(this._columnChooserItems) !== JSON.stringify(items)) {
          this.set('_columnChooserItems', items);
        }
      }, 5);
    },

    _calculateAdaptedNumberOfItems: function () {
      this.set('_adaptedNumberOfItems', this.dataRemote ? this.totalEntries : this.numberOfItems);
    },

    /**
     * Hide the column which name matches columnName
     */
    hideColumn: function (columnName) {

      //find column within content
      this.meta.forEach(function (column, index) {
        if (column.name === columnName) {

          column.hide = true;
          this.notifyPath('meta.' + index + '.hide', true);
        }
      }, this);
    },

    /**
     * show the column which name matches columnName if it has been hidden
     * previously
     */
    showColumn: function (columnName) {

      this.meta.forEach(function (column, index) {
        if (column.name === columnName) {

          column.hide = false;
          this.notifyPath('meta.' + index + '.hide', false);
        }
      }, this);
    },

    /******** Resize Header **********/

    /**
     * Called when tracking a header resize
     */
    _headerTrack: function (evt) {

      //find header
      var target = this._findHeaderFromChild(evt.target);

      if (target !== this) {
        target.style.width = (this._headerInitialSize + evt.detail.dx) + 'px';
      }
    },

    /**
     * Called when initiating a header resize
     */
    _headerResizeMouseDown: function (evt) {
      var target = this._findHeaderFromChild(evt.target),
        currentSize;

      if (target !== this) {
        currentSize = target.getBoundingClientRect();

        this._headerInitialSize = currentSize.width;
        evt.preventDefault();
        evt.stopPropagation();
      }
    },
    /******** Display table helpers (classes, dom-if functions, etc.) *************/

    _getRowClass: function (row, striped) {
      return ['tr', 'rows',
        this.striped ? 'striped' : '',
        row.isNew ? 'is-new' : ''
      ].join(' ');
    },

    _getHighlightValue: function (row, column, high) {
      var highlightElements = Polymer.dom(column).querySelectorAll('px-data-table-highlight'),
        doHighlight = false,
        highlightObj = { value: false },
        highlightClass;

      highlightElements.forEach(function(highlightEl) {
        var rowState = this._getInternalRowStateAt(row, column.name);
        var data = this._getInternalDataAt(row, column.name);
        doHighlight = highlightEl.highlight(data, rowState, column.name);
        if (highlightObj.value && doHighlight) {
          if(highlightObj.highlightValue === 'low'){
            highlightObj.highlightClass = 'px-data-table-highlight--' + highlightEl.highlightValue;
          } else if(highlightObj.highlightValue === 'medium'){
            if (highlightEl.highlightValue === 'high') {
              highlightObj.highlightClass = 'px-data-table-highlight--' + highlightEl.highlightValue;
            }
          } else {
            highlightObj.highlightClass = 'px-data-table-highlight--' + highlightEl.highlightValue;
          }
        } else if (!highlightObj.value) {
          highlightObj.value = doHighlight;
          highlightObj.highlightClass = 'px-data-table-highlight--' + highlightEl.highlightValue;
        }

        if (highlightEl.highlightType === 'row') {
          this._setInternalDataAt(row, '_highlight', highlightObj);
          highlightObj = { value: false };
        }
      }.bind(this));
      return highlightObj;
    },

    _isSelectAllColumn: function (column) {
      return column.selectAll;
    },

    _isFilterableColumn: function(column) {
      return !column.selectAll && column.filterable && this.filterable;
    },

    _readContent: function (row, column) {
      var datum = this._getInternalDataAt(row, column.name);
      if (datum === null || datum === undefined || this._typeofComparison(datum, 'string') && datum.trim().length === 0) {
        return ""; // return empty string if no data
      }

      if (this._shouldClipDatumString(row, column)) {
        return this._clipDatumString(datum, column);
      }
      return datum;
    },
    _shouldClipDatumString: function (row, column) {
      var datum = this._getInternalDataAt(row, column.name),
        maxColWidth = column.maxColumnCharacterWidth;

      if (maxColWidth === 0 || datum === null || datum === undefined || this._typeofComparison(datum, 'string') && datum.trim().length === 0) {
        return false;
      }
      if (maxColWidth !== undefined && maxColWidth !== null) {
        return datum.length > maxColWidth;
      }
      return false;
    },
    _clipDatumString: function (datum, column) {
      var maxColWidth = column.maxColumnCharacterWidth,
        ellipsisClipPosition = column.ellipsisClipPosition,
        datumLeftIndex,
        datumRightIndex;

      if (ellipsisClipPosition === 'left') {
        datum = '\u2026' + datum.substr(datum.length - maxColWidth, datum.length);
      }
      else if (ellipsisClipPosition === 'center') {
        datumLeftIndex = Math.floor(maxColWidth / 2);
        datumRightIndex = maxColWidth - datumLeftIndex;
        datum = datum.substr(0, datumLeftIndex) + '\u2026' + datum.substr(datum.length - datumRightIndex, datum.length);
      }
      else { //assume right
        datum = datum.substr(0, maxColWidth) + '\u2026';
      }
      return datum;
    },

    _isEqual: function (source, target) {
      return source === target;
    },

    _getHeaderClass: function(item) {
      var classList = ['th', 'aha-' + item.name + '-th', 'u-p0'];
      if(this.sortable && item.sortable) {
        classList.push('sortable');
      }
      if(this.enableColumnReorder && item.type !== 'selected') {
        classList.push('moveable');
      }
      return classList.join(' ');
    },
    _getSecondHeaderClass: function (filterable) {
      var classList = ['tr', 'tr--filter'];
      if (!filterable) {
        classList.push('hidden');
      }
      return classList.join(' ');
    },
    _getFilterHeaderClass: function (column) {
      return column.name === 'insertion-indicator' ? 'td insertion-indicator' : 'td';
    },

    _getSortingIcon: function (sortable, column, sortingColumn, descending) {
      var sortingIcon = ' ';
      if(sortable && sortingColumn === column.name) {
        sortingIcon = descending ? 'px-nav:down' : 'px-nav:up';
      }
      return sortingIcon;
    },

    _getSortingClass: function(sortable, column, sortingColumn, descending) {
      var classList = 'sorting';
      if(sortable && sortingColumn !== column.name) {
        classList = classList + ' visuallyhidden';
      }
      return classList;
    },

    _getTextSortingClass: function(sortable, column, sortingColumn) {
      var classList = ['column-head', 'u-mv--', 'u-mh-'];
      if (column.name === '_selected'){
        classList.push('column-head--selected');
      };
      if(sortable && column.sortable) {
        classList.push('sorted-text-hover');
      }
      if(sortable && sortingColumn === column.name) {
        classList.push('sorted-text');
      }
      return classList.join(' ');
    },
    _getTableClass: function(tableCells, tableColumns) {
      var classArray = [];
      if(tableCells) {
        classArray.push('table--cells');
      }
      if (tableColumns) {
        classArray.push('table--columns');
      }
      return classArray.join(' ');
    },
    _getPaginationVisibility: function (hidePaginationControl) {
      return (hidePaginationControl ? "visuallyhidden" : "");
    },
    _getSelectedCellClass: function (selected, rowHighlighted) {
      var classList = ['td'];
      classList.push(selected ? 'selected-cell__selected' : '');
      classList.push(rowHighlighted.value ? rowHighlighted.highlightClass : '');

      return classList.join(' ');
    },
    /**
     * Searching for a .th parent element
     */
    _findHeaderFromChild: function (childElem) {
      var header = childElem;

      //we want to target the actual header to find the column name
      while (!header.classList.contains('th') && header !== this) {

        header = Polymer.dom(header).parentNode;
      }

      return header;
    },

    _computeIfColumnFilterEnabled: function(meta, filterable) {
      this._enableFilterRow = meta && (this.selectable && !this.singleSelect || filterable && this.meta.some(function(val){
        return this._isFilterableColumn(val);
      }.bind(this)));
    },

    /**
     * required by IE11
     */
    _typeofComparison: function (val, comparator) {
      return (typeof val === comparator || false);
    }
  });

</script>