We Keep Coding

react-table v6 multiple tables issues

Good day
I have 2 tables side by side and I want them to act like one table with borders and scroll independently and, when my cursor goes over the 1 row in the first table I want to highlight 1 row in the second table
However this is done internally by react-table.
Any solutions how can I implement highlighting same row from both tables?
And I wonder about simultaneous vertical scroll, are there also any solutions in react way?
Don't want to add event listeners to tables like this
firstTableBody.addEventListener('scroll', e => {
const tablePosition = e.target.scrollTop;
firstTableBody.scrollTop = tablePosition;
});
https://stackblitz.com/edit/react-edgooj?file=src/App.js

ok, I did a highlight for all tables at once
For every table I add
getTrProps={rowProps}
and in rowProps I implement
const rowProps = useCallback((state, rowInfo) => {
if (rowInfo && rowInfo.row) {
const isRowHovered = rowInfo.index === hoveredRow;
return {
style: {
background: isRowHovered ? '#D1DDE1' : ''
},
onMouseEnter: () => {
setHoveredRow(rowInfo.index)
},
onMouseLeave: () => {
setHoveredRow(null)
}
}
}
}, [hoveredRow]);
I really dunno why there is always such a poor documentation in all those libs

Updating column zIndex on legendItem mouseover/mouseout in Highcharts

I have a chart where one of the series provided is a 'total' sum value of the other values.
What I'm trying to is to have this column initially behind the others (or hidden) then bring it to the front when that series' legendItem is hovered.
So far I've been able to increase the zIndex on the series to bring the 'total' column to the front on 'mouseover' no problem, but triggering the inverse on 'mouseout' isn't working for me and the 'total' column stays in front.
I've also tried a simlar solution using .toFront(), this worked but was left with the same problem of moving the column back BEHIND on mouseout.
How might I correctly move this column to front/back on legendItem hover?
https://codesandbox.io/s/cold-night-9p0gk?file=/src/components/BarChart.vue:1272-1325

On 'mouseout' you can call toFront method on the stacked series only:
chart.series.forEach(s => {
if (s.name === 'Total') {
s.legendItem.on('mouseover', () => {
s.group.toFront();
});
s.legendItem.on('mouseout', () => {
s.chart.series.forEach(item => {
if (s !== item) {
item.group.toFront();
}
});
});
}
});
Live demo: http://jsfiddle.net/BlackLabel/mpduxwkh/
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGElement#toFront

Ag-Grid when fire onColumnResized it fire onDragStopped

I have tow function first one is ColumnResized and DragStopped the first one for to know width Column and the second one for to know Column order so the problem is that when i fire onColumnResized it fire onDragStopped and that is problem, any solution please??

This is not a bug, onDragStopped is fired because you stopped dragging the Column Resizer.
There is an improvement request to add the event.target to DragEvents (AG-3420 add event.target in callback params for drag events (ie onDragStarted)) - See: https://www.ag-grid.com/ag-grid-pipeline/
For now, if possible, just ignore the drag events

We can stop updateing the resizing over Drag columns in the following way
params.target.childElementCount > 1
or
params.target.className !== 'ag-header-cell-resize'
In if condition we need to pass the above one of the condition
const onDragStopped = useCallback(params => {
if (params.target.className !== 'ag-header-cell-resize') { // condtion to avoide resize event update
const colIds = params.columnApi.getAllDisplayedColumns().map(col => col.colId)
const value = columns.sort((a, b) => colIds.indexOf(a.colId) - colIds.indexOf(b.colId))
if (gridParams) {
setColumns(value)
}
}
}, [ gridParams, setColumns ])

Drag and Drop implemented using Rxjs not working

Trying to create a drag n drop implementation from an Rxjs course example, but its not working correctly. Some time the box is dragged back to original position some times it just get stuck. Here is the plunkr
https://plnkr.co/edit/9Nqx5qiLVwsOV7zU6Diw?p=preview
the js code:
var $drag = $('#drag');
var $document = $(document);
var $dropAreas = $('.drop-area');
var beginDrag$ = Rx.Observable.fromEvent($drag, 'mousedown');
var endDrag$ = Rx.Observable.fromEvent($document, 'mouseup');
var mouseMove$ = Rx.Observable.fromEvent($document, 'mousemove');
var currentOverArea$ = Rx.Observable.merge(
Rx.Observable.fromEvent($dropAreas, 'mouseover').map(e => $(e.target)),
Rx.Observable.fromEvent($dropAreas, 'mouseout').map(e => null)
);
var drops$ = beginDrag$
.do(e => {
e.preventDefault();
$drag.addClass('dragging');
})
.mergeMap(startEvent => {
return mouseMove$
.takeUntil(endDrag$)
.do(moveEvent => moveDrag(startEvent, moveEvent))
.last()
.withLatestFrom(currentOverArea$, (_, $area) => $area);
})
.do(() => {
$drag.removeClass('dragging')
.animate({top: 0, left: 0}, 250);
})
.subscribe( $dropArea => {
$dropAreas.removeClass('dropped');
if($dropArea) $dropArea.addClass('dropped');
});
function moveDrag(startEvent, moveEvent) {
$drag.css(
{left: moveEvent.clientX - startEvent.offsetX,
top: moveEvent.clientY - startEvent.offsetY}
);
}
If I remove the withLatestFrom operator, then dragging of div always work fine, but without this I cannot get the drop feature implemented.

Problem one: Some time the box is dragged back to original position some times it just get stuck.
Answer: you should replace order of chain, ".do" before ".withLatestFrom" like this:
const drops$ = beginDrag$
.do( e => {
e.preventDefault();
$drag.addClass('dragging');
})
.mergeMap(startEvent => {
return mouseMove$
.takeUntil(endDrag$)
.do(mouseEvent => {
moveDrag(startEvent, mouseEvent);
})
.last()
.do((x) => {
console.log("hey from last event",x);
$drag.removeClass('dragging')
.stop()
.animate({ top:0, left: 0}, 250);
}
)
.withLatestFrom(currentOverArea$, (_, $area) => {
console.log('area',$area);
return $area;
});
Problem two: drop and drag outside not working correctly.
Answer: because of mouse event causing by "pointer-events" is not clearly.
In Css File, at:
.dragable .dragging {
background: #555;
pointer-events: none;
}
This is not Enough, the "mouseout" (or "mouseleave") still working, so when you drag box and drop. it happening the same time event "mouseover" and "mouseout". So the drag area never change color.
What to do ?:
make it better by clear every mouse event from the target element. In this case, it is div#drag.dragable.dragging. Add only this to CSS and problem is solve.
div#drag.dragable.dragging {
pointer-events: none;
}
(Holly shit, it take me 8 hours to resolve this. Readmore or see Repo at: Repository
)

Kendo Grid Is there an event for when a row changes (not selected)?

I was hoping to detect when a Kendo grid's row changes, by navigation as opposed to selecting.
By this I mean I would have a grid with selectable: false, in batch edit mode, and I would like to update the data source (in code) when the user tabs to a new row (just as Access does).
I have looked at this example and changed the following properties..
selectable: false,
navigatable: true,
editable: true,
Unfortunately the changed event does not when seem to fire for tabs or arrow keys (when in navigation mode).
Would anyone know any other way I can do as described above (ie know when we have changed row via navigation)
Thanks in advance for any help!

You can use the edit event to determine whether you're in a new row.
Here you go:
selectable: false,
navigatable: true,
editable: true,
edit: function(e) {
if (e.sender.cellIndex($(e.container)) === 0 &&
$(e.container).closest("tr").index() !== 0) {
console.log("next row; update DS");
}
},
You could also store the last row you were in and determine the change using that, if switching between rows in other ways than by tabbing (or when tabbing backwards) is relevant.
If you don't want the grid to be editable, it's more difficult. Here's a quick hack:
var grid = $("#grid").data("kendoGrid");
var elem = $(grid.table)[0];
var handlers = $._data(elem, "events")["keydown"][2];
var oldHandler = handlers.handler;
// replace the existing event handler attached by kendo grid
var newHandler = function (e) {
oldHandler(e);
var current = grid.current();
var closestRow = $(current).closest("tr");
var rowIndex = $(closestRow).index();
if (rowIndex !== grid._lastNavRowIndex) {
if (typeof grid._lastNavRowIndex !== "undefined") {
kendoConsole.log("we just changed to row " + rowIndex);
}
grid._lastNavRowIndex = rowIndex;
}
};
handlers.handler = newHandler;
});
Try it here.

This is probably what you are looking for. When you want events related to the data, you have to look for the DataSource events. When you want events related to the UI, than you look at the Grid events.