Design: Tables

[Febakke]

Design: Tables

To cover the service owner needs from 7273 we will create a new table component with the possibility of adding both static and editable cells.

The tables should be used only when the information requires it:

• When you have a large amount of data that requires to be arranged logically in rows and columns.
• When you need to organize data that is too detailed or complicated to be described adequately in the text.
• When the user needs to compare information between rows or columns, and quickly see the results.

Design sprint tasks

Tasks that need to be done beforehand

• Define scope of designsprint
• Structure the service owner needs from Identify the needs and wants of app owners who want table charts altinn-studio#7273 They need to be handled in this sprint
• Create agenda for the designsprint
• Find similar solutions and inspiration
• Look into if we can get users for quick usertests

Remaning tasks

• Finish up the design of the first version of tables
• Land the scope of the first version of the table
• Detailed specification - ready for development
• Make design guidelines for the app developers on how to use the table correctly

Suggested scope

There is no way that this component wont be a huge undertaking for the developers, but to minimize it a little we want to scope it down. So for the first version of the table we will not focus on the repeating aspect of table. (Letting the user add and remove rows themself.)

Features we want to support in first version:

New : Support static fields in table: Described in #8491

• WCAG Requirements - The component must meet all relevant requirements from WCAG.

• Validation - If there are any validation rules, we need to follow the WCAG guidelines on how to help the user correct the fields that are failing.

• Responsiveness - The table should work on all screen sizes with horizontal scroll in first version.

• Read-only table - Present tabular data in a table that is not editable.

• Editable table - The users should be able to edit the cells in the table. The cells should support inputfields, right-aligned inputfields (for numbers), dropdown (select) and checkboxes.

• Combination of read-only and editable cells- Some cells will be pre-filled with data that the user cant edit. There needs to be a good visual indication on what cells the user can edit, and the cells that are read-only.

• Summation row - One or more rows that show the calculation based on other values in the table. Should be presented as read-only fields and can be a row or a column. Do they need to be read-only fields? Take another look at this!

• Header cells - Up to two tier headers. The first table example here is a good example of what we need to support

• Dynamics - Use dynamics to hide rows or columns that are are not important to the user. clarification: Should also be able to handle single rows.

• Prefilled rows - Use a datasource to create the number of rows needed. You should also be able to set a value as the row header. (The column to the left)

Features we are not supporting in this version

• Repeating tables - The user can build the table. Adding and removing rows.
• Mobile version - There should be made an optimized version for the smallest screens, where cells are stacked below each other.
• Zebra stripes - For tables with a lot of data elements this will enhance the readablity of the table.
• Freezed columns - For large data sets it could be helpfull to freeze a column to keep it visible as a user scroll horizontally. This will make it easier to know what the data belongs to and compare it.
• Pagination - For larger tables this will be a must. A way to set a max visible rows and navigation for the user to go trough all the tables.
• Header sorting - For larger tables.
• Filtering and search for end users - The table will be static, we will not support searching or filtering in this version.
• Filtering for app owners - Based on a user answer earlier in the process, some columns or cells should be possible to hide.
• On Paste - Can we help the user to import information that is already in a table in another software, e.g. Excel.

Figma sketches

https://www.figma.com/file/wnBveAG2ikUspFsQwM3GNE/Altinn-Studio-Apps?node-id=14756%3A10448

Design for first scope

Table example with:

• Inputfields, dropdown (select) and checkboxes
• Right aligned text for numbers
• Read-only cell
• Summary row
• Validation

Validerignsmeldinger_tabell.mov

---

Table example with:

• Scroll and expanded view

tabell_med_maksimert_modal.mov

---

Table example with:

• Multiple header cells

---

Table example with:

• Dynamic cells

Dynamiske.tabeller.mov

---

Table example with:

• Mobile view

dynamisk_mobil.mov

mobile-view.mov

---

Design for next scope

Table example with:

• Repeating tables

addingAndDelitingRows.mov

If you want to encourage the user to make changes to the table, it should be set to edit mode by default. If the table has pre-filled data and the user is not to be prompted to edit, it can be set to view mode. The user will then have to press "Edit" to be able to make changes.

---

Table example with:

• Zebra stripes

---

Table example with:

• Pagination, search and sorting

---

Detailed specification

Cell sizing

The cells should as default have flexible witdh, and there should be a way to set a minimum width for each of the columns.

Breakpoints

Text adjustments

Different start-modes for advanced table

Table Guidelines

[FinnurO]

Altinn/altinn-studio#378

[StianVestli]

org/ssb

[olemartinorg]

Time has come to close this issue! 🥳

In about October last year (according to the history here), we had a refinement meeting and I suggested splitting this issue into three components; Grid, List and our existing repeating Group. Instead of implementing an almighty Table component that could be used for just about everything (and accepting both large amounts of data from outside the data model, while also allowing the user to add/remove rows, which is a quite impossible task in our current model), we opted for separate components for the separate concerns here. This issue has been left open for a while, as we/I weren't quite sure we had covered everything, functionality wise.

I'm pretty sure I've read through everything here now (including #298, which describes Grid pretty accurately), and I feel confident the functionality described here has either been implemented or at least been described in other issues. See my lists of related issues below.

Comments on specific requirements above

• Prefilled rows: Repeating groups allow for prefill, and these repeating groups can be displayed as a table (with the onlyTable mode introduced in Repeating groups: Components in table #579). Considering this as solved by the support in repeating groups.
• Mobile version: Both the Grid component and static Grid-rows are supported on mobile, although text cells disappear (see Text cells in grid component are not rendered in mobile viewport #1138). Updating that issue to include the examples here.
• Zebra stripes: Dependant on Table design in the design system, so not the level of detail we go to here in app-frontend-react. Not implemented there as far as I know. We should create a new issue for this if it still a requirement.
• Filter, search: Most of this is supported already in repeating groups and List, but some filtering remains to be implemented for Grid (see Grid component: Expressions to hide entire rows/columns/cells #1211)
• Multiple header cells: I vaguely remember this being discussed, and I think we ended up holding off on implementing this. If the need arises again, please open a new issue with a use-case.

Done

• New component: List #578
• New component: Grid #583
• Repeating groups: Components in table #579
• Repeating groups: Footer med kalkulering for kolonner på repeterende grupper #477
• Repeating groups: Kunne sette opp logikk for å skjule en eller flere rader i en repeterende gruppe #389

Currently remaining/related

• List component: remaining issues #925
• Text cells in grid component are not rendered in mobile viewport #1138
• Grid/rowsBefore/rowsAfter: Støtte for å slå sammen celler (colSpan/rowSpan) #1187
• New component: RadioButton (not RadioButtons) #937
• New component: Checkbox (not Checkboxes) #681
• Simplified/improved Likert #936
• Repeating groups: Support for sorting by clicking column header #150
• Repeating groups: Pagination #581
• Table components: Wider-than-container tables + frozen columns #1210
• Grid component: Expressions to hide entire rows/columns/cells #1211
• Components in table/Grid: Should be possible to paste from Excel #1212
• Repeating groups: Copy row as new row #1213