Drag & drop rows on a table in Azure DevOps extension using React

Question

I am developing a custom extension for Azure DevOps work item. I'm building the extension in React using the azure-devops-ui package. I need to have a table as a part of this extension where I would be able to drag and drop the rows, so as to reorder them. The order is important for my usecase. The documentation says that drag and drop is supported, but doesn't have any further details. I would like to know if there is any property on the Table component that I could use. Screenshot

Answer 1

Here's how you can do it. Fill in the place holders as needed and omit any property that may not be needed for your case. I hope this should be enough to get anyone started.

Credit to John Wilkes who helped me find the solution.

import { BoltListDragEvent, IListDropData, ListDragDropBehavior, ListDragImage} from "azure-devops-ui/List";
import { DragAndDropGripper, Table } from "azure-devops-ui/Table";

const onDragEnd = (event: BoltListDragEvent<HTMLElement, ILocationTableItem>) => {
    console.log("Dragged from " + event.detail.dataTransfer.secondaryData.index + " - (" + event.detail.dataTransfer.dropEffect + ")");
};

const onDrop = (event: BoltListDragEvent<HTMLElement, ILocationTableItem>, dropData: IListDropData) => {
    console.log("Dropped at " + dropData.index);
};

const dragDropBehavior = new ListDragDropBehavior<IMyTableItem>({
    allowedTypes: ["MyType"],
    id: "myTableId",
    onDragEnd: onDragEnd,
    onDrop: onDrop,
    renderDragImage: event => <ListDragImage text={event.detail.dataTransfer.data.myProperty} />,
    type: "MyType"
});

function renderGripper(index: number, left: boolean) {
    if (left) {
        return <DragAndDropGripper />;
    }
    return null;
}

<Table
    behaviors={[dragDropBehavior]}
    columns={myColumns}
    itemProvider={myTableItemProvider}
    onActivate={(event, data) => console.log("Activate Row - " + data.index)}
    renderSpacer={renderGripper}
/>