issue is when click on button to show child rows the next rows first column can not collapse with there row, we fixed the first 2 columns of the data table because of table responsiveness while opening in mobile or tab.
in this image the yellow boundary part is fixed columns those are not collapsing with there row, and the blue border rows are sub rows of the red button click.
how we can collapse the fixed rows with there row ?
Related
I'm trying to figure out why the hidden columns are showing in the columnsMenuTab menu, usually, the hidden columns should be excluded in the columnsMenuTab tab, but the hidden columns are being demonstrated in the menu tab.
I have used Antd Table to display some data. It has 2 columns and the second column can contain some long paragraphs. The issue is that Antd Table is not wrapping the text which is going outside the width of the table like in last row of the below image.
So can anyone help me in wrapping the text if it is greater than the table width.
What I have:
An html table which can be dynamically enlarged by clicking two buttons: to add row and column.
two one-row and one-column tables. One above and one to the left side of the table. These two tables are expanded simultaneously with the main table. When I add new row, left table ads new cell. When I add new column, top table ads new cell;
two mentioned tables are hidden.
What I need:
when I hover over a particular cell in main table, it(hovering) should trigger appearance of relevant cells in tables above and to the left. For example, if I hover over cell in row 2, column 2(of the main table) it should show cell 2 in top table and cell 2 in left table.
So I need somehow to connect selected cell with the same cells in other tables and show them on hover.
And I need to be able to move the pointer on the appeared cell to click it (it should not disappear when I move cursor from the main table to this cell)
The harder version of what I need supposes that hidden cells will not appear if only 1 row or column are left in the main table.
It will look like this:
Picture of the task
Since CSS allows to select on hover only elements that are inside one div or are siblings, I assume that this can be done only with JQuery.
I am using this code to show an entire hidden table on hover over the main table:
$('#my-table').hover(function() {
$('#dell-row').removeClass('hoverstate');
}, function() {
$('#dell-row').addClass('hoverstate');
});
Now I think that I need to replace #my-table with the selector of the cell in #my-table table and #dell-row with the selector of the corresponding cell in #dell-row table. Any ideas how I can do this?
I can not indicate static coordinates of the cells because the table is dynamically changing.
Please take a look at the working demo with all the html, css and JS code here.
I want to drag an item from a list of items and drop it in a table column. Each columns of the table contains another sub table with a specific template.
I am using dragular for this.
Problem : As I render the view for the first time, I am calculating the height of each row in the sub table and making all the tables row height the same. So the final view looks like its all in one table.
Challenge Facing : When I drop a new item into the table columns (as another sub column) , I want to match the height of all the corresponding rows again in the sub tables. Not sure how to achieve this.
How do I edit a entire row by clicking an edit button on particular row in slick grid?