Reorder Columns with react-beautiful-dnd
In this lesson, we will be applying a collection of learned techniques to enable reordering of the columns in our application.
To achieve this, you will wrap the Columns in a single <Droppable /> component, ordered on the horizontal plane, and enhance the Columns to become draggable. You’ll see that wiring up Columns for re-ordering is very similar to what you experienced with tasks. We will be using nested <Draggable /> and <Droppable /> components and the Droppable type prop to achieve column reordering.
Instructor: [00:00] In this lesson, we'll be adding the ability to reorder our columns. I've created an illustration of the approach we are going to implement. We currently have a number of droppable components that are ordered vertically.
[00:16] These are our task list and are in yellow here. They contain our tasks which are draggable components. We're going to add a single droppable parent. This droppable will be ordered on the horizontal plane. We will then enhance our column components, so that they are also draggable components.
[00:39] This approach includes the usage of nested draggable and droppable components. We'll reorder our columns on the horizontal plane and we'll reorder our tasks on the vertical plane.
[00:54] We are now going to modify our initial data slightly. We are removing the third column from our data for now, so that we can more easily see the impact of our work. We are now going to create a horizontally ordered droppable, which we use to reorder our columns and is import droppable from react-beautiful-dnd.
[01:18] I'm going to wrap our container component inside of a droppable. It doesn't really matter what ID we give this droppable, as it won't be interacting with other droppables. Let's just call it all columns.
[01:46] We need to set the direction of the droppable to be horizontal, as it'll be reordering our columns in the horizontal plane. We are also going to add a type prop with the value of column. We are going to set a different type prop value for our column reorder droppable, compared to our task list droppables, so they don't interfere with one another.
[02:15] We now need to set up the rest of our droppable. I've added that droppable props to this component, as well as provided the DOM ref to react-beautiful-dnd. I'm also adding the place holder for our droppable. We can now move on to our column component. We want to make our column draggable. The first thing we are going to do, is to import draggable from react-beautiful-dnd.
[02:43] We're now going to wrap our whole column inside of a draggable. For the draggable id, which is going to use the column id. A droppable also needs an index. This is the position of the draggable inside of the droppable. We are currently not providing an index, so we'll need to do this.
[03:28] The second argument to a map function is the index of the array. We can just pass this straight along to our column component. We'll now go back. We need to finish wiring up our draggable.
[03:46] [pause]
Instructor: [04:02] I have applied the draggable props to our container and wired up our innerRef function, but I have yet to apply our drag handle props, which is why I'm getting some invariant failure over here.
[04:14] The draggable and the drag handle do not need to be designed element. We are going to use the column title as the drag handle for the column. We're now also going to add a type for the droppable that contains our tasks.
[04:41] Let's take a look at our app. We can still reorder task which is great. It looks like we're starting to get there with column reordering, so bit of style funniness, and also when we drop, we're getting an error. A few things we still need to do.
[04:56] We're getting an error, because we still have to update the reordering logic in our onDragEnd function. We are now going to pull the type property out of our result object. We can use this to know, if the user was dragging a column or a task.
[05:16] We now need to add some logic to handle reordering for a column. Here, I'm creating a new column order array, which has the same values as the old column order array. I'm now removing the old column id from the original index and I'm inserting the column id into the new position.
[05:42] I've now created a new style object, which is the same as our old style object, but with this new column order array. Let me look back our application. Our column reordering is now being persisted. However, I can still see through the column header.
[06:08] Rather than adding a background color to the title, I'm just going to add a background color to the whole column. I'm also going to change our task list, conditional background, instead of reverting to white, it's going to inherit the white value from the container.
[06:25] Now, when I drag the column, you can't see through it and same for the task as well. In our application, we are now able to reorder tasks, move tasks between columns, and reorder columns. We can also do all of these things with the keyboard.