Create class with common imports material-ui and react

I would like to create a common class in my application with react and material-ui. I have, for example, that create a series of elements with tables. Every time I use I have to import some libs. For example:

const Table = require('material-ui/lib/table/table');
const TableBody = require('material-ui/lib/table/table-body');
const TableFooter = require('material-ui/lib/table/table-footer');
const TableHeader = require('material-ui/lib/table/table-header');
const TableHeaderColumn = require('material-ui/lib/table/table-header-column');
const TableRow = require('material-ui/lib/table/table-row');
const TableRowColumn = require('material-ui/lib/table/table-row-column');

I would like to do something similar there:

/* <path>/Template/index.jsx */

const React = require('react'),
ReactDOM    = require('react-dom'),
Router      = require('react-router'),
mui         = require('material-ui'),
Icon        = mui.Icon;

class Template extends React.Component {
    render() {
        return (
            {this.props.element}
        );
    }
};

module.exports = Template;

/* <path>/Table/index.jsx */

const Template    = require('../template'),
Table             = require('material-ui/lib/table/table'),
TableBody         = require('material-ui/lib/table/table-body'),
TableFooter       = require('material-ui/lib/table/table-footer'),
TableHeader       = require('material-ui/lib/table/table-header'),
TableHeaderColumn = require('material-ui/lib/table/table-header-column'),
TableRow          = require('material-ui/lib/table/table-row'),
TableRowColumn    = require('material-ui/lib/table/table-row-column');

class Table extends Template {
    render() {
        return (
            <Template element={this.props.element}/>
        );
    }
};

module.exports = Table;

/* <path>/home/index.jsx */

var Table = require('../../../common/table');

var _rows = [];
for (var i = 1; i < 100; i++) {
    _rows.push({
        id: i,
        title: 'Title ' + i,
        count: i * 100
    });
}

class Item extends Table {
    handleOnClick: function(event) {
        event.preventDefault();
        this.props.setApplicationDetails("item", this.props.item);
    },

    render: function() {
        return (
            <TableRow selected={true}>
                <TableRowColumn>
                    <a href="#" onClick={this.handleOnClick}> {this.props.item.id}</a>
                    <i className="fa fa-caret-right"></i>
                </TableRowColumn>
                <TableRowColumn>{this.props.item.Title}</TableRowColumn>
            </TableRow>
        );
    }
};

class ItemItem extends Table{
    mixins: [Router.Navigation, Router.State],
    setApplicationDetails: function(pageData, item) {
        this.transitionTo("/home?id=" + item.id);
    },
    render: function() {
        var self = this;
        var state = {
            fixedHeader: true,
            stripedRows: false,
            showRowHover: false,
            selectable: true,
            multiSelectable: false,
            enableSelectAll: false,
            deselectOnClickaway: true,
            height: '300px',
        };

        var item = _rows.map(function(item, index) {
            return (
                <Item item={item} index={++index} setApplicationDetails={self.setApplicationDetails} key={index} />
            );
        });

        return (
            <Table height={state.height} fixedHeader={state.fixedHeader}
                fixedFooter={state.fixedFooter} selectable={state.selectable}
                multiSelectable={state.multiSelectable}>
                <TableHeader enableSelectAll={state.enableSelectAll}>
                    <TableRow>
                        <TableHeaderColumn colSpan="3" tooltip='Super Header' style={{textAlign: 'center'}}>
                        Super Header
                        </TableHeaderColumn>
                    </TableRow>
                    <TableRow>
                        <TableHeaderColumn tooltip='The ID'>ID</TableHeaderColumn>
                        <TableHeaderColumn tooltip='The Name'>Name</TableHeaderColumn>
                        <TableHeaderColumn tooltip='The Status'>Status</TableHeaderColumn>
                    </TableRow>
                </TableHeader>
                <TableBody deselectOnClickaway={state.deselectOnClickaway}
                    showRowHover={state.showRowHover} stripedRows={state.stripedRows}>
                    <TableRow selected={true}>
                        <TableRowColumn>1</TableRowColumn>
                        <TableRowColumn>John Smith</TableRowColumn>
                        <TableRowColumn>Employed</TableRowColumn>
                    </TableRow>
                </TableBody>
            </Table>
        );
    }
};

module.exports = ItemItem;

That is, create a class that encapsulates these libs and then on each element that uses extender table this lib.

Any suggestions?