Подтвердить что ты не робот

Как использовать материал-ui IconMenu внутри ячейки React fixed-data-table

Я собрал рабочий образец сетки и хочу добавить IconMenu в столбец для каждой строки сетки. Я вижу кнопку значка, но когда я нажимаю на нее, я не получаю меню. Ниже приведен код сетки.

Кто-нибудь смог получить fixed-data-table, работая с IconMenu из материала-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\ Garage","Email":"[email protected]"},{"First":"Jill","Last":"Smithers","Company":"Jill\'l Rehab Center","Email":"[email protected]"},{"First":"Brenda","Last":"Jones","Company":"Foodmart","Email":"[email protected]"}]';
        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;
4b9b3361

Ответ 1

требует ( 'фиксированных данных таблицы/DIST/фиксированных данные-table.css');

он не будет работать, вы должны дать эту ссылку css на своей странице html, где вы загружаете реагирующий компонент.