Search code examples
reactjstypescriptmaterial-uimui-datatable

Vertical stepper with table content

I am currently in a pickle with a component I want to make. It is a mix of a vertical Stepper component and a Datagrid.

As you can see below, I want to group certain table sections within a vertical Stepper content. This is purely a component for data visualization, so do not worry about any logic attached to each component. The stepper should also always have all steps expanded.

Do you have any idea how to proceed with this problem? Any help would be greatly appreciated!

I am writing the application in React (typescript) using MUI v5 pro. Design

Solution

  • (Disclaimer: this response is opinion-based)

    I would begin by getting an MUI stepper to behave like you would want. It appears that you want to use something like Tabs, but have them look like a Stepper component.

    There are several directions I would personally take. Namely, modifying a Tab component to look like a Stepper or modifying a Stepper component to behave like a Tab. I chose the later option as I started working on this in a CodeSandbox.

    Second, I would create a DataGrid section of the page that would change based on the state of the previous component. The CodeSandbox example showed a basic behavior with text.