Go ProSign in

    Reorder Columns with react-beautiful-dnd

    Alex ReardonAlex Reardon

    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.

    You must be a Member to view code