React Data Grid Filters Enabled (and open) by default

user_6182549 0
Viewed 3569

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
/>
react-data-grid reactjs
3 Answers

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.

user_49378970

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.

user_98987210
Related