Merge pull request #607 from icflorescu/next

Fix #605
icflorescu · Jun 24, 2024 · a470243 · a470243
2 parents 63b9766 + 53a6f2e
commit a470243
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 122 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.
 
+## 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)
+
 ## 7.10.3 (2024-06-18)
 
 - Fix issue [#596](https://github.com/icflorescu/mantine-datatable/issues/596) (new columns don't appear when added to `useDataTableColumns`), thanks to [@gfazioli](https://github.com/gfazioli) for PR [#603](https://github.com/icflorescu/mantine-datatable/pull/603)

diff --git a/app/examples/column-dragging-and-toggling/page.tsx b/app/examples/column-dragging-and-toggling/page.tsx
@@ -13,7 +13,6 @@ 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';
@@ -88,13 +87,14 @@ export default async function DraggingExamplePage() {
         <Code>false</Code>.
       </Txt>
 
-      <PageSubtitle value="Add & Remove column at run-time" />
+      {/* TODO add this back after fixing issue https://github.com/icflorescu/mantine-datatable/issues/605 */}
+      {/* <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.3",
+  "version": "7.10.4",
   "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",

diff --git a/package/hooks/useDataTableColumns.ts b/package/hooks/useDataTableColumns.ts
@@ -37,121 +37,6 @@ 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}-columns-order`,
-      defaultValue: defaultColumnsOrder as string[],
-      getInitialValueInEffect,
-    });
-
-    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}-columns-toggle`,
-      defaultValue: defaultColumnsToggle as DataTableColumnToggle[],
-      getInitialValueInEffect,
-    });
-
-    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}-columns-width`,
-      defaultValue: defaultColumnsWidth as DataTableColumnWidth[],
-      getInitialValueInEffect,
-    });
-
-    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)) || [];
 
@@ -170,13 +55,25 @@ export const useDataTableColumns = <T>({
     }));
 
   // Store the columns order in localStorage
-  const [columnsOrder, setColumnsOrder] = useAlignColumnsOrder();
+  const [columnsOrder, setColumnsOrder] = useLocalStorage<string[]>({
+    key: `${key}-columns-order`,
+    defaultValue: defaultColumnsOrder as string[],
+    getInitialValueInEffect,
+  });
 
   // Store the columns toggle in localStorage
-  const [columnsToggle, setColumnsToggle] = useAlignColumnsToggle();
+  const [columnsToggle, setColumnsToggle] = useLocalStorage<DataTableColumnToggle[]>({
+    key: `${key}-columns-toggle`,
+    defaultValue: defaultColumnsToggle as DataTableColumnToggle[],
+    getInitialValueInEffect,
+  });
 
   // Store the columns widths in localStorage
-  const [columnsWidth, setColumnsWidth] = useAlignColumnsWidth();
+  const [columnsWidth, setColumnsWidth] = useLocalStorage<DataTableColumnWidth[]>({
+    key: `${key}-columns-width`,
+    defaultValue: defaultColumnsWidth as DataTableColumnWidth[],
+    getInitialValueInEffect,
+  });
 
   // we won't use the "remove" function from useLocalStorage() because
   // we got issue with rendering