React-data-grid: To Enable Filter by default without button click

[gmarathi-nisum-com]

Do/Can we have any property on component to enable filterable row without click of button?

[sdarmaputra]

Yes, we can. I found a simple trick after reading the source code of ReactDataGrid component. Still, use toolbar props of ReactDataGrid to achieve this behavior.
Here's how I do this:

First, I create empty toolbar component like this:

class EmptyToolbar extends React.Component {
    componentDidMount() {
        this.props.onToggleFilter()
    }

    render() {
        return (<div></div>)
    }
}

I found that ReactDataGrid component has onToggleFilter method to change the state of table header whether to show filter or not. This method injected into element defined in toolbar prop of ReactDataGrid component.

So, the last step just to pass this empty toolbar component into toolbar prop of ReactDataGrid component, like this:

<ReactDataGrid
enableCellSelect={true}
columns={this.state.columns}
onGridRowsUpdated={this.handleGridRowsUpdate}
onGridSort={this.handleGridSort}
rowGetter={this.getRow}
rowsCount={this.handleRowsCount()}                                      
toolbar={<EmptyToolbar/>} //here's the EmptyToolbar component placed
onAddFilter={this.handleFilterChange}
getValidFilterValues={this.handleGetValidFilterValues}
onClearFilters={this.handleClearFilters} /> 

The point is to execute onToggleFilter method of ReactDataGrid component. By executing this method we change the state of the table header to show filters. Then, if we execute it again, it will hide the filters. Maybe there's a better way to achieve this but here's my solution. Hope this will help :)

[gmarathi-nisum-com]

@sdarmaputra Thank you for the Trick:)

[daredevil82]

@sdarmaputra very good solution, and thanks for posting a clear and concise implementation

[jacek-jaskolski]

Simpler solution:

```
import React, { Component } from 'react';
import ReactDataGrid from 'react-data-grid';

class Grid extends Component {

componentDidMount = () => this.refs.grid.onToggleFilter();

render() {
return (
ref="grid"
/>
);
}
}

[rpatelcode]

May I ask you how to use in functional component?