React Data Grid Filters Enabled (and open) by default

Question

Is there a way to enable filters to be open (displayed) by default within React Data Grid? Preferably one that allows me to avoid passing in the toolbar={<Toolbar enableFilter />} prop to <ReactDataGrid />

Reading through the Adazzle component docs it doesn't seem that there's an apparent prop to pass in on the main <ReactDataGrid /> component that displays filters without invoking onToggleFilter() via the <Toolbar /> component.

The final grid component I'm building will render with filter inputs immediately visible and editable by the user, with no need to 'click-to-clear' or otherwise invoke the documented onClearFilters() function. This also makes the <Toolbar /> component (and nested <Filter Rows /> button unnecessary.

My current component is...

<ReactDataGrid
   onGridSort={this.handleGridSort}
   columns={this.state.columns}
   rowGetter={this.rowGetter}
   rowsCount={this.getSize()}
   toolbar={<Toolbar enableFilter />}
   onAddFilter={this.handleFilterChange}
   onClearFilters={this.onClearFilters}
/>

Ideally the final component would look something like this...

<ReactDataGrid
  onGridSort={this.handleGridSort}
  columns={this.state.columns}
  rowGetter={this.rowGetter}
  rowsCount={this.getSize()}}
  onAddFilter={this.handleFilterChange}
  filtersVisible={true}  // Renders with filters visible/active
/>

Answer 1

You are correct, there doesn't seem to be a built in way to have the toolbar & filters automatically open, but a fairly easy workaround is to do

 componentDidMount(){
    this.myOpenGrid.onToggleFilter();
  }

and then add a ref to your grid so it's filters are toggled open immediately on mount

<ReactDataGrid
   ref={(datagrid) => { this.myOpenGrid = datagrid; }}
   // all other set up
/>

Answer 2

I had the same requirement. I know you stated you don't want to use <Toolbar />, but, just for the record, what you can do.

I created my own <Toolbar /> component. I followed their source code here and took only what I needed.

import React,{Component} from 'react';
class Toolbar extends Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        this.props.onToggleFilter();
    }

    render() {
        return (
            <div>
                {this.props.children}
            </div>
        );
    }
}

And added that to a toolbar prop on ReactDataGrid. The filters are always displayed, no button, no need for hiding anything with CSS.