How can I grouping table body in element ui ?
I've tried to find the solution in the element ui docs, but there is just groping for the header table : https://element.eleme.io/#/en-US/component/table#grouping-table-head
What I want is grouping in the table body. So, I can do separate colspan in a 1-line row.
What I need is like the below image (red box)
I have not idea what to do.
Related
Basically I'd like to from this :
What I have
To this :
What I Want
Case in Orange are data that I pick up with an sql request while "This e-learning phase..." is just a plain text.
Does anybody knows how to do that ?
You could add a Parent Row Group and Group by the Information field.
Unfortunately, this would place the Information on the Left side of the table. Fortunately, there is a Layout Direction property for the table that can be switched from LTR to RTL so that the table is created from Right to Left instead of the default Left to Right.
This way the grouped information field on the right would only have one cell while there may be multiple Activities.
I'm not sure you'll be able to do this exactly how you want. This is because you cannot add rowgroup columns after non-grouped columns.
The only way you could get close is to not show the text if it's not the first row in the dataset (or rowgroup if the report is grouped somewhere)
You could use something like this in the Value expression.
=IIF(
ROWNUMBER("myDataSet_Namehere") =1,
"This e-learning phase must be completed before the start of the classroom part indicated below.",
Nothing
)
You could use a similar check to then set the vertical alignment property.
It looks like this...
The other option would be to move the test to the top of the table on it's own row in above the column headers, it would probably look neater..
Or you can wait for somebody else to come up with a better solution :)
I found that DataTables now supports colspan and rowspan. but to use it better, I needed to duplicate same data thrice. What I need to make is something as image below, and I can't find whether DataTables supports splitting a row into multiple rows.
The image shows how I modify each set of data. It means, there will be 5 columns for each data, and it will be split into 3 lines.
Even the question was about duplicating, if there's other way to make a row/set of row for each data with same shape as image, than please explain.
Ok, I found very wierd trick.
I just made display:none to original table, and only showed child row table.
Not like original table, child row was free to custom the format.
The answer of other question on the link was useful.
https://stackoverflow.com/a/72745607/10780764
I'm responsible for remediating a PDF that has been generated by a third-party, proprietary system for which I have no access to the layout or design. The goal is to pass the adobe acrobat DC accessibility checker before publication.
Some of the tables in the PDF span multiple pages horizontally (i.e. with a page break at column 4 of 7). Thus far, I have designated each piece of text content as a "Cell" and grouped those into a "Table Row" tag and defined each header and sub-header as a "Table Header Cell".
However, Acrobat DC seems to get confused as to the relative size and spacing of each table element. It is creating phantom column headers and rearranging or combining rows in order to fit the appearance of a more standard layout PER PAGE. But since I need one cohesive table to span TWO PAGES, this is breaking my accessibility.
Depending on how I nest my table elements, I get a table layout like one of the two examples below:
Example when including blank cells for multi-column header rows
Example when defining the column span of multi-colum header rows as "7"
As you can see, the layout is not uniform and does not pass regularity checks. Plus, as I add more rows with several blank cells, the table editor produces an error that reads:
"Unknown Table Structure Encountered"
The only way I have managed to remove this error, is to exclude the bolded main-section sub-headers from the tag structure entirely, but I cannot just leave them as untagged content and pass the checker.
Please help.
Signed up just to comment to
Kevin, thanks for replying. Because of the malformed grid, I cannot even click on the cells on Page 2 in order to associate headers. Is there a way to define table structure without using the Table Editor mode? – Glamador Apr 3 at 12:27
but don't have the rep yet to do so:
Glamador - Knowing it can't help you half a year ago but might in the future: I encountered this in a document this week and figured out the "Why" and how to get the Table Editor back, but not the "Easiest/best way to solve" the tagging in Acrobat. This issue is denying you Table Editor is with the table header (TH) cell you created that spans multiple pages.
So if you set a table header cell to something like Row Span: 7, and 3 of those are on the second page Acrobat will give you the "Unknown table structure encountered. Please retag this table using the Reading Order Tool to possibly fix the problem." error any time you try to use the Table Editor on the table that has that [table header cell with a multi-page row span/I'm not working with but assume column span too].
To get your Table Editor use back (not solving the tagging of accessibility, but to quit getting that error on your table,):
Go to your tags
Create a new empty Table Header Cell
Drag the content displayed in the tag from the problem TH to your new TH
Delete the [multiple page row/column spanning, but now empty] problem TH
Repeat if you did this in multiple TH in the same table
You can now use Table Editor again
Note: Because you can't use the Table Editor once these problem headers have been created you can't use it to see which TH's you have set to span multiple pages, or see those row/column spans, so you're going to have to just look at your document if you went through tagging and are going back and checking later and figure out which are the likely problem headers to replace. If you create that header span again in the table that goes across multiple pages you'll be unable to use the Table Editor again until you delete that tag with the page spanning issue.
I haven't found if you can combine TH Row Span settings with IDs/Associated Header Cell IDs and have the user software identify both, so I've been doing the tedious ID association on large but simple tables as my "It's tagged correctly" option, but unfortunately it isn't nearly as fast and easy as Row Spans.
You can edit the tag's object properties by right-clicking on the tag and then you can add an ID there if it doesn't already have one. Be sure each data cell is associated with a header cell. PAC's screen reader preview will also give a good view of the layout to help you get everything associated correctly.
I am using webdriver to test our application that contain table where the user can change the order of columns in a table,and also can remove/add columns (This is beside new column added by developers).
What is the right way to find the column I need?
One way is to go over the table header to find the column I am looking for so I have the column index and than I can access the right cell.
Is there other way ?
What about put unique id/class name for every element in table ?
Thanks
You can do two things for this situation:
Get handle to table element, and then navigate accordingly to get the columns or rows. Once you have this, then you can do all operations on them like click() etc.
Other way is, see the pattern of their ids/css because, most of the table that I have deal with will be having ids like this:
grid_name_1
grid_name_2
grid_name_3
Then you can have do this way:
String baseLocator = "grid_name_" + clickedRowIndex;
driver.findElement(By.id(baseLocator)).click(); //for click operation
Lets say user wants to click on the 3rd row, then clickedRowIndex will be 3 which selects the 3rd table row.
I am using datatable (v1.10.2 with jquery 1.9.2) because I like the out-of-the-box features (searching/sorting etc). However, now I want the ability to:
1) use animations (sliding) when showing/hiding a row
2) have the hidden row available in the DOM to change (ie, it would exist but have a display:none).
My current code to create the table looks like the following (where formatChild() returns html for a table):
if (row.child.isShown()){
row.child.hide();
tr.removeClass('shown');
} else {
row = row.child(formatChild());
row.show();
tr.addClass('shown');
}
I am using several services to change data in the child row's table via ajax and want to be able to change that data even when the row is hidden. I know I can create a map in memory and use the information in the stored map when I show the child row, but to me it is much cleaner to change the hidden row immediately.
I was hoping I could do a row()child(), modify the row, then call row()child().show() but the row isn't created in the DOM after the row.child().
Regarding the animation, I found an answer here but it involves changing the datatables code :(
I considered just using jquery to add a row to the datatable and hide it, but I couldn't find a good way to "attach" it to the primary row for sorting.
The plan I am currently leaning towards is to add a div to my primary table row that I will show/hide/update rather than using child rows at all.
What is the best practice for managing these hidden areas in a datatable (and showing them with animation)? ty
In case anyone else has the same question, I ended up using a DIV in the row rather than using DataTables' child row. When I add a new row to the datatable, the div is hidden then I hide and show (slideup/slidedown) on a click event. This gives me the nice animations, keeps the sorting simple, and let's me change information in the hidden row. Interestingly, the DIV contains a table and the text that is in that table when I create the new row is searchable; however, the text in the table that my ajax call adds/modifies is not searchable. I'm looking into how I want that to work (and may keep the div out of the search altogether if possible).