How can I conditionally render AG Grid sidebar without forcing the sidebar to close?

I am trying to make some customization to an AG Grid component in React. I want to change the appearance of the filter tool panel based on whether or not any filters are active. I wrote the following code in my AG Grid component:

  const filtersApplied = gridRef?.current?.isAnyFilterPresent();

  const sideBar = useMemo(() => {
    return {
      toolPanels: [
        {
          id: 'filters',
          labelDefault: filtersApplied ? 'Filters Applied' : 'Filters',
          labelKey: 'filters',
          iconKey: filtersApplied ? 'filter' : 'menu',
          toolPanel: 'agFiltersToolPanel',
        },
      ],
      defaultToolPanel: null,
    };
  }, [filtersApplied]);

However, this is producing some undesired behavior, as after a filter is applied via the side bar, the side bar closes. I want to avoid any overly complex effects where I write code to open or close the tool bar as there is no way I’m aware of that I can determine whether filters are applied via the sidebar of column headers. Thanks for any help anyone can provide!

I’ve also tried making a custom icon with a conditional class which resulted in the same behavior, and along with that did not memoize the sidebar. Additionally, I tried to just memoize the labels and icons which did not work. I’m open to other ideas (i.e. changing background color of the side bar) as long as there is some visual that a filter is enabled.

You need to sign in to view this answers