I'm writing a Javascript based table widget that I hope to be capable of handling basically a limitless amount of data. To do this, the table will make Ajax requests for data only as it is needed (when scrolled into view). I have the basic idea working, but one issue I'm struggling with is the resizing of table columns.
Since only a section of all the rows is actually rendered at any time, the table tends to reflow as the max width of the columns changes.
I thought about iterating the table cells each time the table is rendered, and remembering the "max width" of each column. There would still be some reflowing, but once you've seen the widest td, it should stop. The issue is that this seems to be a kind of clunky solution, and I find myself writing more code than I'd like to handle it.
Has anyone run into this before, or have any simpler ideas on how to handle it?
For consistency, I would lock the column width to what it is on the first view of the table. That way, there's no shifting at all.
You should also give the developer a way to specify a static column width for the columns so that they can size them appropriate to their data once they know the widths.
Related
I have a table with thousands upon thousands of rows with 4 cells in each.
https://streamable.com/pywk9
You can see above my table is very big (no idea if its showing very well the laggy scrolling).
I understand this is because the browser has to actually render everything and with large datasets it could take time.
Is there a way WITHOUT pagination to make it more bearable?
Perhaps some way to render content ONLY shown in browsers view like a certain angularJS component (without needing angularjs)
A table that size is useful to nobody, you say you don't want to paginate but why? Pagination is a usability feature for a reason. Just implement pagination and searching. A grid with more than a few thousand rows is not going to be useful to anyone.
If you really need to have the table that big and scrollable then the technique used is to remove the item that are not in view out of the DOM. As you scroll you create DOM objects for the items as they come into view and remove them as they move out of view. This way there are not thousands of DOM objects the browser has to deal with.
I have a big HTML table (~10K rows, 4 columns, text only) dumped from a database. I'm experiencing poor performance when opening it in Chrome/Firefox.
I do not have direct access to database, so it is impossible to load page by page. All data is static HTML.
Does pagination with some jQuery plugin help improve performance in this case? Any other suggestions?
When applicable, setting table-layout: fixed helps in reducing rendering time a lot. The slowness is mostly caused by the fact that in the default table layout method, the browser has to parse and process the entire table, calculating width requirements for all cells, before it can render any part of the table.
Fixed layout tells the browser to set column widths according to the first row (paying attention to any CSS that may apply to it). This may, of course, result in a mess, if the widths are not suitable for other rows. For a data table where rows are generally very similar, the widths can probably be set suitably.
This does not change the issue that very few people, if any, are going to read all the 10,000 rows. People will probably be looking for some specific data there. It might be better to set up a search form that lets the user get just what he wants.
I had a similar problem and made a jQuery plugin:
https://github.com/lperrin/infinitable
To use it, you can load all your data with Ajax call, turn it into a huge array, and pass it to the plugin.
It basically hides cells that are not visibles, while making it easy to sort or filter cells. There are other solutions to achieve that, but this one has no dependencies besides jQuery.
The project contains a demo with a table containing 100,000 elements.
Pagination would most certainly solve this problem. You could also try initially setting the table style to display: none. Although the pagination should likely take effect before the browser attempts to render the table.
You could also store the table in a separate html file, do an ajax call to the document, and implement live scrolling. Although, this depends on how you expect the user to explore the data. If jumping to a particular rage like 100-199 is useful, a paginated table would be ideal.
I need to represent huge data(37 columns,1000+ rows) in web. I would like to fix header row of this table and then manipulate data accordingly.
There are lots of possible solutions in web, some of them depends on css and some depends on javascript.
I have tried lots of them, and each time I ve stucked at the same point where table header cells and table row cells are not aligned.
First way i have tried : https://s12-chicago.accountservergroup.com/~gomathik/demos/scroll.html
Second way i have tired : http://www.imaputz.com/cssStuff/bigFourVersion.html#
They both, fixed the header of course. But i still have the alignment problem.
Do you have any suggestions?
I m begginer to html and css, any help would be appreciated.
Thank you in advance!
i have some experience in this and i can give you some thoughts/ pointers:
easiest way to do this is to set table style to fixed, then you can change column widths with css and they will stay that wide regardless of content inside.
after your column widths is pre-defined, you can clone the thead into another table above your table and it will act like a fixed header
otherwise you will need to:
set the height of the header to 0px
clone the header into a table above the table
set the width of the new header's table to the width of original table
set the outerwidth of each cell in the new table to the outer width of the same header cell in the original table
also, none of the solutions for doing this seem to be good. i found that writing a custom solution is always better then trying to arm wrestle an existing generic plugin into doing what i need.
I worked on a project where the goal was to visualize large data sets (10-20 columns, 500+ rows), among other visualizations, as a table.
I used Google Visualization API Table. It's simple to use and controlled with JavaScript (don't scare off!).
It has nice support for formatting (through DataTable class). It actually uses HTML table markup with some extra JavaScript and CSS in there. The Table class takes care of the cell alignment. Take a look at the examples.
I have a large table of data with probably about 50 columns and a couple hundred rows. I have tried out many jquery plugins to freeze headers and columns but they don't seem to work correctly. After you add so many columns and rows, they either freeze or take forever to load. From what I can tell, the problem has to do with offsetHeight and offsetWidth but I don't know enough to fix it (or if it's even possible to fix).
I have tried using dataTables as well as fixedheadertable. I know that the problem is when I add the jquery. If I don't use jquery, the table loads instantly.
Does anyone have any recommendations or any ideas on how to do this without javascript? The data is a huge report so it all needs to be on 1 page. I need to be able to freeze 2 header rows and 2 columns. I also want the table to be able to expand to 100% width (and maybe 100% height).
I would break your table into two tables. Have the first table have nothing but your table headers, then put a second table underneath, with your table rows.
Then put that second table into a scrollable div, so that as your scroll your 100 rows, your headers will still be visible.
Something like this fiddle
Basically I'm trying to set up a layout to print bills with tcpdf and I want the bottom part to take up the space remaining after I print the products and services and stuff. I'm wondering if I can make it do that without calculating its height with javascript.
The problem I have with javascript is that I can't just take their height and do some magic math to make them fit because they don't exist in a window. I'd have to somehow calculate the height of the products table based on the number of rows which might not be hard but what do I do if something exceeds its cell width and takes up two of them?
Help's totally apreciated.
i'm not adding code because there's really not much to add, it's just feeding HTML to the tcpdf function.
It's very hard to make the bottom row of a table grow.
Alternate solutions:
Wrap the table in a div and set it's height to 100%. The div will then fill the background. If you make the table opaque, it will look right unless you want something like "extend column borders to the bottom".
HTML is not a good format to create paged output. HTML has no real concept of "page size", it's hard to influence where a page break should (or should not) occur, etc. Instead of trying to manipulate the output remotely, try to drive the TCPDF framework directly. Create PDF page objects, draw the table outline over the full height, start rendering cells until a page is full, start new page, rinse, repeat.