Dynamic ng-table with fixed header - javascript

I'm trying to get this ng-table to play nice: http://jsfiddle.net/orarbel/ADukg/8102/
This is how I get the header to be fixed:
thead, tbody {
display: block;
}
The problem is the header width and and body width are not the same, the scrolling get broken, and I can't get the CSS right.
I'm basically trying to figure out how to style this table so that the header is fixed and if there is a horizontal overflow the header and body would still be aligned.
Suggestions?

Related

sticky thead when table is fit-content

I have a page which consists of some header information on the top and a table below it. The header is expanded onLoad and the table is set to a max-height of 500px. This table will then be scrollable by default and its thead is sticky.
However, there's an option to collapse this header div, which then sets the table's max-height to fit-content. Now, the whole page is scrollable instead of just the table. Problem is, the thead is no longer sticky.
$("#table").css({ "max-height": "500px" });
https://jsfiddle.net/3k2vnqyh/ is an simple example. Notice the thead is sticky when you scroll, then click the button which hides the div and gets rid of the table's scroll and makes the page scrollable instead, but also gets rid of the sticky thead. I'm just trying to unconditionally have the thead remain sticky. I'm using Chrome btw.
This seems to be a popular topic. I've tried solving it with css by using a variation of making the thead and "tds of the thead" have sticky positions and other attributes. But no dice. I'm using Bootstrap too.
Any ideas

HTML Table overflow-y scrolling with fixed y axis headings

I have a table with headers for both the x and y axes, and want the table to scroll when it overflows on the y axis while retaining the header.
Using display: block; overflow-y: auto; in the <table> element gives me some scrolling, but I lose the y axis labels.
Here's a simple pen work-in-progress: https://codepen.io/Malgalin/pen/wNZRPz?editors=0100
I have also tried versions of making the th[scope='row'] elements have a fixed position, which sort of works, but it creates messy over-lapping headers and makes the initial blank top left corner cell disappear.
I'm happy to see answers using JS or jQuery if necessary.
You can use the sticky position for your headers. You need to change your HTML a little bit, you need a wrapper for the table.
<div id='table_wrapper'>
<table> .... </table>
</div>
Now you can set the TH elements to position: sticky and, for the thead, make it stick at top: 0px, for the tbody use left: 0px.
Using just that won't work on your actual code since you have some errors though. So, first close the thead tag and open a tbody tag properly (now you open the thead and close a tbody). The second thing you need to fix is to remove those display: block on the table elements, when you do that you break the table.
Check this edited codepen link https://codepen.io/anon/pen/daLrGZ?editors=1100
Note that you'll need to add some background to the th's.
EDIT: if you want the top left TH to stay over the rest THs add this:
table thead tr th:first-child {
left: 0px; //so it also sticks to the left
z-index: 2; //so it's over the rest
}
Maybe what you are looking is already solved, have a look and let me know:
https://stackoverflow.com/a/50649696/5796090
In the link above you can find a scrollable table with a fixed header using CSS Grid.
Basically you define 2 areas in your grid for thead and tbody and set an overflow for the second one.
table {
display: inline-grid;
grid-template-areas:
"head-fixed"
"body-scrollable";
}
thead {
grid-area: head-fixed;
}
tbody {
grid-area: body-scrollable;
overflow: auto;
height: 400px; /* define height depending on your needs */
}
Hope this help :)

How do I hide the header row in DataTables?

I want to hide the header row from appearing, being visible on the table. (Both when viewed from desktop and mobile)
I tried:
"drawCallback":function(settings ){$("#mySelection thead").remove();} ,
While this code seems to render the table the way I want (header-less), it also effects the output of the buttons used here. The buttons are set to output whatever is visible (toggled by column visibility).
And unfortunately this code removes not just the theader in the export output, but also all the data that was in the tables.
The same thing happens when I try:
$("#mySelection thead").hide()
Is there anyway to keep the output as it was before and only hide the table headers from view, as in just the row with the column titles? I want to keep the buttons (copy, excel, pdf, colvis) working on the table data.
https://jsfiddle.net/287fum2q/
EDIT:
Using the following code in the CSS results in the problem I mentioned in the first part of my question:
.ui.table thead { display: none !important; }
As does this:
thead { display: none!important; }
If you could include a saved jsfiddle that shows the solution, that'd be all the more helpful.
It appears the DataTables Jquery plugin may possibly have a bug. DataTables assumes the header display will not be set to none. When you set the header display:none it prevents the DataTables buttons from working as expected.
Here's your workaround:
.ui.table thead {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
This removes the header from sight, but the DataTables buttons still have what they need to work correctly. I just learned this can be good practice (surprisingly) because display:none makes content "inaccessible" to screen readers.
thead css was conflict with semanticui.min.css so used !important to overwrite css
.ui.table thead {
display: none !important;
}

Horizontal scrollbar does not show when content in the table cell overflows

I am working with dgrid tables. I have a table with single column, and each column cell have some contents within it. When my cell content is really big, i would like to show a scrollbar, so the user can scroll and view the rest of the content. However in my table, the scrollbar does not show in this case, but if i use the dgrid columnResizer to expand the column, then the scrollbar shows up till the expanding width. If the width is less than the content, then the rest of the content will still remain invisible. Here is the jsFiddle.
http://jsfiddle.net/vrwe7dn5/
This is my CSS-
#grid{
width: 20%;
height: auto;
}
.dgrid-scroller{
overflow:auto;
position: relative;
}
.dgrid-content{
white-space: nowrap;
}
Please let me know if i am doing anything wrong.
The class you are using, .dgrid-scroller{} is only for the column. To make the content scrollable, you would have to apply overflow-x:scroll on the td's themselves.

Fixed column table like structure

I want to create a table like structure without using table,tr,td etc tags. The table should have its first column and headers fixed. I have fiddled it under this URL: http://jsfiddle.net/RtfZu/.
I am not able to create a vertical scroll-bar, which upon scrolling should scroll the frozen column too.
Any insights?
You need to make your .table-body-scroll div scrollable. In the fiddle it breaks due to the a width issue causing a double scroll bar, but you should be able to fix that by adjusting the width and setting the overflow-x to hidden
.table-body-scroll
{
overflow-y:scroll;
}
http://jsfiddle.net/RtfZu/3/
Try adding overflow-y: auto; and define a height to your .table element. This should scroll the entire table
By the way, i have created a jQuery plugin that would render table using tags. The table is configurable too. code4devs.com is the URL

Categories

Resources