This question at face value is a duplicate of: Divs vs tables for tabular data
BUT I don't think there is a good explanation of WHY someone will ignore what we agree on as standard practice.
It is 2017, tables were inappropriately used for layouting so people say don't use tables, but the exception we know is for visualizing tabular data!
Why is react-table made with divs instead of table/tr/td/th ? https://github.com/react-tools/react-table Certainly some, if not all, 43 contributors know that it shouldn't be divs.
Finally, isn't there an accessibility argument to be made in favor of using the right definition for the job? Wouldn't a screen reader understand that something is a table b/c it uses the term?
Nowadays, tabular data can be formatted nicely with divs and flex box css model. Not 100% as with table, but very close. Additionally, table elements (especially tr) can be styled with css to achieve responsive behavior for mobiles and tablets. At least in most modern web browsers.
So I'd use tables when you need to keep 'rubber' columns (proportionally stretching table heading and table body columns) and use divs when you can make columns with already known width and when semantics is not that important.
Related
I want dashboards layed out against a flexible grid with the following requirements:
total width is variable, and must always fit the screen, even at resizes
cells may be merged
all columns should have the same size (example, with 3 columns)
same with rows
total height should optionnaly fit the screen height
those grid are user generated, so they can't be CSS hard-coded like the online generators do.
Here's some pictures I've made:
example of user defined grid
same example with merged cells
same example scaled
I'm looking for a plugin/code to achieve that, as I'm almost sure it can't be done in CSS (grid layout is not implemented yet in most browsers, as far as I know).
The closest I got was generating a table, but sizing the cells ended up being a complete chaos (why doesn't this table look neat?).
You can get close to that by using a plugin like http://masonry.desandro.com/ or http://www.wookmark.com/jquery-plugin
For the responsive bit, I recommend reading http://osvaldas.info/responsive-jquery-masonry-or-pinterest-style-layout. It talks about the masonry plugin but the concepts can be universally applied.
First of all, I have no idea of Javascript's capability on this. But would like to know if it is possible:
To read from a text file and display a very large table (a couple dozens of columns and a few hundred thousands of rows), in sections;
Not all columns will displayed in the same time. columns are in groups. a group of columns needs to toggle between hidden or show;
rows can be filtered based on certain columns.
The reason to do this is to make a report that displays data analysis results and also provides basic filter, sorting functions for the user. They most likely to have some sort of web browser. So HTML would be an ideal format.
Is it possible with Javascript?
Thanks!
You might be able to do this by using a grid plugin. For example, have at look at the answers to this question: JavaScript data grid for millions of rows
I would recommend a javascript table library such as DataTables. It includes sorting, filtering and pagination options.
Also it has functionality to hand off all the paging, filtering, sorting etc. that DataTables does to a server. The javascript lib DataTables then is just an events and display module. In this case, any number of rows can be handled.
So you would have all the functionality you need, with the ajax-y quick performance of the data loaded in javascript with the scale to handle any number of rows.
Server-side data processing with DataTables
Absolutely yes. Ext.JS shows how to do this very effectively. When done correctly, it is a performance optimization that reduces round trips to server. And improves UX responsiveness.
ExtJS Rich Grid Example. (there are many)
ExtJS Examples. (look at grid section)
Hope that helps.
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.
What is the single fastest method for table row hover css change?
I've tried jQuery (onmouseover/out) and CSS with tr:hover, but once I make my page fullscreen (1920x1200) the performance on my grid is getting just sluggish enough to give the entire page a feel of being sub-par. That's on a grid with 25 rows, and some spans and divs per row. I've tried IE and Google Chrome.
Is there another, faster method? What is generally considered the fastest method across browsers for doing hover CSS changes?
Using CSS is the fastest. I've done some testing, and it's about ten times faster than using Javascript.
You might want to try making the grid with simple div elements instead of using a table. In a table the size of all cells depend on other cells, so every change means a lot of recalculating even if the result is the same size as before.
I have a large report currently rendered as a regular HTML table. I'd like to be able to group columns together and expand/collapse them with a button.
This is a very common practice for rows but not so much for columns. I was wondering if anyone has any tips for doing it with columns.
My stack includes jquery so that's available to you (though certainly not required!).
Use the columnManager plugin. Can't be easier.