4

I've built a table with react-table and want to use the react-select component as as filtering component. All is up and running except that the dropdown from the react-select component gets hidden by the table.

I've been working quite a long time on this issue. With styling the react-select to look nice within the filter row.

The issue is that I cannot find any other way to override the CSS rules for

.ReactTable .rt-th,.ReactTable .rt-td

which appears to control the row with all filter. This css has the rule of overflow:hidden; and changing it to overflow:visible; resolves my issue.

Hardcoding the changes in this file is of course not the "right way to do it" since I might get trouble elsewhere.

Things I've tried:

  1. Passing styles={{overflow:visible}} to my filterComponent. This results in a strange style='Object object' and my style is not read.

  2. Passing getProps:()=>{style:{overflow:'visible'}}. Have tried some other methods then getProps but with no luck.

Any other ideas or suggestions?

Solution

The prop getTheadFilterThProps was missing in the documentation. The property was found by searching within the react-table folder and check if there where any props that were missing in the documentation.

<ReactTable 
    getTheadFilterThProps={(state, rowInfo, column) => {
                            return {
                              style: {
                                overflow: 'visible',
                              }
                            };
                          }}
Community
  • 1
  • 1
Simon Johansson
  • 836
  • 6
  • 18

1 Answers1

0

Ok, the answare was quite simple when finding the right props. I ended up searchin for getTheadFilterTrProps in the installation folder of react-table. Then I found that there were some more Props available.

I endend up adding

<React
    getTheadFilterThProps={(state, rowInfo, column) => {
      return {
        style: {
          overflow: 'visible',
        }
      };
    }}
Simon Johansson
  • 836
  • 6
  • 18