From 83b47d7093708f9250ee4e53cba4d828fe5b15ab Mon Sep 17 00:00:00 2001 From: Giovambattista Fazioli Date: Sun, 16 Jun 2024 14:59:32 +0200 Subject: [PATCH 1/6] =?UTF-8?q?=E2=9C=A8=20adds=20ability=20to=20handle=20?= =?UTF-8?q?dynamic=20columns?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - fix #596 --- package/hooks/useDataTableColumns.ts | 133 ++++++++++++++++++++++++--- 1 file changed, 118 insertions(+), 15 deletions(-) diff --git a/package/hooks/useDataTableColumns.ts b/package/hooks/useDataTableColumns.ts index 0a23e0fb6..0440675eb 100644 --- a/package/hooks/useDataTableColumns.ts +++ b/package/hooks/useDataTableColumns.ts @@ -37,6 +37,121 @@ 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)) || []; @@ -55,25 +170,13 @@ export const useDataTableColumns = ({ })); // Store the columns order in localStorage - const [columnsOrder, setColumnsOrder] = useLocalStorage({ - key: `${key}-columns-order`, - defaultValue: defaultColumnsOrder as string[], - getInitialValueInEffect, - }); + const [columnsOrder, setColumnsOrder] = useAlignColumnsOrder(); // Store the columns toggle in localStorage - const [columnsToggle, setColumnsToggle] = useLocalStorage({ - key: `${key}-columns-toggle`, - defaultValue: defaultColumnsToggle as DataTableColumnToggle[], - getInitialValueInEffect, - }); + const [columnsToggle, setColumnsToggle] = useAlignColumnsToggle(); // Store the columns widths in localStorage - const [columnsWidth, setColumnsWidth] = useLocalStorage({ - 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 From e41a799e9e81106146e3993cd696e78f6cf737cc Mon Sep 17 00:00:00 2001 From: Giovambattista Fazioli Date: Sun, 16 Jun 2024 15:14:39 +0200 Subject: [PATCH 2/6] =?UTF-8?q?=E2=9C=A8=20adds=20dynamic=20column=20examp?= =?UTF-8?q?le?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DynamicColumnExample.tsx | 109 ++++++++++++++++++ 1 file changed, 109 insertions(+) create mode 100644 app/examples/column-dragging-and-toggling/DynamicColumnExample.tsx diff --git a/app/examples/column-dragging-and-toggling/DynamicColumnExample.tsx b/app/examples/column-dragging-and-toggling/DynamicColumnExample.tsx new file mode 100644 index 000000000..4b5000efe --- /dev/null +++ b/app/examples/column-dragging-and-toggling/DynamicColumnExample.tsx @@ -0,0 +1,109 @@ +'use client'; + +import { Button, Group, Stack, Text } from '@mantine/core'; +import { IconBuildingCommunity, IconBuildingSkyscraper, IconMap, IconRoadSign } from '@tabler/icons-react'; +import { DataTable, useDataTableColumns } from '__PACKAGE__'; +import { useState } from 'react'; +import { companies } from '~/data'; +import { DataTableColumn } from '~/dist'; + +export default function DynamicColumnExample() { + const key = 'dynamic-column-example'; + + const [columns, setColumns] = useState([ + { + accessor: 'name', + title: ( + + + + Company + + + ), + width: '40%', + toggleable: true, + defaultToggle: false, + }, + { + accessor: 'streetAddress', + title: ( + + + + Street Address + + + ), + width: '60%', + toggleable: true, + }, + { + accessor: 'city', + title: ( + + + + City + + + ), + width: 160, + toggleable: true, + }, + { + accessor: 'state', + textAlign: 'right', + title: ( + + + + ), + }, + ]); + + const { effectiveColumns, resetColumnsToggle } = useDataTableColumns({ + key, + columns, + }); + + // add or remove the whole record with missionStatement accessor + function toggleColumnMissionStatement() { + const newColumns = columns.filter((col) => col.accessor !== 'missionStatement'); + if (columns.length === newColumns.length) { + newColumns.push({ + accessor: 'missionStatement', + title: ( + + + + missionStatement + + + ), + width: '40%', + toggleable: true, + defaultToggle: true, + }); + } + setColumns(newColumns); + } + + return ( + + + + + + + + + + ); +} From f5e51002a86370c69e8f9502eef2a6dc1a0eab0e Mon Sep 17 00:00:00 2001 From: Giovambattista Fazioli Date: Sun, 16 Jun 2024 15:14:53 +0200 Subject: [PATCH 3/6] =?UTF-8?q?=F0=9F=93=9D=20Adds=20docs=20for=20dynamic?= =?UTF-8?q?=20column=20example?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/examples/column-dragging-and-toggling/page.tsx | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/app/examples/column-dragging-and-toggling/page.tsx b/app/examples/column-dragging-and-toggling/page.tsx index df24ed736..dd666725c 100644 --- 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'; @@ -24,6 +25,7 @@ export default async function DraggingExamplePage() { 'DraggingExample.tsx': readCodeFile(`${PATH}/DraggingExample.tsx`), 'DraggingTogglingResetExample.tsx': readCodeFile(`${PATH}/DraggingTogglingResetExample.tsx`), 'TogglingExample.tsx': readCodeFile(`${PATH}/TogglingExample.tsx`), + 'DynamicColumnExample.tsx': readCodeFile(`${PATH}/DynamicColumnExample.tsx`), 'DraggingTogglingComplexExample.tsx': readCodeFile(`${PATH}/DraggingTogglingComplexExample.tsx`), }); @@ -85,9 +87,19 @@ export default async function DraggingExamplePage() { You may define which columns will be toggled by default by setting the defaultToggle property to{' '} false. + + + + 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. + + + + + From f6ba8bed61e3b76386829765a9e1dd45f008fb45 Mon Sep 17 00:00:00 2001 From: Ionut-Cristian Florescu Date: Tue, 18 Jun 2024 10:33:27 +0300 Subject: [PATCH 4/6] Update deps --- package.json | 8 ++-- yarn.lock | 116 +++++++++++++++++++++++++-------------------------- 2 files changed, 62 insertions(+), 62 deletions(-) diff --git a/package.json b/package.json index b2531de41..4249a702b 100644 --- a/package.json +++ b/package.json @@ -82,13 +82,13 @@ "@mantine/modals": "^7.10.2", "@mantine/notifications": "^7.10.2", "@tabler/icons-react": "^3.6.0", - "@tanstack/react-query": "^5.45.0", + "@tanstack/react-query": "^5.45.1", "@types/lodash": "^4.17.5", - "@types/node": "^20.14.2", + "@types/node": "^20.14.5", "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", - "@typescript-eslint/eslint-plugin": "^7.13.0", - "@typescript-eslint/parser": "^7.13.0", + "@typescript-eslint/eslint-plugin": "^7.13.1", + "@typescript-eslint/parser": "^7.13.1", "clsx": "^2.1.1", "cssnano": "^7.0.2", "dayjs": "^1.11.11", diff --git a/yarn.lock b/yarn.lock index b15e64ae8..253805bcb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1844,10 +1844,10 @@ resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.45.0.tgz#47a662d311c2588867341238960ec21dc7f0714e" integrity sha512-RVfIZQmFUTdjhSAAblvueimfngYyfN6HlwaJUPK71PKd7yi43Vs1S/rdimmZedPWX/WGppcq/U1HOj7O7FwYxw== -"@tanstack/react-query@^5.45.0": - version "5.45.0" - resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.45.0.tgz#6806bb7db1190840c2a7a727cdf192e0d7662a0a" - integrity sha512-y272cKRJp1BvehrWG4ashOBuqBj1Qm2O6fgYJ9LYSHrLdsCXl74GbSVjUQTReUdHuRIl9cEOoyPa6HYag400lw== +"@tanstack/react-query@^5.45.1": + version "5.45.1" + resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.45.1.tgz#a0ac6bb89b4a2c2b0251f6647a0a370d86f05347" + integrity sha512-mYYfJujKg2kxmkRRjA6nn4YKG3ITsKuH22f1kteJ5IuVQqgKUgbaSQfYwVP0gBS05mhwxO03HVpD0t7BMN7WOA== dependencies: "@tanstack/query-core" "5.45.0" @@ -1904,10 +1904,10 @@ dependencies: undici-types "~5.26.4" -"@types/node@^20.14.2": - version "20.14.2" - resolved "https://registry.yarnpkg.com/@types/node/-/node-20.14.2.tgz#a5f4d2bcb4b6a87bffcaa717718c5a0f208f4a18" - integrity sha512-xyu6WAMVwv6AKFLB+e/7ySZVr/0zLCzOa7rSpq6jNwpqOrUbcACDWC+53d4n2QHOnDou0fbIsg8wZu/sxrnI4Q== +"@types/node@^20.14.5": + version "20.14.5" + resolved "https://registry.yarnpkg.com/@types/node/-/node-20.14.5.tgz#fe35e3022ebe58b8f201580eb24e1fcfc0f2487d" + integrity sha512-aoRR+fJkZT2l0aGOJhuA8frnCSoNX6W7U2mpNq63+BxBIj5BQFt8rHy627kijCmm63ijdSdwvGgpUsU6MBsZZA== dependencies: undici-types "~5.26.4" @@ -1949,16 +1949,16 @@ resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.7.tgz#baccb07a970b91707df3a3e8ba6896c57ead2d11" integrity sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw== -"@typescript-eslint/eslint-plugin@^7.13.0": - version "7.13.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.13.0.tgz#3cdeb5d44d051b21a9567535dd90702b2a42c6ff" - integrity sha512-FX1X6AF0w8MdVFLSdqwqN/me2hyhuQg4ykN6ZpVhh1ij/80pTvDKclX1sZB9iqex8SjQfVhwMKs3JtnnMLzG9w== +"@typescript-eslint/eslint-plugin@^7.13.1": + version "7.13.1" + resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.13.1.tgz#cdc521c8bca38b55585cf30db787fb2abad3f9fd" + integrity sha512-kZqi+WZQaZfPKnsflLJQCz6Ze9FFSMfXrrIOcyargekQxG37ES7DJNpJUE9Q/X5n3yTIP/WPutVNzgknQ7biLg== dependencies: "@eslint-community/regexpp" "^4.10.0" - "@typescript-eslint/scope-manager" "7.13.0" - "@typescript-eslint/type-utils" "7.13.0" - "@typescript-eslint/utils" "7.13.0" - "@typescript-eslint/visitor-keys" "7.13.0" + "@typescript-eslint/scope-manager" "7.13.1" + "@typescript-eslint/type-utils" "7.13.1" + "@typescript-eslint/utils" "7.13.1" + "@typescript-eslint/visitor-keys" "7.13.1" graphemer "^1.4.0" ignore "^5.3.1" natural-compare "^1.4.0" @@ -1975,24 +1975,24 @@ "@typescript-eslint/visitor-keys" "7.2.0" debug "^4.3.4" -"@typescript-eslint/parser@^7.13.0": - version "7.13.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-7.13.0.tgz#9489098d68d57ad392f507495f2b82ce8b8f0a6b" - integrity sha512-EjMfl69KOS9awXXe83iRN7oIEXy9yYdqWfqdrFAYAAr6syP8eLEFI7ZE4939antx2mNgPRW/o1ybm2SFYkbTVA== +"@typescript-eslint/parser@^7.13.1": + version "7.13.1" + resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-7.13.1.tgz#fac57811b3e519185f7259bac312291f7b9c4e72" + integrity sha512-1ELDPlnLvDQ5ybTSrMhRTFDfOQEOXNM+eP+3HT/Yq7ruWpciQw+Avi73pdEbA4SooCawEWo3dtYbF68gN7Ed1A== dependencies: - "@typescript-eslint/scope-manager" "7.13.0" - "@typescript-eslint/types" "7.13.0" - "@typescript-eslint/typescript-estree" "7.13.0" - "@typescript-eslint/visitor-keys" "7.13.0" + "@typescript-eslint/scope-manager" "7.13.1" + "@typescript-eslint/types" "7.13.1" + "@typescript-eslint/typescript-estree" "7.13.1" + "@typescript-eslint/visitor-keys" "7.13.1" debug "^4.3.4" -"@typescript-eslint/scope-manager@7.13.0": - version "7.13.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-7.13.0.tgz#6927d6451537ce648c6af67a2327378d4cc18462" - integrity sha512-ZrMCe1R6a01T94ilV13egvcnvVJ1pxShkE0+NDjDzH4nvG1wXpwsVI5bZCvE7AEDH1mXEx5tJSVR68bLgG7Dng== +"@typescript-eslint/scope-manager@7.13.1": + version "7.13.1" + resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-7.13.1.tgz#c08041206904bf36f0e6997efdb0ca775e0c452e" + integrity sha512-adbXNVEs6GmbzaCpymHQ0MB6E4TqoiVbC0iqG3uijR8ZYfpAXMGttouQzF4Oat3P2GxDVIrg7bMI/P65LiQZdg== dependencies: - "@typescript-eslint/types" "7.13.0" - "@typescript-eslint/visitor-keys" "7.13.0" + "@typescript-eslint/types" "7.13.1" + "@typescript-eslint/visitor-keys" "7.13.1" "@typescript-eslint/scope-manager@7.2.0": version "7.2.0" @@ -2002,33 +2002,33 @@ "@typescript-eslint/types" "7.2.0" "@typescript-eslint/visitor-keys" "7.2.0" -"@typescript-eslint/type-utils@7.13.0": - version "7.13.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-7.13.0.tgz#4587282b5227a23753ea8b233805ecafc3924c76" - integrity sha512-xMEtMzxq9eRkZy48XuxlBFzpVMDurUAfDu5Rz16GouAtXm0TaAoTFzqWUFPPuQYXI/CDaH/Bgx/fk/84t/Bc9A== +"@typescript-eslint/type-utils@7.13.1": + version "7.13.1" + resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-7.13.1.tgz#63bec3f1fb43cf0bc409cbdb88ef96d118ca8632" + integrity sha512-aWDbLu1s9bmgPGXSzNCxELu+0+HQOapV/y+60gPXafR8e2g1Bifxzevaa+4L2ytCWm+CHqpELq4CSoN9ELiwCg== dependencies: - "@typescript-eslint/typescript-estree" "7.13.0" - "@typescript-eslint/utils" "7.13.0" + "@typescript-eslint/typescript-estree" "7.13.1" + "@typescript-eslint/utils" "7.13.1" debug "^4.3.4" ts-api-utils "^1.3.0" -"@typescript-eslint/types@7.13.0": - version "7.13.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-7.13.0.tgz#0cca95edf1f1fdb0cfe1bb875e121b49617477c5" - integrity sha512-QWuwm9wcGMAuTsxP+qz6LBBd3Uq8I5Nv8xb0mk54jmNoCyDspnMvVsOxI6IsMmway5d1S9Su2+sCKv1st2l6eA== +"@typescript-eslint/types@7.13.1": + version "7.13.1" + resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-7.13.1.tgz#787db283bd0b58751094c90d5b58bbf5e9fc9bd8" + integrity sha512-7K7HMcSQIAND6RBL4kDl24sG/xKM13cA85dc7JnmQXw2cBDngg7c19B++JzvJHRG3zG36n9j1i451GBzRuHchw== "@typescript-eslint/types@7.2.0": version "7.2.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-7.2.0.tgz#0feb685f16de320e8520f13cca30779c8b7c403f" integrity sha512-XFtUHPI/abFhm4cbCDc5Ykc8npOKBSJePY3a3s+lwumt7XWJuzP5cZcfZ610MIPHjQjNsOLlYK8ASPaNG8UiyA== -"@typescript-eslint/typescript-estree@7.13.0": - version "7.13.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-7.13.0.tgz#4cc24fc155088ebf3b3adbad62c7e60f72c6de1c" - integrity sha512-cAvBvUoobaoIcoqox1YatXOnSl3gx92rCZoMRPzMNisDiM12siGilSM4+dJAekuuHTibI2hVC2fYK79iSFvWjw== +"@typescript-eslint/typescript-estree@7.13.1": + version "7.13.1" + resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-7.13.1.tgz#3412841b130e070db2f675e3d9b8cb1ae49e1c3f" + integrity sha512-uxNr51CMV7npU1BxZzYjoVz9iyjckBduFBP0S5sLlh1tXYzHzgZ3BR9SVsNed+LmwKrmnqN3Kdl5t7eZ5TS1Yw== dependencies: - "@typescript-eslint/types" "7.13.0" - "@typescript-eslint/visitor-keys" "7.13.0" + "@typescript-eslint/types" "7.13.1" + "@typescript-eslint/visitor-keys" "7.13.1" debug "^4.3.4" globby "^11.1.0" is-glob "^4.0.3" @@ -2050,22 +2050,22 @@ semver "^7.5.4" ts-api-utils "^1.0.1" -"@typescript-eslint/utils@7.13.0": - version "7.13.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-7.13.0.tgz#f84e7e8aeceae945a9a3f40d077fd95915308004" - integrity sha512-jceD8RgdKORVnB4Y6BqasfIkFhl4pajB1wVxrF4akxD2QPM8GNYjgGwEzYS+437ewlqqrg7Dw+6dhdpjMpeBFQ== +"@typescript-eslint/utils@7.13.1": + version "7.13.1" + resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-7.13.1.tgz#611083379caa0d3a2c09d126c65065a3e4337ba2" + integrity sha512-h5MzFBD5a/Gh/fvNdp9pTfqJAbuQC4sCN2WzuXme71lqFJsZtLbjxfSk4r3p02WIArOF9N94pdsLiGutpDbrXQ== dependencies: "@eslint-community/eslint-utils" "^4.4.0" - "@typescript-eslint/scope-manager" "7.13.0" - "@typescript-eslint/types" "7.13.0" - "@typescript-eslint/typescript-estree" "7.13.0" + "@typescript-eslint/scope-manager" "7.13.1" + "@typescript-eslint/types" "7.13.1" + "@typescript-eslint/typescript-estree" "7.13.1" -"@typescript-eslint/visitor-keys@7.13.0": - version "7.13.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-7.13.0.tgz#2eb7ce8eb38c2b0d4a494d1fe1908e7071a1a353" - integrity sha512-nxn+dozQx+MK61nn/JP+M4eCkHDSxSLDpgE3WcQo0+fkjEolnaB5jswvIKC4K56By8MMgIho7f1PVxERHEo8rw== +"@typescript-eslint/visitor-keys@7.13.1": + version "7.13.1" + resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-7.13.1.tgz#9c229a795a919db61f2d7f2337ef584ac05fbe96" + integrity sha512-k/Bfne7lrP7hcb7m9zSsgcBmo+8eicqqfNAJ7uUY+jkTFpKeH2FSkWpFRtimBxgkyvqfu9jTPRbYOvud6isdXA== dependencies: - "@typescript-eslint/types" "7.13.0" + "@typescript-eslint/types" "7.13.1" eslint-visitor-keys "^3.4.3" "@typescript-eslint/visitor-keys@7.2.0": From 4417c0b4afd95ee3b20ce2b12d96acee887567a2 Mon Sep 17 00:00:00 2001 From: Ionut-Cristian Florescu Date: Tue, 18 Jun 2024 10:39:37 +0300 Subject: [PATCH 5/6] Minor cosmetic improvements to dynamic column example --- .../column-dragging-and-toggling/DynamicColumnExample.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/examples/column-dragging-and-toggling/DynamicColumnExample.tsx b/app/examples/column-dragging-and-toggling/DynamicColumnExample.tsx index 4b5000efe..1880f63af 100644 --- a/app/examples/column-dragging-and-toggling/DynamicColumnExample.tsx +++ b/app/examples/column-dragging-and-toggling/DynamicColumnExample.tsx @@ -74,10 +74,10 @@ export default function DynamicColumnExample() { newColumns.push({ accessor: 'missionStatement', title: ( - + - missionStatement + Mission Statement ), @@ -92,7 +92,7 @@ export default function DynamicColumnExample() { return ( - + Date: Tue, 18 Jun 2024 10:43:24 +0300 Subject: [PATCH 6/6] Update package version & changelog --- CHANGELOG.md | 5 +++++ package.json | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f2a61be81..db8e07693 100644 --- 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.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) +- Update dev dependencies + ## 7.10.2 (2024-06-15) - Update dev dependencies to ensure compatibility with Mantine 7.10.2 and Next.js 14.2.4 diff --git a/package.json b/package.json index 4249a702b..e0314b3cc 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mantine-datatable", - "version": "7.10.2", + "version": "7.10.3", "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",