Table's Style props should override overflow: 'hidden'

Requesting a Feature

It should be possible to override the overflow: hidden style in a table. I would like to have a button on each row that opens a dropdown. However, the dropdown is currently hidden because it overflows the row.

In the Chrome developer tools, I can see the dropdown if I manually remove overflow:hidden from .ReactVirtualized__Table__row and .ReactVirtualized__Table__rowColumn. However, I have not found a way to do this with either javascript or css.

Looking at source/Table/Table.js, it seems that overflow: hidden is set in-line and overrides the style prop. The style prop should have precedence. Having hidden overflow is a good default, but there are cases when this is not optimal

    const flattenedStyle = {
      ...style,
      ...rowStyleObject,
      height: this._getRowHeight(index),
      overflow: 'hidden',
      paddingRight: scrollbarWidth,
    };

I have looked into work arounds, such as React Portal. However, built in portal features are not available in React 15 and including another entire library to work around this small issue, giving built in style precedence over the style prop, seems unnecessary.

This is what the row currently looks like (with the dropdown expanded):

This is what the row should look like (with the dropdown expanded):

[SocialHulkHogan]

I’d like to second this request. I’m in a similar situation where I need a color picking interface to pop out, and I’d rather the horizontal overflow be visible rather than having to expand the width to fit the colorpicker. That’s how I handle the issue now, but it makes the table too wide considering I also need a graph on this page. I don’t see any harm in allowing a column’s style prop to set the overflow to be visible. Admittedly, I’ve only been using React for about 3 months so anytime I can just do what I want without having to learn work arounds is greatly appreciated.

Edit: For anyone else with the issue, an even better work around would be to add a class to the column you want to see overflow on with the className prop, then in a style sheet set overflow: visible !important. Still feels like an unnecessary hack though, and I’d like to see this change implemented. Creates some hassle for devs concerned with page space and doesn’t feel intentional. I thought the overflow property was like this for a reason, but seeing as changing it breaks nothing I can’t help but feel it was just a mistake.

[omiceron]

Overriding styles helped me. I put it in my table component stylesheet:

.ReactVirtualized__Grid__innerScrollContainer {
    overflow: visible !important;
}

.ReactVirtualized__Table__row {
    overflow: visible !important;
}

And a Column component should be with this style

.column {
    overflow: visible !important;
}

<Column
  className = 'column'
  label = 'column'
  dataKey = 'column'
  width = {150}
  cellRenderer = {cellRenderer}
/>