Alternative solution for a repeating column layout

User Experience
1

Hello experts,

I am a UX designer trying to build a model window to display financial details as shown in the attachment (Cosmos design system). I’ve designed this to get repeating dynamic column functionality but saw it is now depreciated and not recommended in cosmos.

As per the given screenshot, the required functionality should be : by default, the screen should show 3 column layout with given column headers (Category, Year 1, Year 2) and row header groups (income, expenses etc). and user should be able to click on (+ Add Year) button to add 3rd year column in to the same table/layout.

Could you please suggest a feasible approach to achieve this requirement?

Thanks

dynamiclayout.png
dynamiclayout.png2022×1217 136 KB

2

@Lakpriya

This can be achieved via a DX component. Probably a combination of the following functionality:

If you are going this route make sure that the table is responsive, adjusts to smaller screens correctly and can be understood by screen readers.