diff --git a/src/index.js b/src/index.js index ce37ffc..007b308 100644 --- a/src/index.js +++ b/src/index.js @@ -2,6 +2,8 @@ require('material-design-lite/material.min.css'); +const table = require('./table'); + const components = { Button: require('./button'), Badge: require('./badge'), @@ -13,7 +15,10 @@ const components = { Checkbox: require('./checkbox'), Radio: require('./radio'), Switch: require('./switch'), - IconToggle: require('./icon-toggle') + IconToggle: require('./icon-toggle'), + TableColumn: table.TableColumn, + TableRow: table.TableRow, + Table: table.Table }; module.exports = components; diff --git a/src/table.js b/src/table.js new file mode 100644 index 0000000..a424391 --- /dev/null +++ b/src/table.js @@ -0,0 +1,114 @@ +'use strict'; + +const React = require('react'); +const mdl = require('material-design-lite/material.min'); +const classnames = require('classnames'); + +const baseClasses = { + 'mdl-data-table': true, + 'mdl-js-data-table': true +}; + +class TableColumn extends React.Component { + render(){ + const { + className, + columns, + numeric + } = this.props; + + const classes = classnames({ + 'mdl-data-table__cell--non-numeric': numeric + }); + + return ( + + + { + columns.map(column => ({column})) + } + + + ); + } +} + +TableColumn.propTypes = { + className: React.PropTypes.string, + columns: React.PropTypes.array.isRequired, + numeric: React.PropTypes.bool +}; + +class TableRow extends React.Component { + render(){ + const { + className, + numeric, + rows + } = this.props; + + const classes = classnames({ + 'mdl-data-table__cell--non-numeric': numeric + }); + + const getRow = (row) => { + return ( + + { row.map(col => ({col})) } + + ); + }; + + return ( + { rows.map(getRow) } + ); + } +} + +TableRow.propTypes = { + className: React.PropTypes.string, + rows: React.PropTypes.array.isRequired, + numeric: React.PropTypes.bool +}; + +class Table extends React.Component { + + componentDidMount(){ + const node = React.findDOMNode(this); + mdl.upgradeElement(node, 'MaterialDataTable'); + } + + componentWillUnmount(){ + const node = React.findDOMNode(this); + mdl.downgradeElements(node); + } + + render(){ + const { + children, + className, + selectable + } = this.props; + + const classes = classnames(baseClasses, { + 'mdl-data-table--selectable': selectable + }, className); + + return ( + + {children} +
+ ); + } +} + +Table.propTypes = { + className: React.PropTypes.string, + selectable: React.PropTypes.bool +}; + +module.exports = { + TableColumn, + TableRow, + Table +};