I'm displaying a table that consists of all of the events a specific team as attended in a given year. Each row of the table gives some general stats for a single event (seed, placement, etc). When I click on any given row, I want to expand a nested table that shows all the games from that specific event.
I'm having some issues with the formatting. Right now when I expand the new table, it reformats the parent table in a strange way and all of the nested table columns only stretch across the first of the parent table. How can I make it the same width of the parent table?
Here is an example
and here is a screenshot of the more pretty formatted table in case the stackblitz example is hard to see.
Collapsed:
Expanded:
You need to place your nested table in a tr and td with a colspan="4"
See the updated example: https://stackblitz.com/edit/angular-ivy-wnr2qn-nested-table
Full code. Just change ng-container for a tr.
Full code:
https://stackblitz.com/edit/angular-ivy-kutwtd
Example live: Here
IMAGES EXAMPLE
Related
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?
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
The Problem in Hand:
I want to make a form designer where user can drag and drop fields of different type and design the layout too, some what similar to wufoo form builder but here the layout is limited to single column whereas I want to make something where user can make the layout as they want.
I understand how to do in single column view, but could not understand how to achieve multiple column layout eg: row 1 there could be 3 elements, row 2 one element stretched to full length, row 3 there could be just 2 elements etc.
What I tried:
I have tried with jquery UI sortable to make a single column layout with using div where new elements can be dragged and repositioned.
Any suggestion on how to proceed further will be helpful
I have tried searching StackOverFlow and google but could not find any link on a similar topic. If anyone could point me to the same, it will be also helpful.
When you reorder elements on wufoo form builder, you can only drag'n'drop up or down. Remove that restriction and as soon as one element is dragged across a certain threshold, it "belongs" to the next column. If the "old" column was the first or last one and the line that the element was moved over was to the "outside" of the form, add a new column there, until the maximal number of columns is reached.
If the used drags the last element of a column into another column, remove the now empty column on element-drop.
You could also remove the dynamic adding/removing of columns and juist have a button ("remove column" & "add column") to do it by code.
An example for the dropping in another column can be found here: http://jqueryui.com/sortable/#connect-lists
Hope this helped!
Edit:
http://jqueryui.com/sortable/#portlets and http://jqueryui.com/sortable/#empty-lists also have elements that you could look into. Good luck! Sounds like a nice project. Can we see any progress or beta?
I've got a bit of a challenge with an HTML table that we need to have raised columns. If you look at the attached image you'll see what I mean.
The purpose of these raised columns is to draw the user's attention to them.
The problem is:
To get the effect of the column raising above the other columns you
need some kind of element/height/margin to appear outside the
boundary of the table, which doesn't seem to work
Same goes for the bottom
To have the drop shadow appear correctly, it needs to be applied to all the cells in a column.
We did get this to work by splitting it up into multiple tables then applying the styles to the table that should be the raised column. The image I've attached is actually a live table working like this.
But, you loose all other needed features of tables...
Row heights don't match if the text wraps in table 1 but not in
table 2.
To deal with the row height issue we applied a fixed height to each table's rows, but then you have to force text to not wrap. If you then get text that's longer than the width you run into trouble.
Does anyone know how this can be achieved without splitting the tables?
Thanks,
jacques
Try having an extra row for the table above the header row (you may have to stop using any th tags) to give you the overbar at the top. Similarly for the bottom, an extra highlighting row.
Although you have to compromise the table a little to do that, it is better in my book than separating into 2 tables, as that defeats all the purposes of the table tag; to show a table, and have that table easily declared.
The effects inside the table are probably best done with jquery, unless the choice of highlighted columns is entirely static, in which case consider rendering a static html version by generating the html appropriately.
I'm trying to build a screen like this:
How can I split my cell in several rows and a column, without disformat my other table components?
I already started, but when I split my cell, my table disformat.
http://jsfiddle.net/KMjm6/
Take another example, without the use of html table: http://jsfiddle.net/Gh6mB/8/
If could understand your question
DEMO: http://jsfiddle.net/KMjm6/4/
Put a table inside the middle cell and create your affect
Try to use Tableless Layout concepts.
Only div elements without tables.
See this web sites
http://www.w3.org/2002/03/csslayout-howto
http://girlswhogeek.com/tutorials/2006/create-a-tableless-css-layout
Now I understood
See example http://jsfiddle.net/7SGDW/
I need to produce a table similar to:
What we see is the left column containing the data point headers, and each column after contains the actual data.
I'd like to treat each column (other than the first one) as an optional column. The user can add or remove the columns based on funds they select. If they've selected only 1 fund, only the first 2 columns are visible, the rest of the spaces are blank. Each subsequent fund selection adds a new column to the table, up to a max of 5.
I'm wondering what is the best way to implement this? I'm thinking each column is an independent table of a fixed width that I can add to a container which can align them side by side. Will I have difficulty getting the 6 tables to line up side by side?
Is there a better way for me to achieve this result?
You could have invididual tables, or you could assign each column a class which would then allow you to add or remove all elements that have that class using Javascript.
For example:
<table>
<tr><td class="col1"></td><td class="col2"></td><td class="col3"></tr>
<tr><td class="col1"></td><td class="col2"></td><td class="col3"></tr>
</table>
You could then use Javascript to show/hide elements (via CSS) with the relevant class based on actions of the user. Depending on how big your table is, that could work.
Nice use of Comic Sans by the way!