Merge pull request #612 from icflorescu/next

Update changelog & release new version
icflorescu · Jun 30, 2024 · 0a405f1 · 0a405f1
2 parents a470243 + 4c757fc
commit 0a405f1
Show file tree

Hide file tree

Showing 6 changed files with 417 additions and 234 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,11 @@
 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.
 
+## 7.11.0 (2024-06-30)
+
+- Attempt to fix issue [#596](https://github.com/icflorescu/mantine-datatable/issues/596) again, thanks to [@gfazioli](https://github.com/gfazioli) for PR [#608](https://github.com/icflorescu/mantine-datatable/pull/608)
+- Update deps to ensure compatibility with Mantine 7.11.0
+
 ## 7.10.4 (2024-06-24)
 
 - Revert [#603](https://github.com/icflorescu/mantine-datatable/pull/603) due to issue [#605](https://github.com/icflorescu/mantine-datatable/issues/605)

diff --git a/app/examples/column-dragging-and-toggling/page.tsx b/app/examples/column-dragging-and-toggling/page.tsx
@@ -13,6 +13,7 @@ import { allPromiseProps, getRouteMetadata } from '~/lib/utils';
 import DraggingExample from './DraggingExample';
 import DraggingTogglingComplexExample from './DraggingTogglingComplexExample';
 import DraggingTogglingResetExample from './DraggingTogglingResetExample';
+import DynamicColumnExample from './DynamicColumnExample';
 import TogglingExample from './TogglingExample';
 
 const PATH: Route = '/examples/column-dragging-and-toggling';
@@ -87,14 +88,13 @@ export default async function DraggingExamplePage() {
         <Code>false</Code>.
       </Txt>
 
-      {/* TODO add this back after fixing issue https://github.com/icflorescu/mantine-datatable/issues/605 */}
-      {/* <PageSubtitle value="Add & Remove column at run-time" />
+      <PageSubtitle value="Add & Remove column at run-time" />
       <Txt>
         Of course, you may need to add or remove columns at run-time. In this case, you can directly modify the array of
         columns without needing to perform any operations.
       </Txt>
       <DynamicColumnExample />
-      <CodeBlock code={code['DynamicColumnExample.tsx']} /> */}
+      <CodeBlock code={code['DynamicColumnExample.tsx']} />
 
       <PageSubtitle value="Dragging and toggling with context menu reset" />
       <DraggingTogglingResetExample />

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mantine-datatable",
-  "version": "7.10.4",
+  "version": "7.11.0",
   "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",
   "keywords": [
     "mantine",
@@ -75,30 +75,30 @@
     "@ducanh2912/next-pwa": "^10.2.7",
     "@faker-js/faker": "^8.4.1",
     "@formkit/auto-animate": "^0.8.2",
-    "@mantine/code-highlight": "^7.10.2",
-    "@mantine/core": "^7.10.2",
-    "@mantine/dates": "^7.10.2",
-    "@mantine/hooks": "^7.10.2",
-    "@mantine/modals": "^7.10.2",
-    "@mantine/notifications": "^7.10.2",
-    "@tabler/icons-react": "^3.6.0",
-    "@tanstack/react-query": "^5.45.1",
-    "@types/lodash": "^4.17.5",
-    "@types/node": "^20.14.5",
+    "@mantine/code-highlight": "^7.11.0",
+    "@mantine/core": "^7.11.0",
+    "@mantine/dates": "^7.11.0",
+    "@mantine/hooks": "^7.11.0",
+    "@mantine/modals": "^7.11.0",
+    "@mantine/notifications": "^7.11.0",
+    "@tabler/icons-react": "^3.7.0",
+    "@tanstack/react-query": "^5.49.2",
+    "@types/lodash": "^4.17.6",
+    "@types/node": "^20.14.9",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^7.13.1",
-    "@typescript-eslint/parser": "^7.13.1",
+    "@typescript-eslint/eslint-plugin": "^7.14.1",
+    "@typescript-eslint/parser": "^7.14.1",
     "clsx": "^2.1.1",
-    "cssnano": "^7.0.2",
+    "cssnano": "^7.0.3",
     "dayjs": "^1.11.11",
     "eslint": "^8",
     "eslint-config-next": "^14.2.4",
     "eslint-config-prettier": "^9.1.0",
     "lodash": "^4.17.21",
-    "mantine-contextmenu": "^7.10.2",
+    "mantine-contextmenu": "^7.11.0",
     "next": "^14.2.4",
-    "postcss": "^8.4.38",
+    "postcss": "^8.4.39",
     "postcss-cli": "^11.0.0",
     "postcss-import": "^16.1.0",
     "postcss-preset-mantine": "^1.15.0",
@@ -109,8 +109,8 @@
     "sharp": "^0.33.4",
     "swr": "^2.2.5",
     "tsup": "^8.1.0",
-    "typescript": "^5.4.5",
-    "webpack": "^5.92.0"
+    "typescript": "^5.5.2",
+    "webpack": "^5.92.1"
   },
   "peerDependencies": {
     "@mantine/core": ">=7.8",

diff --git a/package/DataTable.tsx b/package/DataTable.tsx
@@ -34,7 +34,7 @@ export function DataTable<T>({
   verticalAlign = 'center',
   fetching,
   columns,
-  storeColumnsKey = 'mantine-datatable',
+  storeColumnsKey,
   groups,
   pinFirstColumn,
   pinLastColumn,

diff --git a/package/hooks/useDataTableColumns.ts b/package/hooks/useDataTableColumns.ts
@@ -37,6 +37,155 @@ export const useDataTableColumns = <T>({
    */
   getInitialValueInEffect?: boolean;
 }) => {
+  // align order
+  function alignColumnsOrder<T>(columnsOrder: string[], columns: DataTableColumn<T>[]) {
+    const updatedColumnsOrder: string[] = [];
+    columnsOrder.forEach((col) => {
+      if (columns.find((c) => c.accessor === col)) {
+        updatedColumnsOrder.push(col);
+      }
+    });
+    columns.forEach((col) => {
+      if (!updatedColumnsOrder.includes(col.accessor as string)) {
+        updatedColumnsOrder.push(col.accessor as string);
+      }
+    });
+    return updatedColumnsOrder;
+  }
+
+  // align toggle
+  function alignColumnsToggle<T>(columnsToggle: DataTableColumnToggle[], columns: DataTableColumn<T>[]) {
+    const updatedColumnsToggle: DataTableColumnToggle[] = [];
+    columnsToggle.forEach((col) => {
+      if (columns.find((c) => c.accessor === col.accessor)) {
+        updatedColumnsToggle.push(col);
+      }
+    });
+    columns.forEach((col) => {
+      if (!updatedColumnsToggle.find((c) => c.accessor === col.accessor)) {
+        updatedColumnsToggle.push({
+          accessor: col.accessor as string,
+          defaultToggle: col.defaultToggle || true,
+          toggleable: col.toggleable as boolean,
+          toggled: col.defaultToggle === undefined ? true : col.defaultToggle,
+        });
+      }
+    });
+    return updatedColumnsToggle as DataTableColumnToggle[];
+  }
+
+  // align width
+  function alignColumnsWidth<T>(columnsWidth: DataTableColumnWidth[], columns: DataTableColumn<T>[]) {
+    const updatedColumnsWidth: DataTableColumnWidth[] = [];
+
+    columnsWidth.forEach((col) => {
+      const accessor = Object.keys(col)[0];
+      if (columns.find((c) => c.accessor === accessor)) {
+        updatedColumnsWidth.push(col);
+      }
+    });
+
+    columns.forEach((col) => {
+      const accessor = col.accessor;
+      if (!updatedColumnsWidth.find((c) => Object.keys(c)[0] === accessor)) {
+        const widthObj: DataTableColumnWidth = {};
+        widthObj[accessor as string] = '';
+        updatedColumnsWidth.push(widthObj);
+      }
+    });
+
+    return updatedColumnsWidth;
+  }
+
+  // align order
+  function useAlignColumnsOrder() {
+    const [columnsOrder, _setColumnsOrder] = useLocalStorage<string[]>({
+      key: key ? `${key}-columns-order` : '',
+      defaultValue: key ? (defaultColumnsOrder as string[]) : undefined,
+      getInitialValueInEffect,
+    });
+
+    function setColumnsOrder(order: string[] | ((prev: string[]) => string[])) {
+      if (key) {
+        _setColumnsOrder(order);
+      }
+    }
+
+    if (!key) {
+      return [columnsOrder, setColumnsOrder] as const;
+    }
+
+    const alignedColumnsOrder = alignColumnsOrder(columnsOrder, columns);
+
+    const prevColumnsOrder = JSON.stringify(columnsOrder);
+
+    if (JSON.stringify(alignedColumnsOrder) !== prevColumnsOrder) {
+      setColumnsOrder(alignedColumnsOrder);
+    }
+
+    return [alignedColumnsOrder, setColumnsOrder] as const;
+  }
+
+  function useAlignColumnsToggle() {
+    const [columnsToggle, _setColumnsToggle] = useLocalStorage<DataTableColumnToggle[]>({
+      key: key ? `${key}-columns-toggle` : '',
+      defaultValue: key ? (defaultColumnsToggle as DataTableColumnToggle[]) : undefined,
+      getInitialValueInEffect,
+    });
+
+    function setColumnsToggle(
+      toggle: DataTableColumnToggle[] | ((prev: DataTableColumnToggle[]) => DataTableColumnToggle[])
+    ) {
+      if (key) {
+        _setColumnsToggle(toggle);
+      }
+    }
+
+    if (!key) {
+      return [columnsToggle, setColumnsToggle] as const;
+    }
+
+    const alignedColumnsToggle = alignColumnsToggle(columnsToggle, columns);
+
+    const prevColumnsToggle = JSON.stringify(columnsToggle);
+
+    if (JSON.stringify(alignedColumnsToggle) !== prevColumnsToggle) {
+      setColumnsToggle(alignedColumnsToggle);
+    }
+
+    return [alignColumnsToggle(columnsToggle, columns), setColumnsToggle] as const;
+  }
+
+  function useAlignColumnsWidth() {
+    const [columnsWidth, _setColumnsWidth] = useLocalStorage<DataTableColumnWidth[]>({
+      key: key ? `${key}-columns-width` : '',
+      defaultValue: key ? (defaultColumnsWidth as DataTableColumnWidth[]) : undefined,
+      getInitialValueInEffect,
+    });
+
+    function setColumnsWidth(
+      width: DataTableColumnWidth[] | ((prev: DataTableColumnWidth[]) => DataTableColumnWidth[])
+    ) {
+      if (key) {
+        _setColumnsWidth(width);
+      }
+    }
+
+    if (!key) {
+      return [columnsWidth, setColumnsWidth] as const;
+    }
+
+    const alignedColumnsWidth = alignColumnsWidth(columnsWidth, columns);
+
+    const prevColumnsWidth = JSON.stringify(columnsWidth);
+
+    if (JSON.stringify(alignedColumnsWidth) !== prevColumnsWidth) {
+      setColumnsWidth(alignedColumnsWidth);
+    }
+
+    return [alignColumnsWidth(columnsWidth, columns), setColumnsWidth] as const;
+  }
+
   // Default columns id ordered is the order of the columns in the array
   const defaultColumnsOrder = (columns && columns.map((column) => column.accessor)) || [];
 
@@ -55,25 +204,13 @@ export const useDataTableColumns = <T>({
     }));
 
   // Store the columns order in localStorage
-  const [columnsOrder, setColumnsOrder] = useLocalStorage<string[]>({
-    key: `${key}-columns-order`,
-    defaultValue: defaultColumnsOrder as string[],
-    getInitialValueInEffect,
-  });
+  const [columnsOrder, setColumnsOrder] = useAlignColumnsOrder();
 
   // Store the columns toggle in localStorage
-  const [columnsToggle, setColumnsToggle] = useLocalStorage<DataTableColumnToggle[]>({
-    key: `${key}-columns-toggle`,
-    defaultValue: defaultColumnsToggle as DataTableColumnToggle[],
-    getInitialValueInEffect,
-  });
+  const [columnsToggle, setColumnsToggle] = useAlignColumnsToggle();
 
   // Store the columns widths in localStorage
-  const [columnsWidth, setColumnsWidth] = useLocalStorage<DataTableColumnWidth[]>({
-    key: `${key}-columns-width`,
-    defaultValue: defaultColumnsWidth as DataTableColumnWidth[],
-    getInitialValueInEffect,
-  });
+  const [columnsWidth, setColumnsWidth] = useAlignColumnsWidth();
 
   // we won't use the "remove" function from useLocalStorage() because
   // we got issue with rendering
@@ -145,4 +282,4 @@ export const useDataTableColumns = <T>({
     setColumnWidth,
     resetColumnsWidth,
   } as const;
-};
+};