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
/>

I've had my own troubles with this component. I went ahead and extended it and wrote my own functionality. Good luck. — Ohgodwhy, Jul 15 '17 at 00:21

score 5 · Answer 1 · answered Aug 09 '17 at 18:01

5

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
/>

answered Aug 09 '17 at 18:01

Robbie White

1,558
2
11
8

And if you want to go one step further and hide the toolbar & button that would allow them to hide the filters you can do something like .react-grid-Toolbar{ display: none; } – Robbie White Aug 09 '17 at 18:05
For some reason, doing this is making the content of all cells in the last column to disappear. They only show up again when I scroll the grid. – Felipe Apr 25 '18 at 20:51
You a genius! So simple solution, Thank you – Erik Kubica Aug 30 '18 at 11:52

score 2 · Answer 2 · answered Sep 12 '18 at 14:01

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.

score 0 · Answer 3 · answered Apr 27 '21 at 08:38

Implement your own ReactDataGrid class, and set the state of canFilter=true.

import ReactDataGrid from "react-data-grid";

class MyDataGrid extends ReactDataGrid {
    constructor(props) {
        super(props);
        this.state.canFilter=true;
    }
}

export default MyDataGrid;

Use MyDataGrid class instead of ReactDataGrid class then.

React Data Grid Filters Enabled (and open) by default

3 Answers3