React-virtualized: Table's Style props should override overflow: 'hidden'

[ehoops31]

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):

[ehoops31]

@bvaughn I would like to work on a pull request to change the order styles are implemented. Is there a reason we currently cannot override overflow: 'hidden'?

[bvaughn]

I have looked into work arounds, such as React Portal. However, built in portal features are not available in React 15

react-portal has been around for a long time. It's definitely compatible with React 15. The difference is that in React 16, it can now use some built-in React API methods too.

Portals are definitely the way to go fort his. Even if you override overflow on the row-level, you can't override it for the entire table, meaning that drop-downs near the bottom of your table will get clipped (and there's no way to avoid that b'c of how the browser works).

That being said, I guess I don't mind moving rowStyleObject to the end so that users _can_ override those values (even though I don't think it accomplishes much). So yes, if you submit a PR I will review it (eventually). I'm going to close this issue in the meanwhile though. 😄

[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.

[futurechallenger]

you can set containerStyle in a list or whatever component to {overflow: 'visible'}

[ghost]

any updates on this.. ? As I am really struggling with this one

[nb256]

any updates on this.. ? As I am really struggling with this one

I don't know if its legit but I used this on the react-table's container styled-component:

  .rt-td {
    overflow-y: visible !important;
  }

I hope it helps somebody...

[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}
/>

[shrikrishnaholla]

I am using react-virtualized's MultiGrid with material-ui and had to solve this too, but just for the bottom right grid. Adding the snippet below that worked

import React from 'react';
import { MultiGrid } from "react-virtualized";
import { withStyles } from '@material-ui/core/styles';

const styles = theme => ({
  // This is needed to show the dropdowns for the last rows in the table / when
  // the number of deals is small etc
  bottomRightInnerContainer: {
    '@global': {
      '.ReactVirtualized__Grid__innerScrollContainer': {
        overflow: 'visible !important',
      }
    }
  }
});

export default withStyles(styles)(({ classes, ...props }) => (
  <MultiGrid 
    classNameBottomRightGrid={classes.bottomRightInnerContainer}
    {...props} 
  />
);