Material-UI 0.15 Table component issue, in Meteor 1.3+

react
1

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 ? :frowning:

Thanks.