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.
Related
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
How do I prevent primeng turbo table cell data from overlapping other cells,
I tried to add - [style]=" {'overflow':'hidden' }" to : <tr> , <td> and <div>, and none of these elements solved the overlapping..
anyone have an idea how to solve that?
Add class="ui-resizable-column" to each column and row. It prevents the data from other cells from overlapping into it (not it from overlapping into other rows), which is why in the example below, even the checkbox has it.
Example:
This will make the column headers not overlap:
<th *ngFor="let col of columns" class="ui-resizable-column">
</th>
<th style="width: 2.25em" class="ui-resizable-column">
<p-tableHeaderCheckbox></p-tableHeaderCheckbox>
</th>
Then you do the same for rows:
<td *ngFor="let col of columns" class="ui-resizable-column">
</td>
<td class="ui-resizable-column">
<p-tableCheckbox [value]="selectedrow"></p-tableCheckbox>
</td>
I'm trying to make a table which is displayed properly on mobile devices.
To achieve this, I'm thinking about arranging the headers vertically like:
Header1 Information1
Header2 Information2
Header3 Information3
Header1 Information1
...
So, as you can see, I have to use ng-repeat so that everything from my data gets displayed.
This is my code for the table so far:
table class="table table-hover table-striped" class="ergTable" id="mobileTable">
<div class="mobileErgDiv" ng-repeat="data in responseData | limitTo:limit">
<tr>
<th>Title</th>
<td>{{data.title}}</td>
</tr>
<tr>
<th>Komponist</th>
<td>{{data.komponist}}</td>
</tr>
<tr>
<th>Instruments</th>
<td>{{data.instruments}}</td>
</tr>
</div>
</table>
The problem is, that no data gets display as a result of a non-working ng-repeat. I guess it's not possilbe to repeat a div in a table? That's because I have also tried to change the div to a tr, with the same result.
I would appreciate every possible solution.
Greetings,
Force0234
0I am working on an asp.net mvc web application, and I am using a responsive web template which is based on bootstrap. Currently the layout is responsive, where the page will adapt to the screen size to a certain limit, for example if I have a table with only four columns and the user access it using a small screen then the text can still be readable. but for some views there have tables with more than 8 columns , the text inside these tables became un-readable when beginning accessed from small size screens. As follow:-
On way I am thinking to fix this issue, is to manually define hidden-xs hidden-sm classes for the columns that are less important to the users and only display the columns that are most important , when the user access the system from small or extra small screens.
I am afraid that by approach might work, but it is very handy? Can anyone advice on this please?
Thanks
my view code looks as follow:-
<table class="table table-striped table-bordered bootstrap-datatable datatable">
<thead>
<tr>
<th>
#Html.DisplayNameFor(model=>model.SingleOrDefault().UserName)
</th>
<th>
#Html.DisplayNameFor(model=>model.SingleOrDefault().AuditAction.Name)
</th>
<th>
#Html.DisplayNameFor(model=>model.SingleOrDefault().TechnologyType.Name)
</th>
<th>
#Html.DisplayNameFor(model=>model.SingleOrDefault().Technology.Tag)
</th>
<th>
#Html.DisplayNameFor(model=>model.SingleOrDefault().DateTimeStart)
</th>
<th>
#Html.DisplayNameFor(model=>model.SingleOrDefault().DateTimeEnd)
</th>
<th>
#Html.DisplayNameFor(model=>model.SingleOrDefault().ExtraInfo)
</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model) {
<tr>
<td>
<span class="yellow b"> #item.UserName</span>
</td>
<td>
#(item.AuditAction == null ? "None" : item.AuditAction.Name)
</td>
<td>
#(item.TechnologyType == null ? "None" : item.TechnologyType.Name)
</td>
//code goes here
Before your <table> wrap it with the bootstrap class <div class="table-responsive">. This class will make it scroll-able horizontally, what I did was to then add a comment to the user to inform them that they can "swipe" the table left and right (just on mobile). This together with hiding what you don't want to show as you mentioned is the only decent option for tables.
Hope that helps
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>