I want to use the Material-UI (version 0.15+, with React 15+) framework in my Meteor app, I tried to use every package available in Atmosphere, but all of them are outdated. So I just installed like so:
npm install material-ui
And it works, using most components is simple. However, I am having trouble rendering dynamic entries in the Table component.
I followed the basic todo tutorial in React, and I just want to render the todo’s in a table:
/imports/ui/App.jsx
import React, { Component, PropTypes } from 'react';
import { createContainer } from 'meteor/react-meteor-data';
import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import {Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn} from 'material-ui/Table';
import { Tasks } from '../api/tasks.js';
import Task from './Task.jsx';
class App extends Component {
renderTasks() {
return this.props.tasks.map((task) => (
<Task key={task._id} task={task} />
));
}
render() {
return (
<MuiThemeProvider muiTheme={getMuiTheme(darkBaseTheme)}>
<div className="container">
<Table>
<TableHeader>
<TableRow>
<TableHeaderColumn>ID</TableHeaderColumn>
<TableHeaderColumn>Name</TableHeaderColumn>
<TableHeaderColumn>Status</TableHeaderColumn>
</TableRow>
</TableHeader>
<TableBody>
<!--
***********
this one works, because is static
***********
-->
<TableRow>
<TableRowColumn>4</TableRowColumn>
<TableRowColumn>Steve Brown</TableRowColumn>
<TableRowColumn>Employed</TableRowColumn>
</TableRow>
<!--
***********
these ones don't work
***********
-->
{this.renderTasks()}
</TableBody>
</Table>
</div>
</MuiThemeProvider>
);
}
}
App.propTypes = {
tasks: PropTypes.array.isRequired,
};
export default createContainer(() => {
return {
tasks: Tasks.find({}).fetch(),
};
}, App);
/imports/ui/Task.jsx
import React, { Component, PropTypes } from 'react';
import {Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn} from 'material-ui/Table';
// Task component - represents a single todo item
export default class Task extends Component {
render() {
return (
<TableRow>
<TableRowColumn>...</TableRowColumn>
<TableRowColumn>{this.props.task.text}</TableRowColumn>
<TableRowColumn>...</TableRowColumn>
</TableRow>
);
}
}
Task.propTypes = {
// This component gets the task to display through a React prop.
// We can use propTypes to indicate it is required
task: PropTypes.object.isRequired,
};
This is the result:
the first row work (the static one), the dynamics don’t inherit styles or behavior, although if I add new data, it gets added to the page reactively.
What else is necessary to make Material-UI 0.15 work with Meteor ?
Thanks.