I have a table which displays the data from a database. The <tr> and <td> are dynamically created using a for loop.
I want the data alone in that table to scroll with the <th> always visible so that user can see the headers while scrolling through the data.
are you using thead? i think this should work
.tbody{overflow:scroll; height:500px}
<thead>
<tr><th>head1</th>....</tr>
</thead>
<tbody>
<!-- create <tr><td>h1r1</td></td> -->
</tbody>
Related
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.
Currently I have a dynamic table that is printed on multiple pages, and have a repeated header using Flying Saucer pagination.
The problem I am facing is if the table is too low at the bottom of the page, it just prints the table header and does not have any rows under it.
I am wondering how I can hide the header if there are no rows on the same page. The entire page is dynamic, so I cannot hardcode the table to go to the next page as I do not know how low the table will be.
table {
width: 100%;
-fs-table-paginate: paginate;
border-spacing: 0;
}
<!-- lots of dynamic data, spans across multiple pages -->
<table>
<thead>
<th>
myheader
</th>
</thead>
<tbody>
<tr>
<td>
~lots of data, rows epeated multiple times dynamically
</td>
</tr>
</tbody>
</table>
I want to achieve the below result without using jquery:
The table for which data should be scrollable for both axis.
The first column (table header) and first row of the table should be a fixed and with auto adjustable width for the column as per the data entered, similar to google spreadsheet
Above image shows what I have tried, the element containing the table has overflow-x: auto for the horizontal scroll and the element has style="display:block;height:400px;overflow-y:auto" for the vertical scroll for fixed table header. Also some elements contain mat-elements
Following is the html code for above image:
<div style="overflow-x:auto">
<table>
<thead>
<tr>
<th>#</th>
<th>Textbox_1</th>
<th>Textbox_1</th>
<th>Multichoice</th>
</tr>
</thead>
<tbody style="display:block;height:400px;overflow-y:auto">
<tr>
<td>1</td>
<td><div>John</div></td>
<td><div>Ron</div></td>
<td><div><mat-select><mat-option>One</mat-option>
<mat-option>Two</mat-option>
</mat-select>
</div>
</td>
</tr>
</tbody>
</table>
</div>
Expected Result:
Any help is greatly appreciated.
I think it is not possible with CSS only. You might need support of JavaScript/JQuery. Check out this light weight plugin. It will help you for sure.
https://github.com/nitsugario/jQuery-Freeze-Table-Column-and-Rows
In my current project, I have a table with a variable amount of columns and rows, due to being generated in an *ngFor directive and the data comes from the backend. Because of this and the fact that there might be a lot of text in a cell, there is an overflow and not all columns can be displayed.
I initially solved it by wrapping the overflow to a new line, but because it can be a lot of text, some rows can be too large.
My idea is to show some sort of preview where the overflow is hidden (similar to overflow: ellipsis but where the row can be expanded to show all the information. This way, the rows will have a reasonable size, but all the information can be displayed. The data is stored in an object where the column names are string[] and the data is string[][].
<div class="table-responsive">
<table class="table table-bordered table-striped table-hover table-condensed">
<thead>
<tr>
<th *ngFor="let name of data.columnNames">{{name}}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of data.data">
<td *ngFor="let item of row">
{{item}}
</td>
</tr>
</tbody>
</table>
How would you guys do this?
You could leave the table with overflowing ellipsis and on click on the row you could open a modal that shows all data to improve the UX in all screen resolutions.
I am having some trouble organizing my Modal.
Right now it all displays in one big column such as
I would like the game info to be put into a column, such as
I need this spread out horizontally as having them stacked on top of each other looks messy since it runs off the screen.
I have tried wrapping them in additional tr and th tags, but I get an error saying Element th cannot be nested inside element table.
Here is a JSFiddle that tries to mock the setup. (this does not include the additional wrapper tr and th tags that I get errors about)
user info includes name to bio, and game info includes twitch.tv to the required notice.
Thank you for all the help!
EDIT
My attempt in a nutshell
<table>
<tr>
<th>
user info
</th>
<th>
game info
</th>
</tr>
</table>
All four th tags either say they are missing start/end tags, or that it cannot be nested within a table.
Had to add additional tables around my data in order for the compiler to like it.
<table>
<tr>
<th>
<table id="userinfo">
user info
</table>
</th>
<th>
<table id="gameinfo">
game info
</table>
</th>
</tr>
</table>