React DatePicker calendar showing behind table head

I was using react datePicker and fixed-data-table-2 for my project. When I open the calendar, it shows behind table head. Here is the code for CSS file:

.ui-datepicker { z-index: 9999 !important;
}
.table{ z-index: -1000 !important;
}

Here is React Code for DatePicker：

 <div className='ui-datepicker'> <DatePicker selected={this.state.startDate} selectsStart startDate={this.state.startDate} endDate={this.state.endDate} onChange={this.onFilterStart} />
</div>

Here is shortcut code for Table:

<div className='table'> <Table rowHeight={50} rowsCount={tableData.getSize()} width={1000} maxHeight={1800} height={700} groupHeaderHeight={30} headerHeight={50} onColumnResizeEndCallback={this.resizeEndCallback} isColumnResizing={false} > <ColumnGroup header={<Cell>Basic Info</Cell>}> <Column columnKey='menuTranslation' header={ <SortHeaderCell languageChosen={this.state.languageChosen} onSortChange={this.sortChange} sortDir={colSortDirs.foodName}>Food Name</SortHeaderCell>} isResizable={true} width={columnWidths.foodName} cell={<MyTextCell data={tableData} field='menuTranslation' col="menuTranslation" />} />
<div>

This is the image for the problem:

3 Answers

Try setting the z-index on .react-datepicker-popper instead of on datepicker. That's the className that react-date-picker uses on the popup it creates.

.react-datepicker-popper { z-index: 9999 !important;
}

It's because of Material-UI Paper component styles. Paper component has an overflow: hidden style, and by removing it works perfectly.

import Card from "@material-ui/core/Card";
...
<Card>
<DayPickerInput name="servdate" dateFormat="yyyy-mm-dd"/>
</Card>

In style set .MuiCard-root{ overflow: visible!important; }

Just in case anyone ends here and is using Material-UI Cards, I solved it by adding z-index: 0 !important to the CardHeader style (I noticed that it had z-index: 3! important by default using Chrome dev tools).

<CardHeader style={{zIndex: '0 !important'}}>
...
</CardHeader>