I am using datatables and wanted to represent hierarchical JSON data in a grid. I got the data to display hierarchically in the datatable through ajax, but I am having trouble with javascript implementing the expanding and collapsing of the rows.
Please take a look at this JSBin and try expanding and collapsing and you will see the issue:
http://live.datatables.net/qedufunu/1/edit
The behavior should be like any hierarchical data (like the windows explorer):
When the grid loads, it should display first level rows with the expand icon.
When the top level expand button is clicked, it should open second level rows for the same parent with an expand button (if there are 3rd level rows).
When the second level expand button is clicked, it should open the third level rows.
Please take a look and suggest any JS changes. Please feel free to modify the fiddle.
Thanks.
Okay. I fixed it myself. For folks who need a solution for nested rows in datatable, this should help immensely.
http://live.datatables.net/qedufunu/2/edit
Related
I am using Material UI table components (which is not more than a styled and convenient API for HTML table elements) and I want to make my columns expand collapse on click.
This means that I need that when I click on a column, its sub-columns will be visible and all the rows will also show values for the sub-columns, and when I click on the main column again, the sub-columns will collapse and be invisible again, along with all the values in the rows for those sub columns.
I would also like it to be animated with a nice transition of the columns expanding from the main column into view and collapsing into the main column to invisible.
It doesn't necessarily need to be in react or using MUI, it could regular HTML and CSS, but the animations are crucial!
Thank you in advance for the help :)
I tried to use MUI tables components with the Collapse component (which is an animation component to put things into view with a nice transition) but it was neither smooth nor pretty and not even working properly as the columns were sometimes not aligned..
I've looked everywhere on google and couldn't find any example/library for such a feature anywhere.
I was only able to find examples for expand/collapse rows..
I need a table as shown in the image.
The requirements are:
the header row (very first blurred row) is fixed when we start scrolling down the table
the first column is fixed when we start horizontal scrolling
additionally, as we scroll down, the colspanned rows in black color (I'll call it the row-group heading row) - "Title 1" and "Title 2" - will become fixed, below the header row, when all rows that belong to its group are in view. And when we scroll further down, and when the next group of rows come into view, the previous row-group heading row will go away and in its place (right below the fixed main header row) the row-group heading row that corresponds to the rows in current view will be fixed.
We're building a react app. We checked out: react-sticky-table, and other non-react libraries like: Stickytable and Sticky-kit.
None of them seem to be doing what we want.
Is there a JS (react or non-react and preferably non-jquery) library that does this?
If not, assuming that we get the first-row header and the first column fixed using any of the above mentioned libraries, is there a way to make the row-group heading rows fixed/static based on scrolling?
I also prefer the table be built using <table> group of elems, and not just divs. But it's not a strict requirement.
UPDATE: Just found this plugin that seems to be doing this: http://maslianok.github.io/stickyRows/multiplerows.html. It's great, but keeping this question open for pureJS or react solution.
I have worked on the same UI but it was the mixture of pure javascript and jQuery, however less concerned about the front end library, as most of them fail at certain point of requirement or amount of data.
I suggest go with your own solution I did the same it is acceptable to clients since 5 years.
1. Create a separate tables for your header and content.
2. Give each cloumn exactly same column span width. E.g. ,<colspan width="50px">
3. Place a separate table with one column in LHS.
4. Write a code in javascript which scrolls your LHS table along with your main table.
Apologies as it is hard to give working example.
I have a huge table that I want to show it on my website. It has got 60 columns and as many as 2000 rows. Could you please guide me how can I represent these data in the webpage. Right now, I made a scrollbar horizontal and vertical in the webpage and reproduced all the data. It seems clumsy and awkward. This is my first venture in web development, so anyone could guide on simplifying this complexity, it will be great help for me. What I am looking forward is when the user wants a row of data from the table, all those cells should be visible in the same page without the need for a scroll.
Can anyone guide me?
You could use jQuery DataTables with Responsive plugin which will hide extra columns could be shown when necessary.
See this example for demonstration of displaying extra details in a collapsible child row.
See this example for demonstration of displaying extra details in a modal window.
I want to increase row height of ng-grid. For example if my cell content increase to more then 3 lines then I want to show a button and then after click on that button the row size increase and show the remaining content of the cell. I am new in angular js so kindly help me. I also try this plugin but it wont work in my case.
This will not work with ng-grid since it simulates a table by positioning divs in a grid manner. So if you try to increase the height of a row, you have to readjust the top positions of all following rows (eg. cell-like divs) which is simply not in the code.
Better look out for a table based solution like ng-table which has all the fancy features of ng-grid, like sorting, filtering, pagination etc.
Since the structure is based on the browsers native table functions you can leave the proper calculation of dynamic row heights to it's way more powerful rendering engine.
Just look around, there are more than one powerful directives for tables.
I have a jqGrid displaying the data in the table correctly and on gridComplete when the table loads, it applies some click functions to some icons in certain table cells on each row. When the table initially loads, all the functions work properly, but when I click a column header and sort a column in either asc or desc order, the table sorts the rows and then the click functions no longer work. Has anybody run into this issue using jqGrid before? I am using pagination with the table and when i go to the next page, the click functions work again until I sort a column. Any help would be greatly appreciated.
*I forgot to mention before that I also have a subgrid for each row that is collapsed and will expand when an arrow icon is clicked on at the beginning of the row.
Figured it out. When I created the table, I added a small div element that was hidden at the bottom of the main table div element that holds all the data. The small div slides up and down with setting options inside of it. When you sort the table, the jqgrid seems to sort the table and place it within the div inside of the main table. Since it probably doesn't specify what div to put the sorted data back into, it places it into both div elements. When i sorted the data and looked at the smaller div, the sorting recreated the table within the small div as well. So, I ended up with two tables, my original and the new one within the small div. This messed up my java scripts, because the references were all jacked up at that point. So, my solution was to remove the small div when sorting and then when the sorting finished, recreate the small div so the sorting function doesn't get confused. Also, Zikes, the gridComplete function does not run on sort for me. I put an alert statement within the gridComplete function and it shows when the table is loaded initially, but when you sort a column it never shows. I placed the alert at the very beginning of the function, so I know it wasn't running. Either the documentation you are looking at is incorrect or i have some sort of setting that disables the gridComplete function from running on sort. Thanks for the input.