Devextreme-reactive: How to add a custom button with a dropdown menu to a row

[efstathiosntonas]

• [x ] I have searched this repository's issues and believe that this is not a duplicate.

Current Behaviour

Sorry for the title, couldn't think of something more descriptive.

How to add TableRowDetail when Table.Row is used?

Grid:

<Grid rows={this.props.data} columns={columns}>
       <RowDetailState defaultExpandedRowIds={[0]}
                 expandedRowIds={expandedRowIds}
                onExpandedRowIdsChange={this.onExpandedRowIdsChange}/>
        <Table className={'table-striped'} rowComponent={this.Row}/>
        <TableHeaderRow/>
        <TableRowDetail contentComponent={DataDetailsDropDown} />
 </Grid>

Row:

Row = ({row}) => {
        return (
            <Table.Row>
                <td>{row.Id}</td>
                <td>{row.Surname}</td>
                <td>{row.Rating}</td>
            </Table.Row>
        )
    }

Expected Behaviour

If I use the code as above, then the TableRowDetail arrows are not shown in order to expand the row. What I must do in order to show the up/down arrows?

Your Environment

devextreme-reactive: 1.3.0
react: xxx
browser: xxx
bootstrap: none
react-bootstrap: none
material-ui: none

[MaximKudriavtsev]

Hi,
 
Please clarify your use case. I will be able to help you if I know what you want to achieve using rowComponent.

[efstathiosntonas]

Hi Maxim,
I want to add a button at the end of the table row, when i click it it will open a popup menu. (how to handle to only open the row's menu and not all menus in the table when user clicks on the "open menu" button?)

<Table.Row>
    <td>...</td>
    <td>...</td>
    <td> 
         <Button
                    aria-owns={anchorEl ? 'simple-menu' : null}
                    aria-haspopup="true"
                    onClick={this.handleClick}
                >
                    Open Menu
                </Button>
                    <Menu
                        style={{zIndex: 123341}}
                        id="simple-menu"
                        anchorEl={anchorEl}
                        open={this.state.open}
                        onClose={this.handleClose}
                    >
                        <MenuItem onClick={this.handleClose}>Profile</MenuItem>
                        <MenuItem onClick={this.handleClose}>My account</MenuItem>
                        <MenuItem onClick={this.handleClose}>Logout</MenuItem>
                    </Menu>
     </td>
</Table.Row>

Thanks for helping me!

[MaximKudriavtsev]

In your case use only the cellComponent property of the Table plugin.
Please follow this example for detailed information.

[efstathiosntonas]

Thanks Maxim, exactly as i wanted it! Keep up the good work!

[lock[bot]]

This thread has been automatically locked since it is closed and there has not been any recent activity. Please open a new issue for related bugs or feature requests.