Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: dragging examples #268

Merged
merged 2 commits into from
Feb 8, 2024
+123 −0
Merged

feat: dragging examples #268

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1e2bf48
feat: dragging examples
alessandrojcm Feb 8, 2024
f084384
fix: wrong initial value
alessandrojcm Feb 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 45 additions & 0 deletions apps/mantine-react-table-docs/example-groups/DraggingExamples.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
26 changes: 26 additions & 0 deletions apps/mantine-react-table-docs/pages/docs/examples/column-ordering.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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)**
26 changes: 26 additions & 0 deletions apps/mantine-react-table-docs/pages/docs/examples/row-dragging.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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)**
26 changes: 26 additions & 0 deletions apps/mantine-react-table-docs/pages/docs/examples/row-ordering.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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)**
Loading