GWT wrap a html table and add cels - html

I'm using gwt in my web app and I have a html panel which contains a <table>. I've chosen to do this instead of flextable due to some annoying issues when styling it as being unable to do <tbody valign="top">.
I wanted to know if it's possible to wrap a html table
<table>
<thead>
<tr>
<th>Name</th>
<th>Path</th>
<th>Type</th>
</tr>
</thead>
</table>
In a class like Flextable so I can easily control rows and columns through Java?
Something like
Label.wrap("id");
but for tables.

You can also format your data in FlexTable.
You can use flexTable.getRowFormatter(), flexTable.getColumnFormatter() or flexTable.getColumnFormatter().
You can apply alignment, style to rows, columns and cells using above FlexTable attributes.
Please provide a standalone test case if you are facing any problems with FlexTable.

Related

jQuery DataTables - Multiple Rows in Table Header

I have a table with multiple rows in the thead and DataTables doesn't like it.
Here is my code:
<TABLE ID="TBL">
<THEAD>
<TR>
<TH>COL1</TH>
<TH>COL2</TH>
<TH>COL3</TH>
<TH>COL4</TH>
<TH>COL5</TH>
<TH>COL6</TH>
</TR>
<TR>
<TH>DAT1</TH>
<TH>DAT2</TH>
<TH>DAT3</TH>
<TH>DAT4</TH>
<TH>DAT5</TH>
<TH>DAT6</TH>
</TR>
<TR>
<TH>COLA</TH>
<TH>COLB</TH>
<TH>COLC</TH>
<TH COLSPAN="2">COLD</TH>
<TH>COLF</TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TD>TD1</TD>
<TD>TD2</TD>
<TD>TD3</TD>
<TD COLSPAN="2">TD4</TD>
<TD>TD6</TD>
</TR>
</TBODY>
</TABLE>
<SCRIPT>
$("#TBL").DataTable();
</SCRIPT>
I can tell dataTables does get initialized on the table but my paging, sorting, and searching controls are missing.
Is there a way to configure dataTables to work here?
I was able to get it to work somewhat by doing this:
$("#TBL").DataTable({
columns:[
{data:"COLA"},
{data:"COLB"},
{data:"COLC"},
{data:"COLD"}
{data:"COLF"}
]
)
Adding data parameters to the columns made the table work, I can search, sort, and page results. However, once it gets to 'COLD' it jumps to the upper row and wants to sort 'DAT5' and 'DAT6', so I have to set them to 'orderable:false'.
I also noticed that, while having these data declarations causes the table to work, for the most part, I seem to be unable to change the width of the columns and I'm not sure the proper syntax for doing so.
My assumption was to do something like this, where I have the 'data' declarations:
columns:[
{data:"COLA", width:"150px"},
{data:"COLB"},
{data:"COLC"},
{data:"COLD"},
{data:"COLF"}
]
But the width setting seems to have no effect. I don't know if I'm doing something wrong or if my settings aren't taking effect, simply because I have multiple rows in the THEAD and it's throwing everything off.
I also have a columnDefs section:
columnDefs:[
{
targets:[3,4],
orderable:false
}
]
This corrects the 'DAT5' and 'DAT6' from being sortable. I think I can set column widths in here as well but I'm unsure of the syntax or how to setup multiple targets/settings side by side within columnDefs.
Anyone have any advice on how to properly set this up?
Thanks
DataTables does not support <colspan> in the body of a table:
<TD COLSPAN="2">TD4</TD>
From the installation documentation:
Please also note that while DataTables supports colspan and rowspan in the table's header and footer, they are not supported in the table's tbody and must not be present.
You will need to find a different way to structure your table to avoid this restriction.

Markdown table rowspan without loss of formatting

As described in this and this answers, we can use HTML tags in Markdown to create tables with cells spanning multiple rows or columns. Suppose I want to make the following table (rendered by Visual Studio Code with extension "Markdown All in One"):
Desired Effect
But the problem for the second answer is that the rowspan/colspan of the first column/row will be rendered with a additional column/row in the front, as in the following example (does not work on StackOverflow, but works in VSCode; a work-around is to add an empty column/row, as suggested by the first comment in that answer, but this is still not perfect):
||Letter|Typesetting|Result|
|-|-|-|-|
|<td rowspan=4>a |Normal|a
||Italic|*a*|
||Bold|**a**|
||Math|$a$
Result:
Table constructed using method in Answer 2
Then we can use the HTML tags, as described by the first answer:
<table>
<thead>
<tr> <th>Letter <th>Typesetting <th>Result
</thead>
<tbody>
<tr> <td rowspan=4>a <td>Normal <td>a
<tr> <td>Italic <td>*a*
<tr> <td>Bold <td>**a**
<tr> <td>Math <td>$a$
</tbody>
</table>
But then Markdown formatting will be lost:
Table constructed using method in Answer 1
Is there any way to overcome this problem, i.e. using HTML tags to achieve rowspan/colspan without loss of Markdown text formatting?

Use a clone of `thead` as `tfoot` so that they are equal

I'm currently developing an website that provides an overview of components and their version in different locations.
Therefore, the page contains a single <select> and a single <table>. Now I've come to wonder - is there anything that allows me to use my <thead> as the <tfoot as well?
I.e. something like this:
<table>
<thead>
<!-- content -->
</thead>
<tfoot equal-to-head="true"></tfoot>
</table>
or
<table>
<theadfoot>
<!-- this would be equal to using thead and tfoot with the same content -->
</theadfoot>
</table>
Now I'm developing my "website" with Vue.js, so I could potentially write a component that does what I want. However, since I want to reduce code redundancy and not write even more code, that's not really the way to go.
Hence my question - does anybody know of an existing plugin (or even better, a built-in HTML functionality, although I doubt there is one) that one allows to combine <thead> and <tfoot>?

code reusability in HTML

I have three tables which are using using different variables for displaying the data.
Basic structure of the table
<table>
<thead>
<tr>
<th ng-repeat="var in array2"><i ng-show="array3[$index]=0"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="var in variable">
<td ng-repeat="var1 in var">{{var1.position}}</td>
</tr>
</tbody>
</table>
All the three tables are using different arrays for variable, array2 and array3. Is there any way I don't have to write the code thrice and I can loop the code for three tables.
Please suggest changes in data structures only when there are no other possible HTML solution to change it.
You need to check for directives, for instance <my-table-directive datas="array1"></my-table-directive>
This directive will hold the logic and templaces and you'll pass a variable to define the content.

How to create HTML table like structure in flex

The html table coding structure looks something like the code shown below
<table>
<tr>
<td>Text</td>
<td>input text field</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>submit butto</td>
</tr>
</table>
How to create such table structure in flex which has above given row and column format in flex application with the option of colspann and rowspan alternate too?
There are a lot of ways. I would probably start by looking into the Form layout container. That is great for a two column layout, although it gives you little control over the first column which is primarily used for
You could also, in theory, create something like this by using embedded containers, but I do not think I would recommend that approach because I suspect you'll end up with a lot of unnecessary containers.
You could also write your own layout class. More info on layouts here. This is the most powerful/flexible approach, but probably also the most time consuming.