React-data-grid: Show filter text boxes and set default filtering values in filter text boxes when initializing

[sahil37]

WHICH VERSION OF REACT ARE YOU USING?

Officially Supported:
[ ] v0.14.x

Community Supported:
[ x] v15.0.x

WHICH BROWSER ARE YOU USING?

Officially Supported:
[ ] IE 9 / IE 10 / IE 11
[ ] Edge
[ x] Chrome

Should work:
[ ] Firefox
[ ] Safari

---

I'm submitting a ... (check one with "x")

[ ] bug report
[x ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/adazzle/react-data-grid/blob/master/CONTRIBUTING.md

Current behavior

There is no way at the moment to show the filter boxes for each column by default on initialization without the user having the click on the filter rows button. Additionally there is no way to set default filter values for the filter boxes for each column.

Expected/desired behavior

A way to show the filter boxes for each column by default on initialization as well as populate these filter boxes for each column with initial values.

What is the motivation / use case for changing the behavior?

I am saving the filter values entered by the user on the back-end and I want to use them to repopulate the filter text boxes when the component is initialized again.

[dsego]

My workaround to show filters:

    componentDidMount() {
        this.grid.onToggleFilter();
    }
    render() {
         return (
         <ReactDataGrid
                ref={(grid) => { this.grid = grid; }}

[jarongao]

componentDidMount() {
  this.refs.dataGrid.setState({canFilter: true}, () => this.hideFilterButton())
}

hideFilterButton = () => $('div.react-grid-Toolbar .tools button.btn').hide();

works for me

[mathieuripert]

+1 for having the ability to set default values for filters at initialization.

[Prashant89Chaudhary]

+1 for having the ability to set default values for filters at initialization or from any funcation

[Prashant89Chaudhary]

Any update or workaround for this.

[bostondevin]

+1

[KevinMongiello]

Here's my workaround. In this case, I know the order of my columns never change, so I used the element selector in dev tools to find the input i wanted to set default to and voila.

componentDidMount() {
        this.grid.onToggleFilter();
        setTimeout(function () {
            document.getElementsByClassName("form-control")[2].value = "false";
        }, 250);
    }

[madhan-dhamodaran]

@sahil37, @KevinMongiello Any update or workaround for this. I want to show some default filter text, especially for the multi-select filter. I keep my filtering logic on the server side. So, I am getting the right results. I just need to set the filter values/text in the Filter controls. Please update if there is a work around for this.

Thanks,
Madhan

[amanmahajan7]

Currently RDG does not seem to support showing the filter by default and @dsego solution seems like a good workaround.

To show some default filter text, custom filters can be used. Something like the following should do the trick

filterRenderer: (props) => <CustomFilter initialFilterTerm="value" {...props} />

In the CustomFilter initialFilterTerm can be used to set the initial state

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Please reopen this if you feel it has been incorrectly closed and we will do our best to look into it. Thank you for your contributions.

[madhan-dhamodaran]

@amanmahajan7,

I have finished adding this and ready to raise a PR. I have been trying to get in touch with a you guys through email, slack etc., but in vain.

Not sure how to reopen this issue. But, this issue is valid and I will be raising a PR before this weekend

[Antonhansel]

Up so the bot won't close ;)

[bhanu52004]

Would be very interested in the capability to set default filter values through a function for the table

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Please reopen this if you feel it has been incorrectly closed and we will do our best to look into it. Thank you for your contributions.

[saulfrank]

How can we do this in a functional component like the examples??

[dngconsulting]

+1 How (the hell ;-)) is it possible not to have any way to display by default filters columns without activating this ugly toolbar...