I am trying to drag a column in a grid;
A grid has default drag events,as you know,just changing columns display place in order;
But my demand is when a column being dragged ,if dragged target-palce is not in
the grid header area ,the column will be removed, else if dragged target-place
is in the grid header area,the column just change dispaly place to the target-place;
So how can I fix it ?
Related
How do i fix the position of the right most column?
When trying to increase or decrease the size of a column, the right most column moves along with the adjustment, creating a gap or a horizontal scroll bar in the process. Is there a way to adjust all the columns dynamically to allow the position of the right most column to stay fixed?
Here are a few examples from the docs
Gap from decreasing 3rd column width:
Scroll bar from increasing 3rd column width:
Layout Mode
If you want columns to resize then you should look at using the fitColumns layout mode. in the table constructor you should set this on the layout option:
var table = new Tabulator("#example-table", {
layout:"fitColumns",
});
This can be seen on the Fit To Width Example
Tabulator provides many options for configuring this layout mode to choose how to resize each column. More info on this can be found in the Layout Documentation
Frozen Columns
If you would alternatively like the column to remain where it is, even when the table is scrolled horizontally then you can use the frozen property on the column definition for the dob column to freeze it in place:
{title:"Date of Birth", field:"dob", frozen:true}}
More details on this can be found in the Frozen Columns DOcumentation
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 ?
In my view I have grid row expander. Inside that row expander I have a nested grid. I want perform drag and drop operation in it. The main grid drag and drop working fine. But in nested grid, not working. while mouse over on the nested grid it shows not valid drop target.
I set the drop location in my nested grid after render
var featured_targetObj = new Ext.dd.DDTarget(thisObj,'CSRPT' + 'group1');
but nothing positive.. any idea for fix this..
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.