Storybook default collapse argsTable by category

Question

I am trying to default collapse one of my categories inside of my argsTable since it will contain a lot of controls.

My argTypeslooks like this

{
  "component": {
    "control": "text",
    "table": {
      "category": "Utility"
    }
  },
  "flex": {
    "control": "text",
    "table": {
      "category": "Higher Order Component"
    }
  },
  "display": {
    "control": "text",
    "table": {
      "category": "Higher Order Component"
    }
  }
}

Is there a option that defaults the table accordion to be closed? And can it be applied per category?

Answer 1

A bit late and not the answer I wanted myself, but found a hacky workaround by finding the relevant category using a querySelector and clicking it.

Didn't manage to get the props provided by Storybook to work 🤷‍♂️

Something like this worked for me:

import { Decorator } from '@storybook/react';
import { useEffect } from 'react';


/** @type { import('@storybook/react').Preview } */
const preview = {
  parameters: {
    docs: {},
    },
    options: {},
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
  decorators: [
    (Story => {
      useEffect(() => {
        setTimeout(() => {
          // Find the first <tr> with a title starting with "Hide <category>"
          const tr = Array.from(document.querySelectorAll('tr'))
            .find(tr => tr.getAttribute('title')?.startsWith('Hide Higher Order Component'));

          // Find the first button inside that <tr>
          const button = tr?.querySelector('button[tabindex="0"]');

          if (button) {
            (button as HTMLElement).click();
          }
        }, 10);
      }, []);

      return Story();
    }) as Decorator,
  ],
};

export default preview;