Docs(EuiDataGrid): fix disabled draggable columns examples

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]}

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>
       ),

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.