Update subForm tableColumns config to comply with UX design

[nkylstad]

depends on: #13655

User Story

As a user i want to have a clean understandable user flow for configuring table columns.

Resources

Issue implementing tableColumn config: #13655
SubForm configuration docs: https://docs.altinn.studio/nb/altinn-studio/reference/subform/config-options/

Specification

• Table columns configuration UI should match this Figma sketch.
  Key points to consider:
  • The configuration is located within the "Text" config accordion.
  • Adding a new table column should open a new configuration panel (card). The panel should contain:
    • A select input showing only valid components from the subForm layout.
    • A read-only label displaying the text field for this component.
    • Confirm and delete buttons.
  • Already created columns should display the column number and the component label in a list
    • Columns should be ordered by number
    • Hovering over a column entry should indicate that it's editable like StudioToggleableTextfield
    • Clicking a column entry should open the edit card specified above

Text Content

Any texts used in the configuration of table columns should be quality controlled

[wrt95]

Discussed internally on Slack, but to summarise:
The design is created with user's perspective in mind, and the PR which has implemented the initial logic extracts the fields directly based on how the config looks.
Subform has two important elements; layout-set for subform (contains components that are displayed inside the subform itself), and the actual subform component that can be dragged into the main form.
This means that the actual setup of components for a subform is done directly by editing the actual layout-set of the subform. So, when the user is to configure the subform component itself in the main form, he/she can select the component to be displayed in the table (in the main form) based on what is set up in the layout-set for the subform. This is done by selecting the component from the subform. Therefore, we get the rest of the information (contentDetails) from the component in the subform itself 😄

Figma sketches where the user can configure headerContent.

@Annikenkbrathen, can you update the sketches if there are any changes made? 😄

[Jondyr]

first iteration just copies keys/values from component when saved, no sync.
move table config up to upper level.

[Annikenkbrathen]

@Jondyr I started on this issue today #13842.

I think you can move the config as you see fit for now to complete the task, but the design will likely need to be fixed in a new iteration once it is done

[Jondyr]

@Annikenkbrathen Ok, sounds good. Thanks for the heads up!