[Table] SelectField in Table getting cut off

[celiao]

I would like to place a SelectField component in a Table cell, but the SelectField menu is getting truncated to the height of the row. How can the full menu be displayed?

[celiao]

Also, when I select a menu item, the entire row is being (de)selected.

[alitaheri]

First, give your table enough height, then set your TableRowColumn's styles with these:

{ whiteSpace: 'normal'
, overflow: 'visible'
}

For the record, there some work being done to address this issue for all components. see #2043.

[celiao]

Works great. Thanks for your speedy reply.

I used the approach presented in #1702 to get rid of the checkboxes, and <Table selectable={false}> to disable rows from being selected.

It would be nice to be able to prevent the SelectField from selecting the row.

[alitaheri]

@celiao You're welcome ^^

It would be nice to be able to prevent the SelectField from selecting the row.

It's possible, TableRow adds handlers to it's children. you can make a Higher Order Component and pass down only those you want, like onHover. actually it's a lot better this way, you can make a TableSelectField that abstracts away all the complexity. Here is what I did to achieve the same effect:

export default class TableSelectField extends React.Component {

    render() {

        const styles = {
            cell: {
                paddingBottom: 0,
                paddingRight: 0,
                whiteSpace: 'normal',
                overflow: 'visible',
            },
            field: {
                fontSize,
                width: '100%',
                height: '100%',
            },
            label: {
                padding: 0,
                top: '50%',
                transform: 'translate(0, -50%)',
            },
            icon: {
                top: '50%',
                transform: 'translate(0, -50%)',
            },
            underline: {
                display: 'none',
            },
            menu: {
                width: '100%',
            },
        }

        return (
            <TableRowColumn
                onClick={this.props.disabled ? this.props.onClick : () => { } }
                hoverable={this.props.hoverable}
                onHover={this.props.onHover}
                onHoverExit={this.props.onHoverExit}
                style={assign(styles.cell, this.props.style) }>
              <DropDownMenu
                  value={this.props.selectedItemId}
                  style={styles.field}
                  labelStyle={styles.label}
                  iconStyle={styles.icon}
                  underlineStyle={styles.underline}
                  menuItemStyle={styles.menu}
                  autoWidth={false}
                  disabled={this.props.disabled}
                  onChange={this.props.onChange}
                  menuItems={this.props.items}/>
                </TableRowColumn>
        )
    }
}

To use this you can simply replace TableRowColumn with TableSelectField.

<Table height={'300px'} selectable={true}>
  <TableHeader adjustForCheckbox={false} displaySelectAll={false}>
    <TableRow>
      ...
    </TableRow>
  </TableHeader>
  <TableBody displayRowCheckbox={false} showRowHover={false} stripedRows={true}>
    <TableRow>
      <TableSelectField .../>
    </TableRow>
  </TableBody>
</Table>