Simple Material-UI data table

DataTable.js

import React from 'react'
import _ from 'lodash'
import shortid from 'shortid'
import { grey300 } from 'material-ui/styles/colors'
import { Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn } from 'material-ui/Table'

const DataTable = ({
  columns,
  data,
  getRowKey,
  getRowStyle,
  sortIndex,
  sortDirection,
  sort,
  ...passThroughProps
}) => {
  let sortedData
  switch (sortDirection) {
    case 1:
      sortedData = _.sortBy(data, columns[sortIndex].sortKey)
      break
    case 2:
      sortedData = _.reverse(_.sortBy(data, columns[sortIndex].sortKey))
      break
    default:
      sortedData = data
  }
  return (
    <Table {...passThroughProps}>
      <TableHeader>
        <TableRow>
          {_.map(columns, (column, i) => (
            <TableHeaderColumn
              key={column.key}
              style={{
                cursor: !_.isNil(column.sortKey) ? 'pointer' : null,
                backgroundColor: i === sortIndex ? grey300 : null,
              }}
              onTouchTap={() => {
                if (_.isNil(column.sortKey) || _.isNil(sort)) {
                  return
                }
                let nextSortDirection
                if (i === sortIndex) {
                  nextSortDirection = (sortDirection + 1) % 3
                } else {
                  nextSortDirection = 1
                }
                const nextSortIndex = nextSortDirection !== 0 ? i : null
                sort(nextSortIndex, nextSortDirection)
              }}
            >
              {column.name}
            </TableHeaderColumn>
          ))}
        </TableRow>
      </TableHeader>
      <TableBody>
        {_.map(sortedData, (row, rowIndex) => (
          <TableRow
            key={!_.isNil(getRowKey) ? getRowKey(row, rowIndex) : shortid.generate()}
            style={!_.isNil(getRowStyle) ? getRowStyle(row, rowIndex) : null}
          >
            {_.map(columns, (column) => {
              const cell = _.property(column.key)(row)
              const style = !_.isNil(column.getCellStyle) ?
                column.getCellStyle(cell, row, rowIndex) : null
              const renderedCell = !_.isNil(column.renderCell) ?
                column.renderCell(cell, row, rowIndex) : cell
              return (
                <TableRowColumn key={column.key} style={style}>
                  {renderedCell}
                </TableRowColumn>
              )
            })}
          </TableRow>
        ))}
      </TableBody>
    </Table>
  )
}

DataTable.propTypes = {
  columns: React.PropTypes.arrayOf(React.PropTypes.shape({
    key: React.PropTypes.string.isRequired,
    name: React.PropTypes.string.isRequired,
    renderCell: React.PropTypes.func,
    getCellStyle: React.PropTypes.func,
    sortKey: React.PropTypes.oneOfType(
      [React.PropTypes.string, React.PropTypes.arrayOf(React.PropTypes.string)],
    ),
  })).isRequired,
  data: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
  getRowKey: React.PropTypes.func,
  getRowStyle: React.PropTypes.func,
  sortIndex: React.PropTypes.number,
  sortDirection: React.PropTypes.number,
  sort: React.PropTypes.func,
}

DataTable.defaultProps = {
  getRowKey: null,
  getRowStyle: null,
  sortIndex: null,
  sortDirection: 0,
  sort: null,
}

export default DataTable