dropdown render overflow in table column on react-virtualized

Question

I am working on a react app where I am rendering a table and 2 of the column fields instead of containing text contains a dropdown menu and I have different options in those dropdown menu,The dropdown is rendering but on opening the dropdown it gets hidden as if the row has a limited size which is quite unexpected.Here's my code:

const StyledTable = styled(CommonInfiniteTable)`
  .ReactVirtualized__Table__Grid {
    overflow-y: visible !important;
  }

`;
export const StyledDropdownIcon = styled(Icon)`
  top: 1px !important;
  right: 5px !important;
`;
const rowHeight = 41;
const headerHeight = 30;
class DefaultCodeSetsTable extends React.Component {
  constructor(props) {
    super(props);

    this.codeDataGetter = this.codeDataGetter.bind(this);
    this.codeDescriptionDataGetter = this.codeDescriptionDataGetter.bind(this);
  }

  codeDataGetter = ({
      dataKey,
      rowData,
      rowIndex,
    }) => (
      <div>
        <Form.Select
          name='Code'
          value={this.props.codeSets.length ? this.props.codeSets[rowIndex][`${this.props.masterName}_code`] : ''}
          options={this.props.defaultCodeSetsList[rowIndex].codesOptions}
          onChange={this.handleDefaultCodeChange(rowIndex)}
          icon={
            <StyledDropdownIcon iconName={DownCheveron} iconSize='15' className='dropdown' />
              }
        />
      </div>

    )

    codeDescriptionDataGetter = ({
      dataKey,
      rowData,
      rowIndex,
    }) => (
      <div>
        <Form.Select
          className='drop'
          name='Code Description'
          value={this.props.codeSets.length ? this.props.codeSets[rowIndex][`${this.props.masterName}_code_description`] : ''}
          options={this.props.defaultCodeSetsList[rowIndex].codeDescOptions}
          onChange={this.handleDefaultDescriptionChange(rowIndex)}
          icon={
            <StyledDropdownIcon iconName={DownCheveron} iconSize='15' className='dropdown' />
              }
        />
      </div>
    )

    render() {
      const widthOfEachGrid = this.props.width / 16;
      const columns = (
        [<Column
          key={1}
          label='Master Name'
          dataKey='master_name'
          width={widthOfEachGrid * 2}
          cellDataGetter={defaultCellDataGetter}
        />,
          <Column
            className='column'
            key={2}
            label='Code'
            dataKey='code'
            width={widthOfEachGrid * 1}
            cellRenderer={this.codeDataGetter}
          />,
          <Column
            className='column'
            key={3}
            label='Code Description'
            dataKey='code_description'
            width={widthOfEachGrid * 2}
            cellRenderer={this.codeDescriptionDataGetter}
          />,


        ]
      );

      return (
        <StyledTable
          height={this.props.height}
          width={this.props.width}
          headerHeight={headerHeight}
          rowHeight={rowHeight}
          rowRenderer={this.rowRenderer}
          rowCount={this.props.codeSets.length}
          rowGetter={({ index }) => this.props.codeSets[index]}
          LoadingRow={this.props.LoadingRow}
          overscanRowCount={5}
          tabIndex={-1}
          className='ui very basic small single line striped table'
          columnsList={columns}
        />
      );
    }
}

In the above table,I have 3 columns 1 being a plain text and other two are dropdowns with options to select from,when I open the dropdown this is the behaviour:

The options gets hidden as there been an overflow,any leads on this would definitely help!

score 0 · Answer 1 · answered Mar 25 '23 at 02:07

An example is found in this comment (the exact class names might be different): https://stackoverflow.com/a/53646058

I would add something similar to below to your const StyledTable = styled(CommonInfiniteTable) so that the rows and columns have overflow visible also.

.ReactVirtualized__Table__rowColumn,
.ReactVirtualized__Table__row {
  overflow: visible !important;
}

dropdown render overflow in table column on react-virtualized

1 Answers1