Merge pull request #10 from icflorescu/next

Backport column dragging, toggling, resizing from V7
icflorescu · Dec 23, 2023 · 8830563 · 8830563
2 parents b48f8a1 + 3bf88a1
commit 8830563
Show file tree

Hide file tree

Showing 26 changed files with 1,906 additions and 719 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,10 @@
 The following is a list of notable changes to the Mantine DataTable component.  
 Minor versions that are not listed in the changelog are bug fixes and small improvements.
 
+## 6.0.6 (2023-12-23)
+
+- Implement column drag-to-reorder, toggling and resizing features (see PR [#9](https://github.com/icflorescu/mantine-datatable-v6/pull/9) by [Giovambattista Fazioli](https://github.com/gfazioli))
+
 ## 6.0.5 (2023-11-07)
 
 - Implement `pinLastColumn` feature

diff --git a/docs/components/homePage/HomePageSubtitle.tsx b/docs/components/homePage/HomePageSubtitle.tsx
@@ -1,6 +1,6 @@
 import { Anchor, Text, createStyles } from '@mantine/core';
 import { IconArrowDown, IconDiscountCheck, IconExclamationCircle } from '@tabler/icons-react';
-import InternalLink from '../InternalLink';
+import ExternalLink from '../ExternalLink';
 
 const useStyles = createStyles((theme) => ({
   root: {
@@ -56,8 +56,13 @@ export default function HomePageSubtitle() {
       <div className={classes.line}>
         <IconExclamationCircle className={cx(classes.lineIcon, classes.warningIcon)} size={18} />
         <Text color="dimmed" size="sm">
-          supports <strong>Mantine V6</strong>; support for <strong>Mantine V7</strong> is{' '}
-          <InternalLink to="/mantine-v7-support">under development</InternalLink> ⏳
+          This version supports <strong>Mantine V6</strong>.
+          <br />
+          If you use <strong>Mantine V7</strong>, check out{' '}
+          <strong>
+            <ExternalLink to="https://icflorescu.github.io/mantine-datatable/">Mantine DataTable V7</ExternalLink>
+          </strong>
+          .
         </Text>
       </div>
     </div>

diff --git a/docs/config.ts b/docs/config.ts
@@ -126,6 +126,16 @@ export const PAGES: ({ external?: true; title: string; color?: MantineColor; des
         title: 'Sorting',
         description: 'Example: sorting data with Mantine DataTable',
       },
+      {
+        path: 'dragging-toggling',
+        title: 'Dragging & Toggling',
+        description: `Example: dragging & toggling columns with Mantine DataTable`,
+      },
+      {
+        path: 'resizing',
+        title: 'Column resizing',
+        description: `Example: resizing Mantine DataTable columns`,
+      },
       {
         path: 'infinite-scrolling',
         title: 'Implementing infinite scrolling',

diff --git a/docs/examples/DraggingExample.tsx b/docs/examples/DraggingExample.tsx
@@ -0,0 +1,27 @@
+import { DataTable, useDataTableColumns } from 'mantine-datatable';
+import { companies, type Company } from '~/data';
+
+import { Button, Group, Stack } from '@mantine/core';
+
+export default function DraggingExample() {
+  const key = 'draggable-example';
+
+  const { effectiveColumns, resetColumnsOrder } = useDataTableColumns<Company>({
+    key,
+    columns: [
+      { accessor: 'name', width: '40%', draggable: true },
+      { accessor: 'streetAddress', width: '60%', draggable: true },
+      { accessor: 'city', width: 160, ellipsis: true, draggable: true },
+      { accessor: 'state' },
+    ],
+  });
+
+  return (
+    <Stack>
+      <DataTable withBorder withColumnBorders storeColumnsKey={key} records={companies} columns={effectiveColumns} />
+      <Group position="right">
+        <Button onClick={resetColumnsOrder}>Reset Column Order</Button>
+      </Group>
+    </Stack>
+  );
+}
diff --git a/docs/examples/DraggingTogglingComplexExample.tsx b/docs/examples/DraggingTogglingComplexExample.tsx
@@ -0,0 +1,57 @@
+import { IconColumnRemove, IconColumns1 } from '@tabler/icons-react';
+import sortBy from 'lodash/sortBy';
+import { DataTable, DataTableSortStatus, useDataTableColumns } from 'mantine-datatable';
+import { useEffect, useState } from 'react';
+import { companies, type Company } from '~/data';
+
+export default function DraggingTogglingComplexExample() {
+  const key = 'draggable-toggleable-complex-example';
+
+  const [sortStatus, setSortStatus] = useState<DataTableSortStatus>({
+    columnAccessor: 'name',
+    direction: 'asc',
+  });
+
+  const [records, setRecords] = useState(sortBy(companies, 'name'));
+
+  useEffect(() => {
+    const data = sortBy(companies, sortStatus.columnAccessor) as Company[];
+    setRecords(sortStatus.direction === 'desc' ? data.reverse() : data);
+  }, [sortStatus]);
+
+  const { effectiveColumns, resetColumnsOrder, resetColumnsToggle } = useDataTableColumns({
+    key,
+    columns: [
+      { accessor: 'name', width: '40%', toggleable: true, draggable: true, sortable: true },
+      { accessor: 'streetAddress', width: '60%', toggleable: true, draggable: true },
+      { accessor: 'city', width: 160, ellipsis: true, toggleable: true, draggable: true },
+      { accessor: 'state' },
+    ],
+  });
+
+  return (
+    <DataTable
+      withBorder
+      withColumnBorders
+      storeColumnsKey={key}
+      records={records}
+      columns={effectiveColumns}
+      sortStatus={sortStatus}
+      onSortStatusChange={setSortStatus}
+      rowContextMenu={{
+        items: () => [
+          {
+            key: 'reset-columns.toggled',
+            icon: <IconColumnRemove size={16} />,
+            onClick: resetColumnsToggle,
+          },
+          {
+            key: 'reset-columns-order',
+            icon: <IconColumns1 size={16} />,
+            onClick: resetColumnsOrder,
+          },
+        ],
+      }}
+    />
+  );
+}
diff --git a/docs/examples/DraggingTogglingResetExample.tsx b/docs/examples/DraggingTogglingResetExample.tsx
@@ -0,0 +1,41 @@
+import { IconColumnRemove, IconColumns1 } from '@tabler/icons-react';
+import { DataTable, useDataTableColumns } from 'mantine-datatable';
+import { companies } from '~/data';
+
+export default function DraggingTogglingResetExample() {
+  const key = 'toggleable-reset-example';
+
+  const { effectiveColumns, resetColumnsOrder, resetColumnsToggle } = useDataTableColumns({
+    key,
+    columns: [
+      { accessor: 'name', width: '40%', toggleable: true, draggable: true },
+      { accessor: 'streetAddress', width: '60%', toggleable: true, draggable: true },
+      { accessor: 'city', width: 160, ellipsis: true, toggleable: true, draggable: true },
+      { accessor: 'state' },
+    ],
+  });
+
+  return (
+    <DataTable
+      withBorder
+      withColumnBorders
+      storeColumnsKey={key}
+      records={companies}
+      columns={effectiveColumns}
+      rowContextMenu={{
+        items: () => [
+          {
+            key: 'reset-columns.toggled',
+            icon: <IconColumnRemove size={16} />,
+            onClick: resetColumnsToggle,
+          },
+          {
+            key: 'reset-columns-order',
+            icon: <IconColumns1 size={16} />,
+            onClick: resetColumnsOrder,
+          },
+        ],
+      }}
+    />
+  );
+}
diff --git a/docs/examples/ResizingComplexExample.tsx b/docs/examples/ResizingComplexExample.tsx
@@ -0,0 +1,83 @@
+import { Button, Group, Stack, Switch } from '@mantine/core';
+import { sortBy } from 'lodash';
+import { DataTable, DataTableSortStatus, useDataTableColumns } from 'mantine-datatable';
+import { useEffect, useState } from 'react';
+import { companies, type Company } from '~/data';
+
+export default function ResizingComplexExample() {
+  const key = 'resize-complex-example';
+
+  const [withTableBorder, setWithTableBorder] = useState<boolean>(true);
+
+  const [withColumnBorders, setWithColumnBorders] = useState<boolean>(true);
+
+  const props = {
+    resizable: true,
+    sortable: true,
+    toggleable: true,
+    draggable: true,
+  };
+
+  const { effectiveColumns, resetColumnsWidth, resetColumnsOrder, resetColumnsToggle } = useDataTableColumns<Company>({
+    key,
+    columns: [
+      { accessor: 'name', ...props },
+      { accessor: 'streetAddress', ...props },
+      { accessor: 'city', ...props },
+      { accessor: 'state', ...props },
+    ],
+  });
+
+  const [sortStatus, setSortStatus] = useState<DataTableSortStatus>({
+    columnAccessor: 'name',
+    direction: 'asc',
+  });
+
+  const [records, setRecords] = useState(sortBy(companies, 'name'));
+
+  useEffect(() => {
+    const data = sortBy(companies, sortStatus.columnAccessor) as Company[];
+    setRecords(sortStatus.direction === 'desc' ? data.reverse() : data);
+  }, [sortStatus]);
+
+  return (
+    <Stack>
+      <DataTable
+        withBorder={withTableBorder}
+        withColumnBorders={withColumnBorders}
+        storeColumnsKey={key}
+        records={records}
+        columns={effectiveColumns}
+        sortStatus={sortStatus}
+        onSortStatusChange={setSortStatus}
+      />
+      <Group grow position="apart">
+        <Group position="left">
+          <Switch
+            checked={withTableBorder}
+            onChange={(event) => setWithTableBorder(event.currentTarget.checked)}
+            labelPosition="left"
+            label="Table Border"
+          />
+          <Switch
+            checked={withColumnBorders}
+            onChange={(event) => setWithColumnBorders(event.currentTarget.checked)}
+            labelPosition="left"
+            label="Column Borders"
+          />
+        </Group>
+        <Group position="right">
+          <Button size="xs" compact onClick={resetColumnsWidth}>
+            Reset Column Width
+          </Button>
+          <Button size="xs" compact onClick={resetColumnsOrder}>
+            Reset Column Order
+          </Button>
+          <Button size="xs" compact onClick={resetColumnsToggle}>
+            Reset Column Toggle
+          </Button>
+        </Group>
+      </Group>
+    </Stack>
+  );
+}
diff --git a/docs/examples/ResizingExample.tsx b/docs/examples/ResizingExample.tsx
@@ -0,0 +1,52 @@
+import { Button, Group, Stack, Switch } from '@mantine/core';
+import { DataTable, useDataTableColumns } from 'mantine-datatable';
+import { useState } from 'react';
+import { companies, type Company } from '~/data';
+
+export default function ResizingExample() {
+  const key = 'resize-example';
+
+  const [withTableBorder, setWithTableBorder] = useState<boolean>(true);
+  const [withColumnBorders, setWithColumnBorders] = useState<boolean>(true);
+
+  const { effectiveColumns, resetColumnsWidth } = useDataTableColumns<Company>({
+    key,
+    columns: [
+      { accessor: 'name', width: 100, resizable: true },
+      { accessor: 'streetAddress', resizable: true },
+      { accessor: 'city', resizable: true },
+      { accessor: 'state' },
+    ],
+  });
+
+  return (
+    <Stack>
+      <DataTable
+        withBorder={withTableBorder}
+        withColumnBorders={withColumnBorders}
+        storeColumnsKey={key}
+        records={companies}
+        columns={effectiveColumns}
+      />
+      <Group grow position="apart">
+        <Group position="left">
+          <Switch
+            checked={withTableBorder}
+            onChange={(event) => setWithTableBorder(event.currentTarget.checked)}
+            labelPosition="left"
+            label="Table Border"
+          />
+          <Switch
+            checked={withColumnBorders}
+            onChange={(event) => setWithColumnBorders(event.currentTarget.checked)}
+            labelPosition="left"
+            label="Column Borders"
+          />
+        </Group>
+        <Group position="right">
+          <Button onClick={resetColumnsWidth}>Reset Column Width</Button>
+        </Group>
+      </Group>
+    </Stack>
+  );
+}
diff --git a/docs/examples/TogglingExample.tsx b/docs/examples/TogglingExample.tsx
@@ -0,0 +1,26 @@
+import { Button, Group, Stack } from '@mantine/core';
+import { DataTable, useDataTableColumns } from 'mantine-datatable';
+import { companies } from '~/data';
+
+export default function TogglingExample() {
+  const key = 'toggleable-example';
+
+  const { effectiveColumns, resetColumnsToggle } = useDataTableColumns({
+    key,
+    columns: [
+      { accessor: 'name', width: '40%', toggleable: true },
+      { accessor: 'streetAddress', width: '60%', toggleable: true },
+      { accessor: 'city', width: 160, toggleable: true },
+      { accessor: 'state' },
+    ],
+  });
+
+  return (
+    <Stack>
+      <DataTable withBorder withColumnBorders storeColumnsKey={key} records={companies} columns={effectiveColumns} />
+      <Group position="right">
+        <Button onClick={resetColumnsToggle}>Reset Column Toggled</Button>
+      </Group>
+    </Stack>
+  );
+}
diff --git a/docs/package.json b/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mantine-datatable-docs",
-  "version": "6.0.5",
+  "version": "6.0.6",
   "description": "Docs website for mantine-datatable; see ../package/package.json for more info",
   "private": true,
   "scripts": {
@@ -10,10 +10,10 @@
   },
   "dependencies": {
     "@docsearch/react": "^3.5.2",
-    "@ducanh2912/next-pwa": "^9.7.2",
+    "@ducanh2912/next-pwa": "^10.0.0",
     "@emotion/react": "^11.11.1",
     "@emotion/server": "^11.11.0",
-    "@faker-js/faker": "^8.2.0",
+    "@faker-js/faker": "^8.3.1",
     "@formkit/auto-animate": "^0.8.1",
     "@mantine/core": "^6.0.21",
     "@mantine/dates": "^6.0.21",
@@ -22,21 +22,21 @@
     "@mantine/next": "^6.0.21",
     "@mantine/notifications": "^6.0.21",
     "@mantine/prism": "^6.0.21",
-    "@tabler/icons-react": "^2.40.0",
+    "@tabler/icons-react": "^2.44.0",
     "@tanstack/react-query": "^4.36.1",
     "dayjs": "^1.11.10",
     "lodash": "^4.17.21",
     "mantine-datatable": "*",
-    "next": "^14.0.1",
+    "next": "^14.0.4",
     "next-sitemap": "^4.2.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/lodash": "^4.14.200",
-    "@types/node": "^20.8.10",
-    "@types/react": "^18.2.36",
-    "typescript": "^5.2.2",
+    "@types/lodash": "^4.14.202",
+    "@types/node": "^20.10.5",
+    "@types/react": "^18.2.45",
+    "typescript": "^5.3.3",
     "webpack": "^5.89.0"
   }
 }