Repeating groups/Grid/List: Column configuration options for table

[olemartinorg]

We'll soon have 3 components displayed as a table, those being repeating groups, Grid, and List. All of these components could benefit from using a common configuration object for how to display columns. This includes support for:

• Changing the label for a given column (as an alternative to Repeating groups: Special labels for the table view #68)
• Changing the width of the column to:
  • A fixed width (unless that interferes too much with a responsive design)
  • A fixed percentage width (where a combined 100% still reserves room for the buttons)
  • Auto width (the default)
• Controlling the text alignment in a column
• Controlling text overflow, using:
  • Ellipsis without line-wrapping (the default)
  • Line-wrapping and no overflow limitations
  • Line-wrapping with a max height (ellipsis or fade-out if the text overflows the max height)

[StianVestli]

org/ssb

[andsjo-svv]

org/svv

[Magnusrm]

Options:
"width": Sets width of column to a fixed percentage, ex. "25%" if the space is available or "auto", which equally distributes remaining width that is not set yet among columns with "auto". Default: "auto".
"alignText": Sets text alignment to "left", "right" or "center" for text content. Default: "left".
"textOverflow"

• "lineWrap": Toggles line wrapping for text content to true or false. Default true.
• "lineHeight": Sets the number of lines displayed for text content before hiding overflow with an elipsis(...). Default: 2.

Proposed format for configuration options for Repeating Groups:

tableHeaders exists already, which, specifies which fields should be displayed in the table when the group is closed and in which order.
tableColumns will not determine any header ordering but will add column formatting options to headers based on the id's of the components in the header.

"tableHeaders": ["currentValue", "newValue", "mainUploaderSingle", "mainUploaderMulti"],
"tableColumns": {
  "currentValue": {
    "width": "25%",
    "alignText": "right",
    "textOverflow": {
      "lineWrap": true, 
      "maxHeight": 2
    }
  },
  "newValue": {
    "width": "auto",
    "alignText": "center",
    "textOverflow": {
      "lineWrap": false
    }
  }
},

Proposed format for configuration options for Grid:

This format adds configuration options to the row format used in Grid. columnOptions is applicable to cells in rows that are headers, specified by "header": true.

{
  "id": "myGrid",
  "type": "Grid",
  "rows": [
    {
      "header": true,
      "cells": [
        {
          "text": "My header text",
          "columnOptions": { // new configuration determines column format, applicable to cells in rows that are "header" rows
            "width": "30%",
            "alignText": "left",
            "textOverflow": {
              "lineWrap": true,
              "maxHeight": 3
            }
          }
        },
        {
          "component": "myFirstRowComponent1",
          "columnOptions": {.            // new configuration, determines column format
            "width": "70%",
            "alignText": "right",
            "textOverflow": {
              "lineWrap": false
            }
          }
        }
      ]
    },
    { "cells": [
      {
        "text": "my.text.key",
        "alignText": "center",           // new configuration for text cells, overrides column format for cell
        "textOverflow": {              // new configuration for text cells, overrides column format for cell
          "lineWrap": false,
        }
      },
      {"component": "mySecondRowComponent1"}
    ]},
    {
      "readOnly": true,
      "cells": [
        {"text": "texts.sum"},
        {"text": ["sum",
          ["component", "myFirstRowComponent1"],
          ["component", "mySecondRowComponent1"]
        ]}
      ]
    }
  ]
}

For reference: @olemartinorg

[Magnusrm]

Functionality for column options for repeating groups as well as documentation has been implemented in the PRs :#1068 and Altinn/altinn-studio-docs#886.

The feature for column options for Grid has been implemented in Grids feature branch: https://github.com/Altinn/app-frontend-react/tree/feat/grid.
Documentation has been added for column options for grid in Grids documentation branch: https://github.com/Altinn/altinn-studio-docs/tree/feat/grid
Because of this the feature for column options for grid will be reviewed and tested along with the rest of grid in its entirety and i am therefore closing this issue.