Simplified react-mdl DataTable for immutablejs props. https://tleunen.github.io/react-mdl/components/datatable/

DataTable.js

import React, { PropTypes } from 'react';
import ImmutableTypes from 'react-immutable-proptypes';
import classNames from 'classnames';


class DataTable extends React.Component {
  renderCell({ name, numeric }, row) {
    const className = !numeric ? 'mdl-data-table__cell--non-numeric' : '';
    return <td key={name} className={className}>{row.get(name, '')}</td>;
  }

  render() {
    const { className, children, keyProp, rows, shell, ...others } = this.props;
    const classes = classNames('mdl-data-table', className);
    const columns = React.Children.toArray(children);

    return (
      <table className={classes} {...others}>
        <thead>
          <tr>{columns}</tr>
        </thead>
        <tbody>
          {rows.map((row, idx) =>
            <tr key={row.get(keyProp, idx)}>
              {columns.map(column => this.renderCell(column.props, row))}
            </tr>
          )}
        </tbody>
      </table>
    );
  }
}


DataTable.propTypes = {
  className: PropTypes.string,
  keyProp: PropTypes.string,
  rows: ImmutableTypes.listOf(ImmutableTypes.map).isRequired,
  children: PropTypes.any.isRequired, // TODO: Array of instances of TableHeader
  shell: ImmutableTypes.map,
};


export default DataTable;