Question

我已经整理了网格的工作示例，并希望将IconMenu添加到网格的每一行的列中。我看到了图标按钮，但是当我点击它时我没有看到菜单。下面是网格的代码。

是否有人设法让fixed-data-table与IconMenu from material-ui合作？

require('fixed-data-table/dist/fixed-data-table.css');

var React = require('react');
var PropTypes = React.PropTypes;
var FixedDataTable = require('fixed-data-table');
var Table = FixedDataTable.Table;
var Column = FixedDataTable.Column;

// Material-UI
let MenuItem = require('material-ui/lib/menus/menu-item');
let IconMenu = require('material-ui/lib/menus/icon-menu');
let IconButton = require('material-ui/lib/icon-button');
let Colors = require('material-ui/lib/styles/colors');
let MoreVertIcon = require('material-ui/lib/svg-icons/navigation/more-vert');

function cellMenuRenderer(cellData, key, rowData, rowIndex, columnData, width) {
    let button = (
        <IconButton
            touch={true}
            tooltip='Click to see menu.'
            tooltipPosition='bottom-left'>
            <MoreVertIcon color={Colors.grey400} />
        </IconButton>
    );
    return (
        <IconMenu iconButtonElement={button}>
            <MenuItem primaryText="Edit" />
            <MenuItem primaryText="New Test" />
            <MenuItem primaryText="Review" />
        </IconMenu>
    );
}

var SampleResultGrid = React.createClass({
    propTypes: {
        onContentDimensionsChange: PropTypes.func,
        left: PropTypes.number,
        top: PropTypes.number
    },

    getInitialState() {
        var jsonText = '[{"First":"Joe","Last":"Smith","Company":"Joe\'s Garage","Email":"joe@smith.com"},{"First":"Jill","Last":"Smithers","Company":"Jill\'l Rehab Center","Email":"jill@smithers.com"},{"First":"Brenda","Last":"Jones","Company":"Foodmart","Email":"brenda@jones.com"}]';
        let data = JSON.parse(jsonText);
        console.log(data);
        return {
            rows: data
        };
    },

    rowGetter(index) {
        return this.state.rows[index];
    },

    render() {
        return (
            <Table
                headerHeight={40}
                rowHeight={30}
                rowsCount={this.state.rows.length}
                rowGetter={this.rowGetter}
                width={800}
                height={500}>
                <Column
                    width={100}
                    cellRenderer={cellMenuRenderer}
                    align='center'
                    dataKey='Menu'
                    label='Menu'/>
                <Column
                    width={150}
                    dataKey='First'
                    label='First'/>
                <Column
                    width={150}
                    dataKey='Last'
                    label='Last'/>
                <Column
                    width={150}
                    dataKey='Company'
                    label='Company'/>
                <Column
                    width={150}
                    dataKey='Email'
                    label='Email'/>
            </Table>
        );
    }
});

module.exports = SampleResultGrid;

Answer 1

<强>需要（＆＃39;固定数据表/ DIST /固定数据table.css＆＃39）;

它无法正常工作你必须在加载反应组件的html页面中提供这个css引用。

如何在React fixed-data-table的单元格内使用material-ui IconMenu

1 个答案: