From 1e2bf4887fdbbd47f95038cf91e86678eba30c8f Mon Sep 17 00:00:00 2001 From: Alessandro Cuppari Date: Thu, 8 Feb 2024 19:16:08 +0000 Subject: [PATCH 1/2] feat: dragging examples --- .../example-groups/DraggingExamples.tsx | 45 +++++++++++++++++++ .../pages/docs/examples/column-ordering.mdx | 26 +++++++++++ .../pages/docs/examples/row-dragging.mdx | 26 +++++++++++ .../pages/docs/examples/row-ordering.mdx | 26 +++++++++++ 4 files changed, 123 insertions(+) create mode 100644 apps/mantine-react-table-docs/example-groups/DraggingExamples.tsx diff --git a/apps/mantine-react-table-docs/example-groups/DraggingExamples.tsx b/apps/mantine-react-table-docs/example-groups/DraggingExamples.tsx new file mode 100644 index 000000000..67d0102a1 --- /dev/null +++ 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() : 'export-csv', + ); + return ( + <> + + + isPage && newPath !== 'more' + ? push(newPath as string) + : setActiveTab(newPath as string) + } + keepMounted={false} + > + + Column Ordering + Row Ordering + Row Dragging + + + + + + + + + + + + + + ); +}; + +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 index e69de29bb..465248c83 100644 --- 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'; + + + Column DnD Ordering Example - Mantine React Table Docs + + + + + +## 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). + + + +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 index e69de29bb..85b09f168 100644 --- 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'; + + + Row DnD Dragging Example - Mantine React Table Docs + + + + + +## 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). + + + +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 index e69de29bb..ae5003087 100644 --- 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'; + + + Row DnD Ordering Example - Mantine React Table Docs + + + + + +## 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). + + + +View Extra Storybook **[Examples](https://www.mantine-react-table.dev/?path=/story/prop-playground--default)** From f0843847a19fbeabb5b9e7b6f31fedbcf4d094db Mon Sep 17 00:00:00 2001 From: Alessandro Cuppari Date: Thu, 8 Feb 2024 19:19:19 +0000 Subject: [PATCH 2/2] fix: wrong initial value --- .../example-groups/DraggingExamples.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/mantine-react-table-docs/example-groups/DraggingExamples.tsx b/apps/mantine-react-table-docs/example-groups/DraggingExamples.tsx index 67d0102a1..e7a155255 100644 --- a/apps/mantine-react-table-docs/example-groups/DraggingExamples.tsx +++ b/apps/mantine-react-table-docs/example-groups/DraggingExamples.tsx @@ -8,7 +8,7 @@ import { useState } from 'react'; const DraggingExamples = ({ isPage = false }) => { const { pathname, push } = useRouter(); const [activeTab, setActiveTab] = useState( - isPage ? pathname.split('/').pop() : 'export-csv', + isPage ? pathname.split('/').pop() : 'column-ordering', ); return ( <>