Is there a way to hide/filter columns after a search?

const columns = [ 
  { headerName: "Product", field: "product", filter: true }, 
  { headerName: "Name", field: "name" }, 
  { headerName: "Field", field: "field" },
  { headerName: "Date", field: "date" }, 
  { headerName: "Open", field: "open" }, 
  { headerName: "High", field: "high" }, 
  { headerName: "Low"开发者_开发百科, field: "low" }, 
  { headerName: "Close", field: "close" }, 
  { headerName: "Adjusted", field: "adjusted" }  
]; 

<AgGridReact 
          defs={columns} 
        data={rowData} 
        /> 

I know that you can use columnVisibility: { namehere: false } or show: false, enableHiding: true or false, etc but I'm trying to make it so no matter what, EVERY column aside from the first three are automatically "removed" after a search, including the headerName.

if you have lots of custom tables in your react app , I strongly suggest that to use PrimeReact UI library. coltoggle documentation in primereact can save your time