Custom filter with Date Picker

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]

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