Custom Filter + Sort in one column

When I define a column with cell filtering and sorting enabled, clicking the filter input triggers the sorting. Can I somehow compose the header by myself (trigger included)? I tried headerFormatter, but I think the sort function is bound to the th.sortable element itself, and I can’t access it from headerFormatter iteself.

I can’t find such an example in the Storybook. Sorting and Filtering are occouring independantly only.

[AllenFang]

@owczar1981 @victorkpublic I think if you guys use custom filter, you may need to call stopPropagation manually. to avoid the event bobble up: for example this is how react-bootstrap-table2 avoid to trigger the sort when click on default text filter:

https://github.com/react-bootstrap-table/react-bootstrap-table2/blob/master/packages/react-bootstrap-table2-filter/src/components/text.js#L75-L80

Let me know if above solution is not work for you guys. thanks

[sovanjana]

I am using customFilter with react-datepicker, and I am facing the same issue.

function DateTimeFilter(props) { const { onFilter, column } = props;

const [startDate, setStartDate] = useState();

const handleChange = (date, event) => {
    event.stopPropagation();
    setStartDate(date);
    onFilter(date);
}

return (
    <DatePicker
        dateFormat='dd/MM/yyyy'
        selected={startDate}
        onChange={handleChange}
        isClearable
    />
);

}

this is the code snippet I am using but after preventing also the sorting gets triggered

@AllenFang