React-data-grid: onToggleFilter option not working

Created on 23 Nov 2017 · 6Comments · Source: adazzle/react-data-grid

React-15.4.2

Firefox 57.0

react-data-grid 2.0.49

react-data-grid-addons 2.0.49

I am using Toolbar component with react-data-grid. Here is the code:

<ReactDataGrid
            columns={this.state.columns}
            rowGetter={(i) => this.rowGetter(i)}
            rowsCount={this.state.rows.length}
            minHeight={300}
            toolbar={<Toolbar 
                enableFilter={true}
                filterRowsButtonText="Filter"
                onToggleFilter={this.onToggleFilterButton}
            />}
            onAddFilter={this.handleFilterChange}
            onClearFilters={() => this.onClearFilters()}
        />

onToggleFilterButton() function is not firing. Although filters do show/hide whenever I click on Filter button.

Can someone please tell what am I missing?

bug wontfix

Source

topgun743

Most helpful comment

Here's how I solved it with higher order components:

First, define your wrapper function (in global scope)

const toolbarWrapper = (ToolbarComponent, onToggleFilter) => {

    return class extends Component {
        render() {

            const origOnToggleFilter = this.props.onToggleFilter
            const newOnToggleFilter = () => {
                origOnToggleFilter()
                onToggleFilter()
            }

            return <ToolbarComponent {...this.props} onToggleFilter={newOnToggleFilter} />
        }
    }
}

Second, create a MyToolbar component using the toolbarWrapper function (you can do this within any scope):

const MyToolbar = toolbarWrapper(Toolbar, () => console.log('Custom filter toggle function'))

Finally, when rendering <ReactDataGrid />, use MyToolbar just as you would Toolbar:

<ReactDataGrid toolbar={
    <MyToolbar enableFilter={true}>
        <div>A child</div>
    </MyToolbar>
} /* ... */ />

milesrichardson on 23 Nov 2017

👍2

All 6 comments

Funny, I'm having this problem at the exact same time as you.

Still working out the best solution, but the problem is that the Grid component injects its own onToggleFilter prop into the Toolbar component that you define, effectively overriding your prop.

I think the solution is a custom Toolbar component.

milesrichardson on 23 Nov 2017

I am banging my head over it for the last 4 hours. Still no clue.

topgun743 on 23 Nov 2017

Here's how I solved it with higher order components:

First, define your wrapper function (in global scope)

const toolbarWrapper = (ToolbarComponent, onToggleFilter) => {

    return class extends Component {
        render() {

            const origOnToggleFilter = this.props.onToggleFilter
            const newOnToggleFilter = () => {
                origOnToggleFilter()
                onToggleFilter()
            }

            return <ToolbarComponent {...this.props} onToggleFilter={newOnToggleFilter} />
        }
    }
}

Second, create a MyToolbar component using the toolbarWrapper function (you can do this within any scope):

const MyToolbar = toolbarWrapper(Toolbar, () => console.log('Custom filter toggle function'))

Finally, when rendering <ReactDataGrid />, use MyToolbar just as you would Toolbar:

<ReactDataGrid toolbar={
    <MyToolbar enableFilter={true}>
        <div>A child</div>
    </MyToolbar>
} /* ... */ />

milesrichardson on 23 Nov 2017

👍2

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.