diff --git a/packages/eui/src-docs/src/views/datagrid/schema_columns/column_dragging.js b/packages/eui/src-docs/src/views/datagrid/schema_columns/column_dragging.js
index fd3e11e4d60..47284caef6f 100644
--- a/packages/eui/src-docs/src/views/datagrid/schema_columns/column_dragging.js
+++ b/packages/eui/src-docs/src/views/datagrid/schema_columns/column_dragging.js
@@ -74,6 +74,7 @@ export default () => {
       columnVisibility={{
         visibleColumns: visibleColumns,
         setVisibleColumns: setVisibleColumns,
+        canDragAndDropColumns: true,
       }}
       rowCount={data.length}
       renderCellValue={({ rowIndex, columnId }) => data[rowIndex][columnId]}
diff --git a/packages/eui/src-docs/src/views/datagrid/schema_columns/datagrid_columns_example.js b/packages/eui/src-docs/src/views/datagrid/schema_columns/datagrid_columns_example.js
index 39005a78f34..bd77c225c68 100644
--- a/packages/eui/src-docs/src/views/datagrid/schema_columns/datagrid_columns_example.js
+++ b/packages/eui/src-docs/src/views/datagrid/schema_columns/datagrid_columns_example.js
@@ -251,10 +251,10 @@ schemaDetectors={[
       text: (
         <Fragment>
           <p>
-            To reorder columns directly instead of via the actions menu popover,
-            you can enable draggable <strong>EuiDataGrid</strong> header columns
-            via the <EuiCode>columnVisibility.canDragAndDropColumns</EuiCode>{' '}
-            prop. This will allow you to reorder the column by dragging them.
+            You can enable draggable <strong>EuiDataGrid</strong> header columns
+            with the
+            <EuiCode>columnVisibility.canDragAndDropColumns</EuiCode> prop to
+            reorder columns by dragging, instead of using the actions menu.
           </p>
         </Fragment>
       ),
diff --git a/packages/website/docs/components/tabular_content/data_grid_schema_and_columns.mdx b/packages/website/docs/components/tabular_content/data_grid_schema_and_columns.mdx
index e3ad27a9aaf..4b85f462f5f 100644
--- a/packages/website/docs/components/tabular_content/data_grid_schema_and_columns.mdx
+++ b/packages/website/docs/components/tabular_content/data_grid_schema_and_columns.mdx
@@ -364,6 +364,103 @@ export default () => {
 
 ```
 
+## Draggable columns
+
+You can enable draggable `EuiDataGrid` header columns with the `columnVisibility.canDragAndDropColumns` prop to reorder columns by dragging, instead of using the actions menu.
+
+```tsx interactive
+import React, { useState, useCallback } from 'react';
+import { faker } from '@faker-js/faker';
+
+import { EuiDataGrid, EuiAvatar } from '@elastic/eui';
+
+const columns = [
+  {
+    id: 'avatar',
+    initialWidth: 40,
+    isResizable: false,
+  },
+  {
+    id: 'name',
+    initialWidth: 100,
+  },
+  {
+    id: 'email',
+  },
+  {
+    id: 'city',
+  },
+  {
+    id: 'country',
+  },
+  {
+    id: 'account',
+  },
+];
+
+const data = [];
+
+for (let i = 1; i < 5; i++) {
+  data.push({
+    avatar: (
+      <EuiAvatar
+        size="s"
+        name={`${faker.person.lastName()}, ${faker.person.firstName()}`}
+      />
+    ),
+    name: `${faker.person.lastName()}, ${faker.person.firstName()} ${faker.person.suffix()}`,
+    email: faker.internet.email(),
+    city: faker.location.city(),
+    country: faker.location.country(),
+    account: faker.finance.accountNumber(),
+  });
+}
+
+export default () => {
+  const [pagination, setPagination] = useState({ pageIndex: 0 });
+
+  const [visibleColumns, setVisibleColumns] = useState(
+    columns.map(({ id }) => id)
+  );
+
+  const setPageIndex = useCallback(
+    (pageIndex) =>
+      setPagination((pagination) => ({ ...pagination, pageIndex })),
+    []
+  );
+  const setPageSize = useCallback(
+    (pageSize) =>
+      setPagination((pagination) => ({
+        ...pagination,
+        pageSize,
+        pageIndex: 0,
+      })),
+    []
+  );
+
+  return (
+    <EuiDataGrid
+      aria-label="DataGrid demonstrating column sizing constraints"
+      columns={columns}
+      columnVisibility={{
+        visibleColumns: visibleColumns,
+        setVisibleColumns: setVisibleColumns,
+        canDragAndDropColumns: true,
+      }}
+      rowCount={data.length}
+      renderCellValue={({ rowIndex, columnId }) => data[rowIndex][columnId]}
+      pagination={{
+        ...pagination,
+        onChangeItemsPerPage: setPageSize,
+        onChangePage: setPageIndex,
+      }}
+    />
+  );
+};
+```
+
+
+
 ## Control columns
 
 Control columns can be used to include ancillary cells not based on the dataset, such as row selection checkboxes or action buttons. These columns can be placed at either side of the data grid, and users are unable to resize, sort, or rearrange them.