While working on a large list of tabular data that needs an easy sorting/filtering system, I discovered the Isotope library, which seems to do exactly what I want, and provides a lot of nice visuals and functionality. I'd like to be able to sort and filter table rows using Isotope, and I've come up with a basic demo that seems to work. However, a few bugs are present:
I'm using the <thead> section for filters and row headers, so I'm applying the Isotope selector to the <tbody>. However, when Isotope is initialized with the tbody as a container, the table cells in each row lose the width assigned by the table formatting. This isn't a huge deal, as I can set column widths manually if I need to, but it is rather annoying in the current context.
The rows are placed outside the table, in the top left of the table's container element. The relative positioning on the tbody element seems to not affect the rows' absolute position style rules (applied automatically by Isotope) as it would with a normal div. Normally, the absolute positioning would be relative to its container element if the container was positioned using either absolute or relative positioning, but this doesn't seem to be the case here.
The table rows are being filtered properly, and the Isotope library is properly applying animations and styling with those exceptions. If at all possible, I'd like to keep the use of tables, as the people maintaining this page will be doing so through a CMS, and don't know enough about HTML or the WYSIWYG editor the CMS uses to consistently produce any HTML structures beyond a fairly basic table. Does anyone have any advice on fixing these two issues? Thanks!
Edit: As an addendum, I've solved the initial problems I was having. Turns out, the tbody element does not accept a position: relative or position: absolute attribute, so the table rows were not being placed properly. Setting the whole table to position: relative solved the main placement issue, though the rows were then moved to the top left of the table. I solved this issue by offsetting the table row top attribute by the height of the thead element in Javascript, since without Javascript the display is normal.
This works beautifully in Firefox, Chrome, Opera, and Safari. However, IE 7, 8, and 9 all have rendering issues--and worse, they're all different rendering issues. IE9 refuses to place the table cells with the correct offset, IE8 doesn't show the rows at all, and IE7 seems to interpret the whole situation to mean "EXPLODE!". At least the main problem I encountered was solved!
I've integrated Wesley's style suggestions to implement Isortope -- a jQuery plugin using Isotope for table sorting.
It addresses things like the column width issue by automatically converting the table's generated column widths into inline styles. That way, the final table displays like the initial one.
Simple demo here.
Download here.
Related
I am using a JavaScript plugin (pivottable.js) to create pivot tables to display large data on a django site. I want to add a fixed/sticky table head that stays at the top of my div while I scroll down.
Due to the creation of the tables in the JavaScript I cannot easily select the pivot table headers.
Does anyone know of anyway they have accomplished this in the past? A large percentage of my users use IE so it is critical it works on that as well.
floatThead is what you need to look at http://mkoryak.github.io/floatThead/
According to its website:
jquery.floatThead is a floating/locked/sticky/fixed table header plugin that requires no special CSS and supports window and overflow scrolling.
I decided to use a card UI in a project and checked a few Masonry-like libraries, it seems that all of these use position: absolute for arranging elements.
IMO this method is not the right tool for some purposes, for example my cards are expand/collapsible (like Google plus post comments) and although this can be animated in Masonry, it causes complete rearrangement in elements (it doesn't simply push elements down, elements jump from column to column).
I took a look at G+'s markup, they dynamically insert 1, 2 or 3 DIVs as columns depending on screen width (for responsiveness) then fill this columns with elements. In this way elements have their normal position and behavior, so if you need to add, remove or expand/collapse just insert the element into the DOM or change the height and browser does the positioning.
They also take care of overall height, so in the next Ajax loading, it calculates and distributes elements in columns in a way that columns height grow at nearly same total height (just like Masonry)
Do they use any specific library?
Is there any responsive framework/library that work in similar way?
I had the exact same problem and I think Salvattore is exactly what you are looking for.
It automatically creates some columns and puts all your grid elements into the right column.
The styling is then totally up to you, so no need for any position:absolute.
In fact thats all the styling you need:
.size-1of3 {
width: 33.333%;
}
Check it out: http://salvattore.com
I have a table which can have rows and columns added to and removed from it. I'd like to put a textarea to the side of it which will be kept to the same size as the table, so that it looks good.
I have to issues. First is getting it to show up on the right side of the table (provided there is space, if not it should wrap).
I have tried setting style to display: inline-table on the table and it does make the textarea (which is a sibling to the table in the DOM) show up to its right, but it does not line up in IE9, Opera, or Firefox. The textarea sticks up over the table. Works with Webkit. Webkit also has a nice grabber thingy on the bottom right to let me adjust the size.
If I use display: inline-block it now works in Firefox. Still broken in IE9 and Opera.
For dynamic resizing, I could just call a function to resize it every time the table changes.
How do I retrieve the size of a table or other element (in pixel units or other units)?
Fiddle demonstrating issue: http://jsfiddle.net/7jKDm/4/
var height = document.getElementById('tbl').clientHeight;
seems to do the trick. I believe it is in pixels.
As far as getting it to align with the table, you can have to last column of your table hold this textarea and rowspan the whole table, or you can set up column divs, which there are plenty of tutorials for with google search.
Seems like this person also got it to work using .offsetHeight
I went through many posts and couldn't find a solution. (I came across with a similar problem in this post, but I can't really related to my exact situation).
Issue: I have to display a large data table (with more than 30 columns) on a screen. My challenge is - the client doesn't like Horizontal scroll bar of any mean.
I am thinking of splitting a table into pieces and using a simple sliders like Jquery: "serialScroll" or "ContentSlider". However, here is another challenge: for 508 compliance, my table needs to be a single table instead of splitting multiple table in different slides.
I am visioning I need a "view finder" div on top of "large table" with control to shift table the size of div Left and Right, http://img202.imageshack.us/i/tableviewfinderidea.jpg/.
My question is:
Is there a JS or Jquery solution out there doing this? (I seriously searched two weeks without any luck.)
Is there any other recommendation?
using a container div styled with 'overflow:hidden' allows you to do the masking as shown in your graphic. then it's easy to move the masked content by setting it to 'position:absolute' and tweaking the 'left' value.
i put a short example of this online at http://jsfiddle.net/BDZPj/
only thing is, you have to know the height of the content being scrolled, as you have to set a height for the mask too. you could read the height from the table on document.ready though, and apply it to the container initially.
anyway, like 'Pointy' says in the comment above, using a standard scrollbar is surely the best way to do it - sometimes the client has to move, too.
I'm trying to create a file listing a la windows explorer in HTML/Javascript. As such, I'd like the first row of the table, which contains the headings for all the columns, to be visible even when the columns are scrolled.
I've tried a few options involving placing the headings in a separate table, but all have failed for primarily one reason - when the file list is scrolled horizontally, the headings table does not scroll with it.
Hence, I'm essentially looking for an element linked to another in such a way that it scrolls with the other horizontally, but not vertically.
I realize many will think I should be using css and not tables, but this is moot as even using css I can't solve the problem of wanting the header bar to scroll with the files horizontally, but not vertically.
Any help you can offer would be greatly appreciated.
My suggestion is to use Javascript. Hook to the onScroll event of both scrollable elements, and on the event update the scrollLeft property of both elements.
var tableHeader = document.getElementById('tableHeader');
var tableBody = document.getElementById('tableBody');
function updateTableBody(e){
tableBody = tableHeader.scrollLeft;
}
function updateTableHeader(e){
tableHeader = tableBody.scrollLeft;
}
tableHeader.addEventListener('scroll', updateTableBody, false);
tableBody.addEventListener('scroll', updateTableHeader, false);
Of course, this is not bulletproof and could be optimized, but it will give you and idea and hopefully a good start.
NOTE: Make sure both element have the same dimensions, otherwise, the scroll will have a weird offset.
Unfortunately, this isn't available as a CSS-only solution. CSS has some features that theoretically should be capable of being used to scroll a TBODY, but browser support is far too inconsistent.
One solution not mentioned yet is the Ext JS library. It does a LOT more than just scrolled tables, and you'll have to review the licensing to see if it will work for you, but their grid object is the most robust rich-UI-like table replacement I've seen.