Add tableColumns config

[standeren]

Description

For this issue the scope is to make it possible to add and remove tableColumn-objetcs from the array of tableColumns on the subform component.

A tableColumnObject should look like this:

type TableColumn = {
        headerContent: string;
        cellContent: {
            query: string;
            default?: string;
        }
    }

Whereas the tableColumns should look like this:

type TableColumns = TableColumn[];

The component rendering this config can be called something like EditTableColumns and can be rendered from Text.tsx component with the condition that the component is a subform. Similar as what have been done with the EditImage component:

{form.type === 'Image' && (
        <>
          <Heading level={2} size='2xs' className={classes.heading}>
            {t('ux_editor.properties_panel.texts.sub_title_images')}
          </Heading>
          <EditImage
            component={form}
            handleComponentChange={async (updatedComponent) => {
              handleUpdate(updatedComponent);
              debounceSave(formId, updatedComponent);
            }}
          />
        </>
      )}

Inside the EditTableColumns we should render a Card-ish design of each tableColumn object where each one should allow editing the headerContent and the cellContent, as well as deleting the tableColumn object. In addition the component should have a button to add a new empty tableColumn object to the array of tableColumns on the component.

When it comes to editing a single tableColumn we need three fields;

1. For editing the headerContent. We can use the StudioTogglableTexfield for this
2. For editing the cellContent.query. We can use the StudioTogglableTexfield for this
3. For editing the cellContent.default. We can use the StudioTogglableTexfield for this

cellContent.default is optional to set, whereas the others are required.

In the first iteration all these fields should be entered with freetext.

Next iteration - OUT OF SCOPE FOR THIS ISSUE

The fields need more configuration possibilities:

1. For editing the headerContent which should use the TextResource component in order to reference a textResource, either one created inline or by using search.
2. For editing the cellContent.query which will be a reference to a datamodel-field. The name of the datamodel should not be included in the reference, since the component will implicitly understand that the fileds should be looked up from the data model that is connected to the layoutset for the subform.
3. For editing the cellContent.default, which is optionally to set, we should also use the TextResource component.

Also we should consider using a modal for editing each tableColumn in order to force the app-developers to only edit one tablecolumn at a time

Figma sketches

https://www.figma.com/design/VAvGOqkMhKM8HL8h4xBeDH7b/Re-design-Altinn-Studio?node-id=13174-38395&node-type=canvas&m=dev

[lassopicasso]

Tested in dev - works as expected :)