aha-table.html

<!--
Copyright (c) 2018, General Electric

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<!--
/**
 * @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, column.hide)}}">
                <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'
      },
      //_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'
      },
      dataChangeTrigger: {
        type: Boolean,
        value: false
      },
      /**
       * 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) {
      this.dataChangeTrigger = false; //reset the dataChangeTrigger Boolean
      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;
      }

      // 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 {
        //Reach here when a cell data is edited
        this.dataChangeTrigger = true;
        this._internalData = this._refreshInternalData();
      }
      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, "string", 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,
        disableSelect: !this.selectable,
        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++;
          }
        });

        if(this.dataChangeTrigger == false){
          this.set('numberOfItems', count);
          this.$.pagination.goToPageNumber(1);
        }
      // with filtering/sorting, it's best just to go back to the first page
      // filtering/sorting -> datachangetrigger will be false
      } 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] && 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( function(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( function(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) {
      if(e.isTrusted == false)
        this.dataChangeTrigger = true;
      else if(e.isTrusted == true)
        this.dataChangeTrigger = false;
      // 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) {
        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' || column.disableSelect === true) 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 || (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>