Expandable area under a Table Row (Semantic UI React)

Question

I'm trying to create Table Rows in a Table that can expand by clicking on them (individually).

For example, if I would click on the specified area in the picture below, a Segment/Container (some sort of area) would drop down with content inside.

I've tried a solution that is mentioned in this thread, but the underlying problem is that every element under a Table Row/Cell is subject to the rules and boundaries of the Table HeaderCell. So if I for example try to create a Table Row with a Segment under it, the result will look like this:

As you can see the Segment is inside the new Row but is limited to the size of the HeaderCell.

When doing this I also get this error:

validateDOMNesting(...): <div> cannot appear as a child of <tr>.
    in div (created by Segment)

It seems that Segment under Table Row is therefore a prohibited element structure.

Any idea on how the element structure should look to create some kind of area under a Table Row?

Answer 1

The the warning of a <div> not being allowed as a child of a table row is telling you that it is not valid HTML. That is true whether you are using Semantic UI React or plain HTML.

I'd recommend rendering another row below the row you have in your table already. Set a column inside of that row which spans all of the columns. Now you have a container which you can put other UI inside if you want to. You can customize the style of the wide cell if you need to for some reason.

Then you can set a toggle state on the clickable area of your table. You'll probably want to put the click events on the contents of the cells and not the cells themselves.

I threw together a quick Codepen showing how this would work. This gives you a working concept that you can modify based on your use case.

https://codesandbox.io/s/serene-water-ikco9?file=/example.js