docs: dragging examples (#268)

* feat: dragging examples * fix: wrong initial value
KevinVandy · Feb 8, 2024 · 7d12d2d · 7d12d2d
1 parent 080297e
commit 7d12d2d
Show file tree

Hide file tree

Showing 4 changed files with 123 additions and 0 deletions.
diff --git a/apps/mantine-react-table-docs/example-groups/DraggingExamples.tsx b/apps/mantine-react-table-docs/example-groups/DraggingExamples.tsx
@@ -0,0 +1,45 @@
+import { useRouter } from 'next/router';
+import { Box, Tabs } from '@mantine/core';
+import ColumnOrdering from '../examples/enable-column-ordering';
+import RowOrdering from '../examples/enable-row-ordering';
+import RowDragging from '../examples/enable-row-dragging';
+import { useState } from 'react';
+
+const DraggingExamples = ({ isPage = false }) => {
+  const { pathname, push } = useRouter();
+  const [activeTab, setActiveTab] = useState(
+    isPage ? pathname.split('/').pop() : 'column-ordering',
+  );
+  return (
+    <>
+      <Box w={'100%'} mt={1}>
+        <Tabs
+          value={isPage ? pathname.split('/').pop() : activeTab}
+          onChange={(newPath) =>
+            isPage && newPath !== 'more'
+              ? push(newPath as string)
+              : setActiveTab(newPath as string)
+          }
+          keepMounted={false}
+        >
+          <Tabs.List grow={!isPage}>
+            <Tabs.Tab value="column-ordering">Column Ordering</Tabs.Tab>
+            <Tabs.Tab value="row-ordering">Row Ordering</Tabs.Tab>
+            <Tabs.Tab value="row-dragging">Row Dragging</Tabs.Tab>
+          </Tabs.List>
+          <Tabs.Panel value="column-ordering">
+            <ColumnOrdering />
+          </Tabs.Panel>
+          <Tabs.Panel value="row-ordering">
+            <RowOrdering />
+          </Tabs.Panel>
+          <Tabs.Panel value="row-dragging">
+            <RowDragging />
+          </Tabs.Panel>
+        </Tabs>
+      </Box>
+    </>
+  );
+};
+
+export default DraggingExamples;
diff --git a/apps/mantine-react-table-docs/pages/docs/examples/column-ordering.mdx b/apps/mantine-react-table-docs/pages/docs/examples/column-ordering.mdx
@@ -0,0 +1,26 @@
+import Head from 'next/head';
+import Examples from '../../../example-groups/DraggingExamples';
+
+<Head>
+  <title>Column DnD Ordering Example - Mantine React Table Docs</title>
+  <meta
+    name="description"
+    content="An example of Mantine React Table which shows how to enable column to be re-arranged via drag and drop."
+  />
+  <meta
+    property="og:title"
+    content="Column Dnd Ordering Mantine React Table Example"
+  />
+  <meta
+    property="og:description"
+    content="An example of Mantine React Table which shows how to enable column to be re-arranged via drag and drop."
+  />
+</Head>
+
+## Column DnD Ordering Example
+
+Mantine React Table has built-in support for column drag and drop re-ordering. Learn more about column ordering in the [Column Ordering Feature Guide](/docs/guides/column-ordering-dnd).
+
+<Examples isPage />
+
+View Extra Storybook **[Examples](https://www.mantine-react-table.dev/?path=/story/prop-playground--default)**
diff --git a/apps/mantine-react-table-docs/pages/docs/examples/row-dragging.mdx b/apps/mantine-react-table-docs/pages/docs/examples/row-dragging.mdx
@@ -0,0 +1,26 @@
+import Head from 'next/head';
+import Examples from '../../../example-groups/DraggingExamples';
+
+<Head>
+  <title>Row DnD Dragging Example - Mantine React Table Docs</title>
+  <meta
+    name="description"
+    content="An example of Mantine React Table which shows how to enable column to be re-arranged via drag and drop."
+  />
+  <meta
+    property="og:title"
+    content="Column Dnd Ordering Mantine React Table Example"
+  />
+  <meta
+    property="og:description"
+    content="An example of Mantine React Table which shows how to enable column to be re-arranged via drag and drop."
+  />
+</Head>
+
+## Column DnD Ordering Example
+
+Mantine React Table has built-in support row drag and drop features that can be used in a variety of ways. Learn more about column ordering in the [Row Ordering/DnD Feature Guide](/docs/guides/row-ordering-dnd).
+
+<Examples isPage />
+
+View Extra Storybook **[Examples](https://www.mantine-react-table.dev/?path=/story/prop-playground--default)**
diff --git a/apps/mantine-react-table-docs/pages/docs/examples/row-ordering.mdx b/apps/mantine-react-table-docs/pages/docs/examples/row-ordering.mdx
@@ -0,0 +1,26 @@
+import Head from 'next/head';
+import Examples from '../../../example-groups/DraggingExamples';
+
+<Head>
+  <title>Row DnD Ordering Example - Mantine React Table Docs</title>
+  <meta
+    name="description"
+    content="An example of Mantine React Table which shows how to enable column to be re-arranged via drag and drop."
+  />
+  <meta
+    property="og:title"
+    content="Row Dnd Ordering Mantine React Table Example"
+  />
+  <meta
+    property="og:description"
+    content="An example of Mantine React Table which shows how to enable column to be re-arranged via drag and drop."
+  />
+</Head>
+
+## Row DnD Ordering Example
+
+Mantine React Table has built-in support for row drag and drop re-ordering. Learn more about column ordering in the [Row Ordering Feature Guide](/docs/guides/row-ordering-dnd).
+
+<Examples isPage />
+
+View Extra Storybook **[Examples](https://www.mantine-react-table.dev/?path=/story/prop-playground--default)**