From 5527ef44c80b9e133e34f7e77fafdfde45728b3d Mon Sep 17 00:00:00 2001 From: Ionut-Cristian Florescu Date: Mon, 24 Jun 2024 21:09:59 +0300 Subject: [PATCH 1/2] Revert #603 --- .../column-dragging-and-toggling/page.tsx | 6 +- package/hooks/useDataTableColumns.ts | 133 ++---------------- 2 files changed, 18 insertions(+), 121 deletions(-) diff --git a/app/examples/column-dragging-and-toggling/page.tsx b/app/examples/column-dragging-and-toggling/page.tsx index dd666725c..f80555ded 100644 --- 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() { false. - + {/* TODO add this back after fixing issue https://github.com/icflorescu/mantine-datatable/issues/605 */} + {/* 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. - + */} diff --git a/package/hooks/useDataTableColumns.ts b/package/hooks/useDataTableColumns.ts index 0440675eb..0a23e0fb6 100644 --- a/package/hooks/useDataTableColumns.ts +++ b/package/hooks/useDataTableColumns.ts @@ -37,121 +37,6 @@ export const useDataTableColumns = ({ */ getInitialValueInEffect?: boolean; }) => { - // align order - function alignColumnsOrder(columnsOrder: string[], columns: DataTableColumn[]) { - 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(columnsToggle: DataTableColumnToggle[], columns: DataTableColumn[]) { - 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(columnsWidth: DataTableColumnWidth[], columns: DataTableColumn[]) { - 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({ - 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({ - 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({ - 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 = ({ })); // Store the columns order in localStorage - const [columnsOrder, setColumnsOrder] = useAlignColumnsOrder(); + const [columnsOrder, setColumnsOrder] = useLocalStorage({ + key: `${key}-columns-order`, + defaultValue: defaultColumnsOrder as string[], + getInitialValueInEffect, + }); // Store the columns toggle in localStorage - const [columnsToggle, setColumnsToggle] = useAlignColumnsToggle(); + const [columnsToggle, setColumnsToggle] = useLocalStorage({ + key: `${key}-columns-toggle`, + defaultValue: defaultColumnsToggle as DataTableColumnToggle[], + getInitialValueInEffect, + }); // Store the columns widths in localStorage - const [columnsWidth, setColumnsWidth] = useAlignColumnsWidth(); + const [columnsWidth, setColumnsWidth] = useLocalStorage({ + key: `${key}-columns-width`, + defaultValue: defaultColumnsWidth as DataTableColumnWidth[], + getInitialValueInEffect, + }); // we won't use the "remove" function from useLocalStorage() because // we got issue with rendering From 53a6f2e840ba5664a8c0adfc79c349cb652ae50a Mon Sep 17 00:00:00 2001 From: Ionut-Cristian Florescu Date: Mon, 24 Jun 2024 21:12:11 +0300 Subject: [PATCH 2/2] Update changelog and bump package version --- CHANGELOG.md | 4 ++++ package.json | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index db8e07693..442e530c2 100644 --- 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/package.json b/package.json index e0314b3cc..7dd8dc089 100644 --- 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",