I'm using react-beautiful-dnd to copy and element drop into a columns previously created.
But I wonder if there is any possibility when I'm dragging an element and I drop it, it creates me the column dynamically to drop it ? could I make it ?
if react-beautiful-dnd doesn't work, what other plugin of React could do it ?
any suggestion..
I am curious about the same thing, but I suspect that it is not possible.
The approach I can think of is to make the parent of your droppable columns also a Droppable itself. Then onDragEnd you could determine where to insert a new column, automatically adding the Draggable.
While the documentation has a page for Changes while dragging, it includes these rules (and others) that make me think this approach will not work:
You can only add or remove Draggables that are of the same type as the dragging item.
You cannot add or remove a <Droppable /> during a drag.
Also note the warning (currently, at the top of the page) that changes while dragging are currently only supported in version 11.x
Yup, so first control your columns with some state variable say this.state.columns
Then, add an event listener, probably onDragEnd(). In the event handler, update your columns state so that the update occurs as you want
Related
I have to implement virtualization and inifnite scroll with Material-Table, while preserving all its capabilities, such as selection, draggable columns, styling etc.
I was following this example: https://codesandbox.io/s/virtualized-material-table-28umv. However, it seems to fail when selection comes in to play.
Does anybody have any working example for that?
I think you simply forgot to pass the onClick handler to the TableBody onRowClick prop. So creating a handler and then passing it in line #108
onRowClick={onRowClick}
With react-virtualized, when you scroll the list and set the same scrollToIndex, it doesn't scroll back to the same index.
Is there a way to reset the list back to the position?
That's because the prop hasn't changed. You can use the scrollToCell or scrollToRow method (depending on whether you're using Grid or List/Table) to re-scroll to the same index.
As #brianvaughn also said, you List doesn't scroll to the index back again because to the props to the react-virtualized list component haven't changed.
Since, By default all react-virtualized components use shallowCompare to avoid re-rendering unless props or state has changed. The components won't re-render until an update has happened.
The solution to this is to let react-virtualized know that something external has changed. This can be done a couple of different ways.
Also its mentioned in the documentation that you have two ways to let react-virtualized know that something has changed
Pass-thru props
The shallowCompare method will detect changes to any props, even if they aren't declared as propTypes. This means you can also pass through additional properties that affect cell rendering to ensure changes are detected. So you could pass additional props that change when you fire an event that for the virtualized list doesn't change anything.
<List
{...listProps}
sortBy={sortBy}
/>
Public methods
Grid and Collection components can be forcefully re-rendered using forceUpdate. For Table and List, you'll need to call forceUpdateGrid to ensure that the inner Grid is also updated.
So whenever you wish to update the scrollToIndex if, its value hasn't changed from the previous value you could call forceUpdateGrid on the List. This method can come in handy in a lot of other situations as well
Having said that, it may not be the best option always as there is another option to force scroll event if the scrollToIndex hasn't changed, which is the scrollToRow option. However it requires the row you want to scroll to be visible. Its its not, you won't be able to use it.
scrollToRow (index: number)
Ensure row is visible. This method can be used to safely scroll back
to a cell that a user has scrolled away from even if it was previously
scrolled to.
I'm working on a table component with React and I'm encountering an issue with a large table set (> 500 rows). Indeed, When I try to highlight the row where I clicked on, I encounter a big leak in performances.
In order to achieve the row selection, I'm holding a state containing the currently active row in the top component which consists of a container for all the rows in my table. When I click on a cell, I'm updating this state with the row the cell is part of.
This cause a trigger of the render() method my top component and the whole application becomes slow due to huge amount of elements re-rendered.
How can I re-render just the selected row? Is there a general best-practice to avoid the re-render of all the components under by top component?
What about using CSS? You can use :hover property over each row and change the background color each time the mouse is over or clicked. The performance stress is to low if you use the CSS property.
Good luck
I recently did build a grid component in react. My approach to get a fast responding grid on selection and keyboard navigation:
Do not render rows that is outside the viewport (visible range).
Use an unique key on all rows as mentioned in the comments.
Have the selected row key as a component variable (not in state).
On selection update selected row key variable and then update the DOM directly without re-rendering. I get a ref to the grid and then use getElementsByClassName to set remove active class from any active row. Then set active class + focus to the selected row.
I realize that your implementation differs from mine but hopefully you can get some ideas at least.
I have an ag-grid (free reactjs version) with lots of columns and records to load.
Some columns are not necessary, so the user can drag the columns out of the grid (and hence hide them). This is fine but how can the user show the hidden columns again without refreshing the page?
I don't want to suppress column drag, just a way to undo the hide without refreshing.
Any advice?
Shameless plug: The enterprise version has this feature in two places, Tool Panel and Column Menu.
However, thankfully it is rather easy to implement this feature yourself using a single columnApi call, well... one of these:
resetColumnState()
This will reset the state of the columns to what you initially defined them as. It will basically make everything visible again
setColumnVisible(colKey, visible)
Just pass in the colId of the column (usually what you passed in as 'field'... but it could be different depending on your set up) and a truthy or falsey value and this will show/hide the column
setColumnsVisible(<Array> colKeys, visible)
note the s - other than that it is the same as before, but you provide an array of colKeys that you want to all be hidden or shown. If you wanted to provide an array of all your columns with another array of whether they should be shown or not then use the last option here setColumnState
setColumnState(<Array> columnState)
This is probably overkill for what you are trying to do, but this will allow you to set the state of all the columns, whether they are visible or not, pinned to different sides, fixing the widths, etc.
Basically I can see you doing one of two things:
Create a button that will make all the columns visible and call gridOptions.columnApi.resetColumnState() when it is clicked
-- OR --
Create a list of check boxes that will listen for a change and call one of the other functions. This list could be outside of your grid, or even inside of your grid in a Custom Filter Component (find the athlete column of the first example to see what I mean.)
I have a problem with extjs gridpanel dragdrop.
the scenario is as follows:
The gridpanel is initially rendered by loading a remote store.
Then, the rows are added, updated dynamically.
Drag drop feature is implemented on "render" event of gridpanel.
Drag drop works fine for the originally retrieved rows from the remote store.
but when i try to use drag drop for the newly added or edited rows, it doesn't work.
I am getting the following error on firebug:
Index or size is negative or greater than the allowed amount" code: "1
This is may be because , the newly added rows are not taken as a part of the store . I tried changing the event to "click" but it doesnt work that way..
Please please suggest a solution for this fast.. Its needed urgently.
Thanks,
Shreya.
I know 2 methods for drag and drop in ext, one of them is only for grid rows, the other one that I'm using is with setting dragzones and dropzones. With that method, the only thing you have to do is catch an event which is fired when you add new rows to the grid. In that event, set every new row to be a dragzone (so it can be dragged). That's what I did in a similar situation. Hope this helps..
By the way grid rows don't have a .el (DOM element attached to the Ext component, which is the row in this case). So you'll have to create a div for each row component and then use the initializeDropZone(row[x]), where row[x] is the new added row.