Datepicker PopOver Display conflict with Tables Sticky class.

[thesarwars]

I'm facing issue when datepicker dialogue box opened. It is got behind when tables header is set 'sticky top-0 z-10'. I couldn't find any modification over the diaalogue box. It will good, if you put options to modify the 'dialogue box' too.

For your convenience I also provided my tables code sample:

<thead className="sticky top-1 z-20 divide-gray-400 divide-y">
<tr>
<th
scope="col"
className="px-4 py-2 text-start text-xs font-medium uppercase text-gray-700 sticky left-0 bg-gray-200"
>
SN
</th>
<th
scope="col"
className="px-2 py-2 text-start text-xs font-medium uppercase text-gray-700 sticky left-[50px] bg-gray-200"
>
Order Date
</th>
<th
scope="col"
className="px-4 py-2 text-start text-xs font-medium uppercase text-gray-700 sticky left-[144px] bg-gray-200"
>
Amazon Order Id
</th>
<th
scope="col"
className="px-4 py-2 text-start text-xs font-medium uppercase text-gray-700 sticky left-[325px] bg-gray-200"
>
Order Status
</th>
</tr>
</thead>

[onesine]

You can modify the z index of the dialog box container with the popupClassName props as follows

popupClassName={(defaultClass) => `${defaultClass} z-20`}

[Inlustra]

@onesine Where is this prop - is it in a newer version? I can't see it in the source code for the released 1.6.6