sorted rows not causing fixed-data-table to re-render

import React, {PropTypes, Component} from 'react'
import pureRender from 'pure-render-decorator'
import {Table, Column} from 'fixed-data-table'
import DataCellEditable from './data-cell-editable/'
import {List} from 'immutable'
import classnames from 'classnames'
import styles from './index.css'

@pureRender
export default class DataTableEditable extends Component {
  static propTypes = {
    rows: PropTypes.array
  , onCellUpdate: PropTypes.func
  }

  static defaultProps = {
    rows: []
  , onCellUpdate: (updatedAlias) => {}
  }


  // initialize state values
  state = {
    sortBy: 'aliasName'
  , sortDir: 'ASC'
  }

  componentWillReceiveProps (newProps) {
    if (newProps.rows && newProps.rows.length) {
      console.log('setting this.state.rows with newProps: ', newProps.rows)
      this.setState({rows: List(newProps.rows)})
    }
  }

  rowGetter (rowIndex) {
    return this.state.rows.get(rowIndex)
    // return this.props.rows[rowIndex]
  }

  inputCellRenderer (type, cellData, cellDataKey, rowData, rowIndex, columnData, width) {
    const props = {type, cellData, cellDataKey, rowData, rowIndex, columnData, width}
    return (
      <DataCellEditable {...props} onBlur={::this.props.onCellUpdate} />
    )
  }

  onColumnSortClick (cellDataKey) {
    const sortBy = cellDataKey
    let sortDir = this.state.sortDir
    if (sortBy === this.state.sortBy) {
      sortDir = this.state.sortDir === 'ASC' ? 'DESC' : 'ASC'
    }

    const sortedRows = this.state.rows.sort((a, b) => {
      let sortVal = 0
      if (a[sortBy] > b[sortBy]) sortVal = 1
      if (a[sortBy] < b[sortBy]) sortVal = -1
      if (sortDir === 'DESC') sortVal = sortVal * -1
      return sortVal
    })

    this.setState({
      rows: sortedRows
    , sortBy
    , sortDir
    })

    console.log('new state: ', this.state)
    console.log('first row is now: ', this.state.rows.get(0)[sortBy])

  //   const newSortBy = opts.sortBy
  //   let {sortBy, sortAscending} = this.state

  //   if (newSortBy === sortBy) sortAscending = !sortAscending

  //   this.setState({sortBy: newSortBy, sortAscending}, () => {
  //     console.log(this.state)
  //   })
  }

  renderHeader (label, cellDataKey) {
    const classNames = classnames([
      styles.tableHeaderSortCell
    , {[styles.ascending]: this.state.sortBy === cellDataKey && this.state.sortDir === 'ASC'}
    , {[styles.descending]: this.state.sortBy === cellDataKey && this.state.sortDir === 'DESC'}
    ])

    return (
      <div
        className={classNames}
        onClick={this.onColumnSortClick.bind(this, cellDataKey)}
      >
        {label}
      </div>
    )
  }

  render () {
    return (
      <Table
        rowHeight={50}
        rowGetter={::this.rowGetter}
        rowsCount={this.props.rows.length}
        width={1025}
        maxHeight={500}
        headerHeight={50}>
        <Column
          headerRenderer={::this.renderHeader}
          label="Equipment Name"
          width={350}
          dataKey={'aliasName'}
          cellRenderer={::this.inputCellRenderer.bind(this, 'text')}
        />
        <Column
          headerRenderer={::this.renderHeader}
          label="Daily Rate"
          width={225}
          dataKey={'oneDayRate'}
          cellRenderer={::this.inputCellRenderer.bind(this, 'price')}
        />
        <Column
          headerRenderer={::this.renderHeader}
          label="Weekly Rate"
          width={225}
          dataKey={'oneWeekRate'}
          cellRenderer={::this.inputCellRenderer.bind(this, 'price')}
        />
        <Column
          headerRenderer={::this.renderHeader}
          label="Monthly Rate"
          width={225}
          dataKey={'oneMonthRate'}
          cellRenderer={::this.inputCellRenderer.bind(this, 'price')}
        />
      </Table>
    )
  }
}