React-table: Custom filter with Date Picker

[Marmiz]

I am creating a custom Filter that will show a classic Date Picker.
However the Rendering of the popover is wrong/not happening as expected.
It looks like that the "classic" calendar pop over is visible only inside the th filters.

To make sure it wasn't a single library to act funny I tried to reproduce the same issue with 3 different DatePicker React libraries:

Hacker0x01/react-datepicker
gpbl/react-day-picker
airbnb/react-dates

I set up a simple sandbox where you can see the issue.
code sandbox

The first and the second seems like doing nothing, but in reality the pop over is created, you can see it from the console inspector.
(for example div class="react-datepicker-popper is created and has its css)

While the third is created in a modal to showcase that the input is actually working, is just the "inline" version rendering that is acting up.

Thanks for any suggestion or direction you can point me to,
and apologise in advance if this is not an issue with the fantastic react-table.

What version of React-Table are you using?

react-table: 6.5.3

[gary-menzel]

I suspect the issue is that the table "cell" is a div and the overflow is being clipped. Therefore, any component that is expecting unrestrained space to overlay another element is not going to work (unless the overlay can be untangled from the component and be made to "ride" on the body tag or similar). So, it is probably an issue but determining if it is react-table or the component is debatable.

I had a quick look at the codesandbox and can see the impact. Not sure how to address it with those tools specifically but I might give it a go with another date-picker component I have been using lately.

[gary-menzel]

I've had a further thought about this. The DIV making the header cell has "overflow: hidden" (as I suspected). If you do the following on your column definition with the datapicker you may find that your popover now works (it does with react-bootstrap-data-picker without any other changes):

                  getTheadThProps: ()=>{
                    return {
                      style: {
                        overflow: "inherit"
                      }
                    }

                  },

[gary-menzel]

UPDATE: the above needs to be getTheadFilterThProps and needs to be at the "table" level and not in the column definition. You should probably also consider checking to make sure the column requires the change and only return the style change if it does.

[vrmontes]

I am using DayPickerInput from react-day-picker and i had to use:

getTheadFilterThProps={() => { return { style: { position: "inherit", overflow: "inherit" } } }}

Without position: "inherit" the date picker closed when clicked outside the width of the input filed

[gary-menzel]

The points to note here are:

• react-table deliberately hides the overflow to enable the ellipsis mechanism that shows the ,,, when content is to big to fit into a cell and you need to override that if you want content to extend outside the cell
• dealing with components that use overlay mechanisms is about the component being added rather than react-table and needs to be solved specifically for that overlaying component