Help-How to Display A Dashboard with X datasource

[DVW-Design]

Summary

I don't know if it's possible in storybook but I have a Dashboard component with

• Views : Cards in a Flex Grid | Datagrid Table
• ContentType: Clients | Teams | Projects | settings, etc…
  (
  Each ContentType has his own mock data.

Since I cannot have x times 'data:', in args,
How would you handle that in a unique Story (instead of one Story per Views/ContentType) which I have already aside (without the Dashboard context).

would a 'Page/Screen' do the job? (cf. https://storybook.js.org/docs/writing-stories/build-pages-with-storybook)

Not sure it's clear.
Any suggestions?

Thanks for your attention (and help).

Additional information

Storybook latest (9x) Vite / React + TS

Create a reproduction

No response

[vanessayuenn]

@dosu-bot

[pavitrabhalla]

@dosu-bot

[dosubot[bot]]

Yes, using a "Page/Screen" approach is a great fit for your use case. You can structure your Dashboard story to accept args like view and contentType, then use those to select the right mock data and render the appropriate layout. This lets you manage all combinations in a single story and switch between them using Storybook Controls, without duplicating stories for each scenario.

Here's a simplified example in React/TS:

// Dashboard.stories.tsx
import type { Meta, StoryObj } from '@storybook/react';
import { Dashboard } from './Dashboard';
import { clientsData, teamsData, projectsData, settingsData } from './mockData';

const meta: Meta<typeof Dashboard> = {
  component: Dashboard,
  args: {
    view: 'cards', // or 'table'
    contentType: 'clients', // or 'teams', 'projects', 'settings'
  },
  argTypes: {
    view: { control: 'radio', options: ['cards', 'table'] },
    contentType: { control: 'select', options: ['clients', 'teams', 'projects', 'settings'] },
  },
};
export default meta;

const dataMap = {
  clients: clientsData,
  teams: teamsData,
  projects: projectsData,
  settings: settingsData,
};

export const Playground: StoryObj<typeof Dashboard> = {
  render: (args) => (
    <Dashboard
      view={args.view}
      contentType={args.contentType}
      data={dataMap[args.contentType]}
    />
  ),
};

This setup lets you use the Controls panel to switch views and content types on the fly. You can organize your mock data in a map or object keyed by contentType, and Storybook will re-render the Dashboard with the right data as you change controls. This pattern is fully supported and recommended for composite components and screens—see the official docs for more details and advanced patterns like args composition and context providers if you need to mock more complex dependencies or state [docs].

For even more DRYness, you can compose args from subcomponent stories or use decorators/context if your Dashboard needs to simulate app-level providers [docs]. This approach scales well as your Dashboard grows.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}