I've got a table and it has rows that are collapsible when clicked on the table heading.
Problem is it doesn't seem to be very smooth, there's a lag and jump once I click on the header and when the content shows. Does anyone know how to fix this?
See example build ยป
Unfortunately, table rows does not animate (with jquery) - see this related question on SO: How to Use slideDown (or show) function on a table row?
Work-around will be to use div based layout or try out wrapping td content into divs and animating those divs - see this fiddle. Of course, you have to adjust the css.
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 have a responsive Datatable that also has the Show/Hide columns feature enabled.
I've noticed that whenever I hide a column using the show/hide buttons, a new column will automatically appear in order to fill the width of the page.
Is there a way to disable this so that if I toggle a column to hide, another column does not try and fill its place, but the existing columns will just fit the width of the page?
A test case of my current issue can be found here: http://live.datatables.net/huruwaro/1/edit
Thanks for your time!
Try to redraw the table after clicking the button
$('#myTable1').DataTable().clear().draw();
or
$('#myTable1').DataTable().columns.adjust().draw();
or
$('#myTable1').DataTable().columns.adjust().draw(false);
I have a anchor tag within a DIV. I want to align anchor text on top.
That div is within one row of table. This table will have 4 rows. I want table to resize to its content - i.e. if two rows are present , then table should decrease its size.
I am not sure about what all css should is et to achieve this. Please help
I would suggest that you eliminate the use of tables all together. Would be easier to help if you include some code.
I refer to my previous question on JQuery Rotating List. You can view the post here.
JQuery Rotating List
My previous post was to make elements in my table list move horizontally. Applying td:first-child and referencing it to my jQuery script as a selector, it works.
But now I'm trying to make my table move vertically. I tried referencing it to tr:first-child but the script just doesn't seem to work.
If I were to change my (tr) to (td), table will be screwed as there are no (tr)'s to seperate the different items in my list. I wonder if there are any way around it.
Or else the other option is to use <li> which will require me to change a whole bulk of code.
Anyone who can offer some advice here will be greatly appreciated.
You mean moving rows of the table vertically, like in this jsfiddle? Or do you want to move individual table cells?
Wondering if anyone can help with this.
I have a table with some fixed width boxes. In between these boxes (cells) are cells that stretch to the width required to fill the space in between.
Basically what I'm trying to do is make it so that the fixed width boxes are sortable using jQuery UI's sortable.
I've tried many things with jQuery UI sortable but just can't get the desired effect. As you can see from the JSFiddle demo below the cells are sortable, but end up going next to each other when dragged, as they fit into the empty 'spacer' cell.
Is there any way to fix this? So that the blocks can be dropped into the correct area? and prevent the table from 'jumping' around..?
I tried disabling the 'spacer' cells but could not really understand how its done :/
Just a note: It's vital that the table is able to expand to 100% width (like it does in the JSFiddle). I'm using a table as its the only stable way to get the blocks to space out nicely on a fluid width layout.
(The far right and left blocks need to be up against the end of the container)
JSFiddle: http://jsfiddle.net/JsJMH/
Any help would be really appreciated! Many thanks!
Answer: http://jsfiddle.net/morrison/JsJMH/13/
Notes:
Don't abuse td elements. Empty table cells are usually pointless. I moved the box inside the td.
I had to edit a CSS rule. Sometimes people don't notice that, so I thought I'd point it out.
This is very possible without using tables: http://jsfiddle.net/morrison/quneb/.