Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    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.