diff --git a/frontend/src/queries/nodes/DataTable/ColumnConfigurator/ColumnConfigurator.scss b/frontend/src/queries/nodes/DataTable/ColumnConfigurator/ColumnConfigurator.scss
index a6cf8cf5b3d5f..89ce0aff2b6ed 100644
--- a/frontend/src/queries/nodes/DataTable/ColumnConfigurator/ColumnConfigurator.scss
+++ b/frontend/src/queries/nodes/DataTable/ColumnConfigurator/ColumnConfigurator.scss
@@ -24,24 +24,11 @@
         display: flex;
         align-items: center;
         justify-content: flex-start;
-        padding: 0.5rem;
+        padding: 0 0.5rem;
         overflow: hidden;
         border-radius: var(--radius);
         margin: calc(var(--radius) / 2) 0;
-
-        &:hover {
-            background-color: var(--mid);
-        }
-
-        &.disabled {
-            cursor: not-allowed;
-            color: var(--muted);
-            background-color: var(--mid);
-        }
-
-        &.selected {
-            background-color: var(--primary-bg-hover);
-        }
+        background-color: var(--primary-bg-hover);
     }
 
     .selected-column-col {
@@ -56,23 +43,7 @@
         padding-right: 0.25rem;
 
         svg {
-            transform: rotate(90deg) translateX(2px);
+            transform: rotate(90deg);
         }
     }
 }
-
-.column-configurator-modal-sortable-container {
-    z-index: 9999;
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    padding: 0.5rem;
-    background-color: var(--primary-bg-hover);
-
-    .drag-handle {
-        color: var(--default);
-        font-size: 1.2em;
-        padding-right: 0.25rem;
-        transform: rotate(90deg) translateX(2px);
-    }
-}
diff --git a/frontend/src/queries/nodes/DataTable/ColumnConfigurator/ColumnConfigurator.tsx b/frontend/src/queries/nodes/DataTable/ColumnConfigurator/ColumnConfigurator.tsx
index 54c368f5c4ba4..b831f40740501 100644
--- a/frontend/src/queries/nodes/DataTable/ColumnConfigurator/ColumnConfigurator.tsx
+++ b/frontend/src/queries/nodes/DataTable/ColumnConfigurator/ColumnConfigurator.tsx
@@ -3,14 +3,7 @@ import { BindLogic, useActions, useValues } from 'kea'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { dataTableLogic } from '~/queries/nodes/DataTable/dataTableLogic'
 import { IconClose, IconEdit, IconTuning, SortableDragIcon } from 'lib/lemon-ui/icons'
-import clsx from 'clsx'
 import { Tooltip } from 'lib/lemon-ui/Tooltip'
-import {
-    SortableContainer as sortableContainer,
-    SortableElement as sortableElement,
-    SortableHandle as sortableHandle,
-} from 'react-sortable-hoc'
-import VirtualizedList, { ListRowProps } from 'react-virtualized/dist/es/List'
 import { AutoSizer } from 'react-virtualized/dist/es/AutoSizer'
 import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
 import { useState } from 'react'
@@ -26,6 +19,10 @@ import { PropertyFilterType } from '~/types'
 import { TeamMembershipLevel } from 'lib/constants'
 import { RestrictedArea, RestrictedComponentProps, RestrictionScope } from 'lib/components/RestrictedArea'
 import { LemonCheckbox } from 'lib/lemon-ui/LemonCheckbox'
+import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable'
+import { restrictToParentElement, restrictToVerticalAxis } from '@dnd-kit/modifiers'
+import { DndContext } from '@dnd-kit/core'
+import { CSS } from '@dnd-kit/utilities'
 
 let uniqueNode = 0
 
@@ -85,98 +82,17 @@ export function ColumnConfigurator({ query, setQuery }: ColumnConfiguratorProps)
 }
 
 function ColumnConfiguratorModal({ query }: ColumnConfiguratorProps): JSX.Element {
-    // the virtualised list doesn't support gaps between items in the list
-    // setting the container to be larger than we need
-    // and adding a container with a smaller height to each row item
-    // allows the new row item to set a margin around itself
-    const rowContainerHeight = 36
-    const rowItemHeight = 32
-
     const { modalVisible, columns, saveAsDefault } = useValues(columnConfiguratorLogic)
     const { hideModal, moveColumn, setColumns, selectColumn, unselectColumn, save, toggleSaveAsDefault } =
         useActions(columnConfiguratorLogic)
 
-    const DragHandle = sortableHandle(() => (
-        <span className="drag-handle">
-            <SortableDragIcon />
-        </span>
-    ))
-    const SelectedColumn = ({ column, dataIndex }: { column: string; dataIndex: number }): JSX.Element => {
-        let columnType: PropertyFilterType | null = null
-        let columnKey = column
-        if (column.startsWith('person.properties.')) {
-            columnType = PropertyFilterType.Person
-            columnKey = column.substring(18)
-        }
-        if (column.startsWith('properties.')) {
-            columnType = PropertyFilterType.Event
-            columnKey = column.substring(11)
+    const onEditColumn = (column: string, index: number): void => {
+        const newColumn = window.prompt('Edit column', column)
+        if (newColumn) {
+            setColumns(columns.map((c, i) => (i === index ? newColumn : c)))
         }
-
-        columnKey = trimQuotes(extractExpressionComment(columnKey))
-
-        return (
-            <div className={clsx(['SelectedColumn', 'selected'])} style={{ height: rowItemHeight }}>
-                <DragHandle />
-                {columnType && <PropertyFilterIcon type={columnType} />}
-                <PropertyKeyInfo className="ml-1" value={columnKey} />
-                <div className="flex-1" />
-                <Tooltip title="Edit">
-                    <LemonButton
-                        onClick={() => {
-                            const newColumn = window.prompt('Edit column', column)
-                            if (newColumn) {
-                                setColumns(columns.map((c, i) => (i === dataIndex ? newColumn : c)))
-                            }
-                        }}
-                        status="primary"
-                        size="small"
-                    >
-                        <IconEdit data-attr="column-display-item-edit-icon" />
-                    </LemonButton>
-                </Tooltip>
-                <Tooltip title="Remove">
-                    <LemonButton onClick={() => unselectColumn(column)} status="danger" size="small">
-                        <IconClose data-attr="column-display-item-remove-icon" />
-                    </LemonButton>
-                </Tooltip>
-            </div>
-        )
-    }
-
-    const SortableSelectedColumn = sortableElement(SelectedColumn)
-
-    const SortableSelectedColumnRenderer = ({ index, style, key }: ListRowProps): JSX.Element => {
-        return (
-            <div style={style} key={key}>
-                <SortableSelectedColumn
-                    column={columns[index]}
-                    dataIndex={index}
-                    index={index}
-                    collection="selected-columns"
-                />
-            </div>
-        )
     }
 
-    const SortableColumnList = sortableContainer(() => (
-        <div style={{ height: 360 }} className="selected-columns-col">
-            <AutoSizer>
-                {({ height, width }: { height: number; width: number }) => {
-                    return (
-                        <VirtualizedList
-                            height={height}
-                            rowCount={columns.length}
-                            rowRenderer={SortableSelectedColumnRenderer}
-                            rowHeight={rowContainerHeight}
-                            width={width}
-                        />
-                    )
-                }}
-            </AutoSizer>
-        </div>
-    ))
-
     return (
         <LemonModal
             isOpen={modalVisible}
@@ -207,16 +123,33 @@ function ColumnConfiguratorModal({ query }: ColumnConfiguratorProps): JSX.Elemen
                         <h4 className="secondary uppercase text-muted">
                             Visible columns ({columns.length}) - Drag to reorder
                         </h4>
-                        <SortableColumnList
-                            helperClass="column-configurator-modal-sortable-container"
-                            onSortEnd={({ oldIndex, newIndex }) => moveColumn(oldIndex, newIndex)}
-                            distance={5}
-                            useDragHandle
-                            lockAxis="y"
-                        />
+                        <DndContext
+                            onDragEnd={({ active, over }) => {
+                                if (over && active.id !== over.id) {
+                                    moveColumn(
+                                        columns.indexOf(active.id.toString()),
+                                        columns.indexOf(over.id.toString())
+                                    )
+                                }
+                            }}
+                            modifiers={[restrictToVerticalAxis, restrictToParentElement]}
+                        >
+                            <SortableContext items={columns} strategy={verticalListSortingStrategy}>
+                                {columns.map((column, index) => (
+                                    <SelectedColumn
+                                        key={column}
+                                        column={column}
+                                        dataIndex={index}
+                                        onEdit={onEditColumn}
+                                        onRemove={unselectColumn}
+                                    />
+                                ))}
+                            </SortableContext>
+                        </DndContext>
                     </div>
                     <div className="HalfColumn">
                         <h4 className="secondary uppercase text-muted">Available columns</h4>
+                        {/* eslint-disable-next-line react/forbid-dom-props */}
                         <div style={{ height: 360 }}>
                             <AutoSizer>
                                 {({ height, width }: { height: number; width: number }) => (
@@ -271,3 +204,61 @@ function ColumnConfiguratorModal({ query }: ColumnConfiguratorProps): JSX.Elemen
         </LemonModal>
     )
 }
+
+const SelectedColumn = ({
+    column,
+    dataIndex,
+    onEdit,
+    onRemove,
+}: {
+    column: string
+    dataIndex: number
+    onEdit: (column: string, index: number) => void
+    onRemove: (column: string) => void
+}): JSX.Element => {
+    const { setNodeRef, attributes, transform, transition, listeners } = useSortable({ id: column })
+
+    let columnType: PropertyFilterType | null = null
+    let columnKey = column
+    if (column.startsWith('person.properties.')) {
+        columnType = PropertyFilterType.Person
+        columnKey = column.substring(18)
+    }
+    if (column.startsWith('properties.')) {
+        columnType = PropertyFilterType.Event
+        columnKey = column.substring(11)
+    }
+
+    columnKey = trimQuotes(extractExpressionComment(columnKey))
+
+    return (
+        <div
+            ref={setNodeRef}
+            // eslint-disable-next-line react/forbid-dom-props
+            style={{
+                transform: CSS.Transform.toString(transform),
+                transition,
+            }}
+            {...attributes}
+        >
+            <div className="SelectedColumn">
+                <span {...listeners} className="drag-handle">
+                    <SortableDragIcon />
+                </span>
+                {columnType && <PropertyFilterIcon type={columnType} />}
+                <PropertyKeyInfo className="ml-1" value={columnKey} />
+                <div className="flex-1" />
+                <Tooltip title="Edit">
+                    <LemonButton onClick={() => onEdit(column, dataIndex)} status="primary" size="small">
+                        <IconEdit data-attr="column-display-item-edit-icon" />
+                    </LemonButton>
+                </Tooltip>
+                <Tooltip title="Remove">
+                    <LemonButton onClick={() => onRemove(column)} status="danger" size="small">
+                        <IconClose data-attr="column-display-item-remove-icon" />
+                    </LemonButton>
+                </Tooltip>
+            </div>
+        </div>
+    )
+}