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