Hey, I'm currently working on a page component (documenttype) which will ultimatly render a pricingtable on the frontend and can have multiple table columns.

I created nested content for a column to have the possibility to create multiple table columns for the pricingtable component. Each table column contains the following information:

• Title (title and description)
• Features (which is a list of features, also nested content)
• Price
• Image
• (CTA) Button

I want to provide a possibility for users to define the order of each informational block of a column (for every column added to the component). So I want to display a list which will contain (the strings) for title, features, price, image and button where the user can reorder that list (via drag and drop?). So when rendering the columns on the front end (view) I will do this in order the user has defined.

What's the best way to implement this?

I was already thinking about the following possibilities:

1. Create a column item documenttype which will be allowed as child item of the pricingtable component. When an pricingcomponent is created I can catch that event to automatically create 5 childitems (title, features, price, image and button). That way I can display a listview to the pricing component where the user can see these items and sort them via actions -> sort. But I don't like this a lot because it's not very user friendly for this use case + I need to find a way to disable editing functionality. enter code here

2. Another way I was thinking about was, like in first scenario, create a column item documenttype which will be added as nested content for the pricingtable component. When a pricingcomponent is created I can also catch that event to automatically create the needed column items for that specific property. That way the user can reorder the items via drag and drop. But I would need to disable the editing functionality for this items, because nothing may be changed to these items. Is there a good way to achieve this? I already did similar things to show/hide html elements in the backoffice by adding some javascript in a custom created 'tweaking' app plugin.

In addition I also want to let the user choose which of the information blocks may be displayed or not.

Thx