Skip to content

Commit 6652b94

Browse files
icflorescuicflorescu
authored
Merge pull request #623 from icflorescu/next
Implement DnD support, update deps, changelog, bump version
2 parents b8e58cb + 3ad2a3b commit 6652b94

22 files changed

+9900
-713
lines changed

‎.github/workflows/publish-and-deploy.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ jobs:
2929
- name: Setup Node.js
3030
uses: actions/setup-node@v4
3131
with:
32-
node-version: '20'
32+
node-version: '22'
3333
cache: yarn
3434
- name: Restore cache
3535
uses: actions/cache@v4

‎CHANGELOG.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,11 @@
33
The following is a list of notable changes to the Mantine DataTable component.
44
Minor versions that are not listed in the changelog are bug fixes and small improvements.
55

6+
## 7.11.3 (2024-07-30)
7+
8+
- Update dev dependencies
9+
- Implement drag and drop support (see [#616](https://github.com/icflorescu/mantine-datatable/pull/616))
10+
611
## 7.11.2 (2024-07-10)
712

813
- Update dev dependencies

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ The [lightweight](https://bundlephobia.com/package/mantine-datatable), dependenc
3333
- **[Automatically-scrollable](https://icflorescu.github.io/mantine-datatable/examples/scrollable-vs-auto-height)** - automatically scrollable or auto-height
3434
- **[AutoAnimate support](https://icflorescu.github.io/mantine-datatable/examples/using-with-auto-animate)** - animate row sorting, addition and removal
3535
- **[Column reordering, toggling](https://icflorescu.github.io/mantine-datatable/examples/column-dragging-and-toggling)** and **[resizing](https://icflorescu.github.io/mantine-datatable/examples/column-resizing)** - thanks to the outstanding work of [Giovambattista Fazioli](https://github.com/gfazioli)
36+
- **[Drag-and-drop support](https://icflorescu.github.io/mantine-datatable/examples/row-dragging)** - implemented using [@hello-pangea/dnd](https://github.com/hello-pangea/dnd) thanks to the outstanding work of [Mohd Ahmad](https://github.com/MohdAhmad1)
3637
- **More** - check out the [full documentation](https://icflorescu.github.io/mantine-datatable/)
3738

3839
## Trusted by the community

‎app/(home)/page.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,8 @@ export default function HomePage() {
5454
<InternalLink to="/examples/column-properties-and-styling">cell data rendering</InternalLink>,{' '}
5555
<InternalLink to="/examples/using-with-mantine-contextmenu">context menus</InternalLink>,{' '}
5656
<InternalLink to="/examples/expanding-rows">row expansion</InternalLink>,{' '}
57-
<InternalLink to="/examples/nested-tables">nesting</InternalLink> and{' '}
57+
<InternalLink to="/examples/nested-tables">nesting</InternalLink>,{' '}
58+
<InternalLink to="/examples/row-dragging">drag-and-drop reordering support</InternalLink> and{' '}
5859
<InternalLink to="/examples/complex-usage-scenario">more</InternalLink>
5960
</Feature>
6061
<Feature icon={IconLifebuoy} title="Typescript based">

‎app/config.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -152,6 +152,11 @@ export const ROUTES: RouteInfo[] = [
152152
title: 'Column dragging and toggling',
153153
description: `Example: dragging & toggling ${PRODUCT_NAME} columns`,
154154
},
155+
{
156+
href: '/examples/row-dragging',
157+
title: 'Row dragging',
158+
description: `Example: dragging ${PRODUCT_NAME} rows`,
159+
},
155160
{
156161
href: '/examples/column-resizing',
157162
title: 'Column resizing',

‎app/examples/row-dragging/RowDraggingExample.tsx

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
'use client';
2+
3+
import { DragDropContext, Draggable, type DropResult, Droppable } from '@hello-pangea/dnd';
4+
import { TableTd } from '@mantine/core';
5+
import { notifications } from '@mantine/notifications';
6+
import { IconGripVertical } from '@tabler/icons-react';
7+
import { DataTable, DataTableColumn, DataTableDraggableRow } from '__PACKAGE__';
8+
import { useState } from 'react';
9+
import companies from '~/data/companies.json';
10+
11+
interface RecordData {
12+
id: string;
13+
name: string;
14+
streetAddress: string;
15+
city: string;
16+
state: string;
17+
missionStatement: string;
18+
}
19+
20+
export function RowDraggingExample() {
21+
const [records, setRecords] = useState<RecordData[]>(companies);
22+
23+
const handleDragEnd = (result: DropResult) => {
24+
if (!result.destination) return;
25+
26+
const items = Array.from(records);
27+
const sourceIndex = result.source.index;
28+
const destinationIndex = result.destination.index;
29+
const [reorderedItem] = items.splice(sourceIndex, 1);
30+
items.splice(destinationIndex, 0, reorderedItem);
31+
32+
setRecords(items);
33+
notifications.show({
34+
title: 'Table reordered',
35+
message: `The company named "${items[sourceIndex].name}" has been moved from position ${sourceIndex + 1} to ${destinationIndex + 1}.`,
36+
color: 'blue',
37+
});
38+
};
39+
40+
const columns: DataTableColumn<RecordData>[] = [
41+
// add empty header column for the drag handle
42+
{ accessor: '', hiddenContent: true, width: 30 },
43+
{ accessor: 'name', width: 150 },
44+
{ accessor: 'streetAddress', width: 150 },
45+
{ accessor: 'city', width: 150 },
46+
{ accessor: 'state', width: 150 },
47+
];
48+
49+
return (
50+
<DragDropContext onDragEnd={handleDragEnd}>
51+
<DataTable<RecordData>
52+
columns={columns}
53+
records={records}
54+
height={400}
55+
withTableBorder
56+
withColumnBorders
57+
tableWrapper={({ children }) => (
58+
<Droppable droppableId="datatable">
59+
{(provided) => (
60+
<div {...provided.droppableProps} ref={provided.innerRef}>
61+
{children}
62+
{provided.placeholder}
63+
</div>
64+
)}
65+
</Droppable>
66+
)}
67+
styles={{ table: { tableLayout: 'fixed' } }}
68+
rowFactory={({ record, index, rowProps, children }) => (
69+
<Draggable key={record.id} draggableId={record.id} index={index}>
70+
{(provided, snapshot) => (
71+
<DataTableDraggableRow isDragging={snapshot.isDragging} {...rowProps} {...provided.draggableProps}>
72+
{/** custom drag handle */}
73+
<TableTd {...provided.dragHandleProps} ref={provided.innerRef}>
74+
<IconGripVertical size={16} />
75+
</TableTd>
76+
{children}
77+
</DataTableDraggableRow>
78+
)}
79+
</Draggable>
80+
)}
81+
/>
82+
</DragDropContext>
83+
);
84+
}

‎app/examples/row-dragging/page.tsx

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { Code } from '@mantine/core';
2+
import type { Route } from 'next';
3+
import { PRODUCT_NAME, REPO_LINK } from '~/app/config';
4+
import { CodeBlock } from '~/components/CodeBlock';
5+
import { ExternalLink } from '~/components/ExternalLink';
6+
import { PageNavigation } from '~/components/PageNavigation';
7+
import { PageTitle } from '~/components/PageTitle';
8+
import { Txt } from '~/components/Txt';
9+
import { readCodeFile } from '~/lib/code';
10+
import { allPromiseProps, getRouteMetadata } from '~/lib/utils';
11+
import { RowDraggingExample } from './RowDraggingExample';
12+
13+
const PATH: Route = '/examples/row-dragging';
14+
15+
export const metadata = getRouteMetadata(PATH);
16+
17+
export default async function BasicUsageExamplePage() {
18+
const code = await allPromiseProps({
19+
'RowDraggingExample.tsx': readCodeFile<string>(`${PATH}/RowDraggingExample.tsx`),
20+
'companies.json': readCodeFile<string>('/../data/companies.json'),
21+
});
22+
23+
return (
24+
<>
25+
<PageTitle of={PATH} />
26+
<Txt>
27+
Starting with <Code>v7.11.3</Code>, {PRODUCT_NAME} also supports row dragging (implemented with{' '}
28+
<ExternalLink to="https://github.com/hello-pangea/dnd">@hello-pangea/dnd library</ExternalLink> in{' '}
29+
<ExternalLink to={`${REPO_LINK}/pull/616`}>this PR</ExternalLink>).
30+
<br />
31+
Here is how you would implement it in your project:
32+
</Txt>
33+
<CodeBlock tabs={{ code, keys: ['RowDraggingExample.tsx', 'companies.json'] }} />
34+
<Txt>The code above will produce the following result:</Txt>
35+
<RowDraggingExample />
36+
37+
<PageNavigation of={PATH} />
38+
</>
39+
);
40+
}

‎data/companies.json

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,5 +78,29 @@
7878
"city": "West Gerry",
7979
"state": "KS",
8080
"missionStatement": "Synthesize customized portals."
81+
},
82+
{
83+
"id": "a9c0b7f0-3a1b-4b0c-8f3d-6a6a7b7b7b7q2",
84+
"name": "Kling - McLaughlin",
85+
"streetAddress": "8346 Kertzmann Square",
86+
"city": "South Joesph",
87+
"state": "ID",
88+
"missionStatement": "Reinvent cross-platform channels."
89+
},
90+
{
91+
"id": "a9c0b7f0-3a1b-4b0c-8f3d-6a6a7b7b7b72b",
92+
"name": "Jogi - McLaughlin",
93+
"streetAddress": "83462 Shazam Street",
94+
"city": "North Joesph",
95+
"state": "ID",
96+
"missionStatement": "Eliminate best-of-breed e-markets."
97+
},
98+
{
99+
"id": "a9c0b7f0-3a1b-4b0c-8f3d-6a6af7b7b7b7b",
100+
"name": "Jogi - McLaughlin",
101+
"streetAddress": "83462 Shazam Street",
102+
"city": "North Joesph",
103+
"state": "ID",
104+
"missionStatement": "Eliminate best-of-breed e-markets."
81105
}
82106
]

‎package.json

Lines changed: 26 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "mantine-datatable",
3-
"version": "7.11.2",
3+
"version": "7.11.3",
44
"description": "The lightweight, dependency-free, dark-theme aware table component for your Mantine UI data-rich applications, featuring asynchronous data loading support, pagination, intuitive Gmail-style additive batch rows selection, column sorting, custom cell data rendering, row expansion, nesting, context menus, and much more",
55
"keywords": [
66
"mantine",
@@ -71,46 +71,47 @@
7171
"format": "prettier --write ."
7272
},
7373
"devDependencies": {
74-
"@docsearch/react": "^3.6.0",
75-
"@ducanh2912/next-pwa": "^10.2.7",
74+
"@docsearch/react": "^3.6.1",
75+
"@ducanh2912/next-pwa": "^10.2.8",
7676
"@faker-js/faker": "^8.4.1",
7777
"@formkit/auto-animate": "^0.8.2",
78-
"@mantine/code-highlight": "^7.11.1",
79-
"@mantine/core": "^7.11.1",
80-
"@mantine/dates": "^7.11.1",
81-
"@mantine/hooks": "^7.11.1",
82-
"@mantine/modals": "^7.11.1",
83-
"@mantine/notifications": "^7.11.1",
84-
"@tabler/icons-react": "^3.10.0",
85-
"@tanstack/react-query": "^5.50.1",
86-
"@types/lodash": "^4.17.6",
87-
"@types/node": "^20.14.10",
78+
"@hello-pangea/dnd": "^16.6.0",
79+
"@mantine/code-highlight": "^7.11.2",
80+
"@mantine/core": "^7.11.2",
81+
"@mantine/dates": "^7.11.2",
82+
"@mantine/hooks": "^7.11.2",
83+
"@mantine/modals": "^7.11.2",
84+
"@mantine/notifications": "^7.11.2",
85+
"@tabler/icons-react": "^3.11.0",
86+
"@tanstack/react-query": "^5.51.15",
87+
"@types/lodash": "^4.17.7",
88+
"@types/node": "^22.0.0",
8889
"@types/react": "^18.3.3",
8990
"@types/react-dom": "^18.3.0",
90-
"@typescript-eslint/eslint-plugin": "^7.16.0",
91-
"@typescript-eslint/parser": "^7.16.0",
91+
"@typescript-eslint/eslint-plugin": "^7.18.0",
92+
"@typescript-eslint/parser": "^7.18.0",
9293
"clsx": "^2.1.1",
9394
"cssnano": "^7.0.4",
94-
"dayjs": "^1.11.11",
95+
"dayjs": "^1.11.12",
9596
"eslint": "^8",
96-
"eslint-config-next": "^14.2.4",
97+
"eslint-config-next": "^14.2.5",
9798
"eslint-config-prettier": "^9.1.0",
9899
"lodash": "^4.17.21",
99-
"mantine-contextmenu": "^7.11.2",
100-
"next": "^14.2.4",
101-
"postcss": "^8.4.39",
100+
"mantine-contextmenu": "^7.11.3",
101+
"next": "^14.2.5",
102+
"postcss": "^8.4.40",
102103
"postcss-cli": "^11.0.0",
103104
"postcss-import": "^16.1.0",
104-
"postcss-preset-mantine": "^1.15.0",
105+
"postcss-preset-mantine": "^1.17.0",
105106
"postcss-simple-vars": "^7.0.1",
106-
"prettier": "^3.3.2",
107+
"prettier": "^3.3.3",
107108
"react": "^18.3.1",
108109
"react-dom": "^18.3.1",
109110
"sharp": "^0.33.4",
110111
"swr": "^2.2.5",
111-
"tsup": "^8.1.0",
112-
"typescript": "^5.5.3",
113-
"webpack": "^5.92.1"
112+
"tsup": "^8.2.3",
113+
"typescript": "^5.5.4",
114+
"webpack": "^5.93.0"
114115
},
115116
"peerDependencies": {
116117
"@mantine/core": ">=7.8",

0 commit comments

Comments
 (0)