ReactJs Material-Table How to show/hide filter options

Question

I am using material-Table plugin for my reactJS application to display table of data.

I have requirement to show the filtering on column. But when I enabled filtering=true then it creates one more row on Header section below the heading. Which takes unnecessary space and its shown always.

I want to hide the filter section. Maybe I show the filter icon next to column and when clicked it show the filtering text line. I saw this option is on tubular-react tables. But can I do in with material-table?

Answer 1

Its not supported out of the box, but if you save the filtering state in a useState and set that to true update the table, like this:

function Table(){
    const [filtering, setFiltering] = React.useState(false);
    retrun <div>
           <MaterialTable options={{filtering}}/>
           <button onClick={() => {setFiltering(currentFilter => !currentFilter)}}>Show Filtering</button>
          </div>
}

Answer 2

So the solution came out like below. (I am using class)

In Material-table, need to add a button for filter. which will toggle the filter section. Also add the options={{Filtering: this.state.filter}}. We also need to define a small function to toggle the flag.

options={{Filtering: this.state.filter}   
 actions={[
               {
                 icon: 'filter',
                 tooltip: 'Enable Filter',
                 isFreeAction: true,
                 onClick: (event) => { this.functionName(!this.state.filter)}
                                  }
                                ]}