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.
Related
I'm creating an application that will have an editable table. I've used Ag-Grid before and have found it to be very useful. I've been searching and reading the documentation for a couple of hours now and haven't found any such example of the below image. Is it possible to do something like this in Ag-Grid?
The only thing I've found for grouping hides rows in a tree-like structure. If it's not possible, is there another angular table library that might work?
Did you try? - https://www.ag-grid.com/javascript-grid-row-spanning/
Or another one thing:
groupRowRenderer, groupRowRendererParams -If grouping, allows custom rendering of the group cell. Use this if you are not happy with the default presentation of the group.
Situation:
I'm playing a little by using the Matt Kruse's library I found at the page Table Sorting, Filtering, Etc at the URL http://javascripttoolbox.com/lib/table/source.php.
It works pretty well but I wish to implement a little improvement (maybe it would be better to use the locution "new feature") and I don't know where to start because I'm a newbie in js and that js file uses more advanced programming statements I don't fully understand, not yet at least.
I have a single html file with some tables in it. Some of them are filterable and sortable thanks to that library. The number of tables may vary, the number of columns (fields) in each table may vary as well, and the number of records (rows) of each table may vary as well too. Of course the content is different in each table too.
By placing a specific css class in the th element of the targeted column I choose, I indicate to the Matt Kruse's library to create in that column a html element that is populated of a list of html elements that are computed dynamically by the js it self by picking a distinct and sole value of each record for that column.
When I wish to apply a filter to the table on the basis of certain column, I have just to choose the relative from the corresponding box and the table gets filtered accordingly, as I expect to. It works just hiding the records (the html rows) with not matching criteria in that specific column with a filter applied on it. Of course it is possible to use filters on more than one column at once if needed. It works pretty similarly to MS Excel.
The problem
When I apply a filter to a column the other columns filter drop-down combo boxes (the html elements that contain the compiled options for filtering other columns) continue to show all options instead of hiding those that are filtered in the table and are no more needed. So it becomes pretty tricky especially on complex tables to choose filtering criteria from other columns because the user has to understand by himself what are the criteria that aren't usable because the corresponding rows are already hidden by a filter already applied to another column.
One more thing: when I edit the content of one or more table cells, the filter of the relative column(s) doesn't update to match the editing made, but it seems to be to stay static.
Goal of this question
If I use a spreadsheet (as LibreOffice Calc, or MS Excel, or Google online spreadsheet, or else) when I filter a column other columns' filter drop down menu are filtered as well. If I remove a filter somewhere, other columns filters drop down are updated accordingly.
All this behavior is what I would like to implement into Matt Kruse's library. In this way it would be easier to filter by multiple columns because the boxes containing the filter criteria of the other columns will show just the filter criteria left by the all the previously applied filters.
What I have already tried
I tried to implement something to do that but it was so slow that I was too much ashamed of its execution time that I already deleted the whole algorithm I created.
For comparison using the Matt Kruse's library algorithm implies just few instants to compile all tables data into filter elements (on all tables as well). But the algorithm I've implemented needed more than 30-40 seconds for just one table. Way too inefficient.
Substantially I wrote few "for loops" that for each into each of the filtered table, compares the value of the option with each one of the corresponding column and if finds a mach keeps the option visible, else it hides that element into the . I attached that algorithm to the change event of each , so when I clicked and selected the the event was triggered and all the content of the table was updated. It worked as expected but, as I said, what I implemented was way slower.
So the question is:
How do I modify the Matt Kruse's js file to implement the feature I want keeping the highest possible performance?
(If Matt Kruse is reading this, feel free to pick up this idea and implement the new features needed above: I'm sure it would be greatly appreciated).
Thanks everybody in advance for the contribution.
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.
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 set of tables in a build that use the Tablesorter 2.0 jQuery plugin to sort columns of data. It works perfectly fine until I get to a more complex table that has multiple TH rows.
Tablesorter 2.0 automatically detects the first set of THs and makes them the sorting trigger. There's no way to override this with a selector.
My complex table has multiple TBODYs with rows of THs on top like so:
I'm going to give www.datatables.net a go to see if it has a way around this but I'm worried I could run into JS conflicts with both plugins running on the site.
Any other suggestions of how to achieve table sorting within each TBODY using the row where you see 'My Equity' as the sort headers NOT the dark grey header row at the top?
An example of the source HTML is here: http://pastebin.com/CYd06L87
Datatables is a very powerful grid sorter and you should have no problem using multiple TH's. They also have solutions for table details, which might be an alternate way to approach this task. For example, you could have two main rows, one for your equity and one for your equity, all in the same table. Then, setup row details to accomplish your goal...just one possibility.
Here's the row details tut: http://datatables.net/release-datatables/examples/server_side/row_details.html
There's also a solution for summing row totals.