[Feature Request]: Add Expandable Row feature to Table

[eiva]

Description

Please add a way to define expandable rows in Table component.

Right now table operate on cell basis and it is possible to add expandable content into cell. but that make really bad visual experience when all content squeezed into one cell and rest of space just white.

So please add a way to expand rows (nest).

See https://codesandbox.io/s/react-expandable-table-rows-uzzqz?file=/src/mytable.js for what I'm saying.

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate requests

[just-boris]

Please provide more specific use-case.

Currently it is hard to tell, maybe your problem is already solved in our components, but different way, without expandable rows

[eiva]

Usecase is following: We have table with list of highlevel representations of some activities, for some of that activities we have a lot of additional information which we want to show to customer if he want to take a look.

So we want to provide they a way expand row so they will see additional details.

And if they want - they can expand multiple rows at once to quickly scroll through.

The representation of this additional information is completely different from table itself and take more space than "one cell".

Regular display:

|======Name======|===Column1====|====Column2====|
| + Event 1                    | ....                         | ....                           |
|   Event 2                    | ....                         | ....                           |
| + Event 3                    | ....                         | ....                           |

See - event 1 and 3 have details event 2 does not.

Expanded display:

|======Name======|===Column1====|====Column2====|
| ^ Name of event 1     | ....                         | ....                           |
+-----------------------------------------------------------+
| A bit of detailed information on event 1
| ..........
+------------------------------------------------------------+
|   Name of event 2     | ....                         | ....                           |
| ^ Name of event 3     | ....                         | ....                           |
+-----------------------------------------------------------+
| A bit of detailed information on event 3
| .............
+------------------------------------------------------------+

[just-boris]

For table details we have a different recommended treatment, have a look how this page works: https://cloudscape.design/examples/react/split-panel-multiple.html

When doing implementation of this, we evaluated exactly what you are proposing but the split panel performed better in testing.

Since we are a system of "single problem - single solution", our recommendation is now to use split panel for all such cases

[eiva]

I see. Split panel is obvious way of displaying details, but it have one pretty significant disadvantage: it brake connection between what customer did with table and what is displayed.

When customer clicked checkbox on one row, scrolled to another - and clicked again - what should we display? How we should allow customer to "unclick" previous one if he want, ho we will let him know that what we displaying related to some row few pages earlier.

There a lot of questions on this...

[NicoPowers]

Hi @eiva, I believe if you change selection type to single instead of multi, like this: selectionType="single", on the Table props, that should solve problem of user being able to select multiple rows; therefore the user should only see details on currently selected row.

[just-boris]

Closing this one. We currently have no plans for inline expandable details. Using split panel https://github.com/cloudscape-design/components/issues/1720#issuecomment-1802424157 is still the recommendation