search

gregnb / mui-datatables

Datatables for React using Material-UI
MIT License
2.71k stars 933 forks source link

Custom Calendar Filter Component Size - Not Fitting Correctly #1113

Open thoughtworks-tcaceres opened 4 years ago

thoughtworks-tcaceres commented 4 years ago

Hello, I am currently trying to create a custom filter by using the filterOptions object. I am able to get the filter to show up, however the calendar does not pop up like it normally would. Note: referring to the "Date range" filter.

Screen Shot 2019-12-10 at 3 03 32 AM Screen Shot 2019-12-10 at 3 03 42 AM

`{ name: "date", label: "Date", options: { filter: true, filterType: "custom", filterOptions: { names: [], display: (filterList, onChange, index, column) => { return (

      );
    }`

Note: I've tried many various ways however I am unable to get the calendar to popup like it should (3rd picture expected behavior).

Expected Behavior

For the calendar to pop up like it normally does, as such:

Screen Shot 2019-12-10 at 2 38 51 AM

Current Behavior

Component gets cut off.

Tech

"@material-ui/core": "^4.7.2", "@material-ui/icons": "^4.5.1", "mui-datatables": "^2.13.3", "react": "^16.10.2"

The calendar is a PRIMEREACT component.

gabrielliwerant commented 4 years ago

Personally, I'm not too familiar with PRIMEREACT, and I can't guarantee that every part of this library works with every other library. What you might need to do is find a datepicker library that is built off of material ui, as is this library. Material-ui also has a datepicker component https://material-ui.com/components/pickers/.

thoughtworks-tcaceres commented 4 years ago

Noted. I was trying to get the prime react one to work since material ui does not allow for multiple dates to be selected. Is it possible to override the mui-data table components? I couldn't figure out which classes, so I could at the very least do an inline calendar.

gabrielliwerant commented 4 years ago

Possible to override the styles? Sure! It works the same as it does in material-ui. You can take a look at the custom-styling example for some examples.