Merge pull request #12 from icflorescu/next

Fix default toggling and double click on column to reset the width
icflorescu · Jan 10, 2024 · b4b7b58 · b4b7b58
2 parents 8830563 + b0cad84
commit b4b7b58
Show file tree

Hide file tree

Showing 11 changed files with 383 additions and 307 deletions.
diff --git a/.github/workflows/publish-and-deploy.yml b/.github/workflows/publish-and-deploy.yml
@@ -65,9 +65,10 @@ jobs:
       - uses: actions/download-artifact@v3
         with:
           name: package
-      - uses: JS-DevTools/npm-publish@v2
+      - uses: JS-DevTools/npm-publish@v3
         with:
           token: ${{ secrets.NPM_TOKEN }}
+          tag: v6
 
   # Pages deployment job
   deploy:

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.7 (2024-01-10)
+
+- Fix default toggling and double click on column to reset the width (see PR [#11](https://github.com/icflorescu/mantine-datatable-v6/pull/11) by [Giovambattista Fazioli](https://github.com/gfazioli))
+
 ## 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))

diff --git a/docs/examples/TogglingExample.tsx b/docs/examples/TogglingExample.tsx
@@ -8,7 +8,7 @@ export default function TogglingExample() {
   const { effectiveColumns, resetColumnsToggle } = useDataTableColumns({
     key,
     columns: [
-      { accessor: 'name', width: '40%', toggleable: true },
+      { accessor: 'name', width: '40%', toggleable: true, defaultToggle: false },
       { accessor: 'streetAddress', width: '60%', toggleable: true },
       { accessor: 'city', width: 160, toggleable: true },
       { accessor: 'state' },

diff --git a/docs/package.json b/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mantine-datatable-docs",
-  "version": "6.0.6",
+  "version": "6.0.7",
   "description": "Docs website for mantine-datatable; see ../package/package.json for more info",
   "private": true,
   "scripts": {
@@ -10,8 +10,8 @@
   },
   "dependencies": {
     "@docsearch/react": "^3.5.2",
-    "@ducanh2912/next-pwa": "^10.0.0",
-    "@emotion/react": "^11.11.1",
+    "@ducanh2912/next-pwa": "^10.1.0",
+    "@emotion/react": "^11.11.3",
     "@emotion/server": "^11.11.0",
     "@faker-js/faker": "^8.3.1",
     "@formkit/auto-animate": "^0.8.1",
@@ -22,7 +22,7 @@
     "@mantine/next": "^6.0.21",
     "@mantine/notifications": "^6.0.21",
     "@mantine/prism": "^6.0.21",
-    "@tabler/icons-react": "^2.44.0",
+    "@tabler/icons-react": "^2.45.0",
     "@tanstack/react-query": "^4.36.1",
     "dayjs": "^1.11.10",
     "lodash": "^4.17.21",
@@ -34,8 +34,8 @@
   },
   "devDependencies": {
     "@types/lodash": "^4.14.202",
-    "@types/node": "^20.10.5",
-    "@types/react": "^18.2.45",
+    "@types/node": "^20.10.8",
+    "@types/react": "^18.2.47",
     "typescript": "^5.3.3",
     "webpack": "^5.89.0"
   }

diff --git a/docs/pages/examples/dragging-toggling.tsx b/docs/pages/examples/dragging-toggling.tsx
@@ -53,6 +53,12 @@ export default function Page({ code }: InferGetStaticPropsType<typeof getStaticP
 
       <PageSubtitle value="Toggling" />
 
+      <PageText>
+        In the below example you can toggle the first 3 columns. The last column is not toggleable and will always be
+        visible. The first column is toggled off by default. Click with right mouse button on the header to select the
+        columns you want to toggle.
+      </PageText>
+
       <TogglingExample />
 
       <PageText>
@@ -72,6 +78,11 @@ export default function Page({ code }: InferGetStaticPropsType<typeof getStaticP
 
       <CodeBlock language="typescript" content={code['toggling']} />
 
+      <PageText info>
+        You may define which columns will be toggled by default by setting the <Code>defaultToggle: false</Code>{' '}
+        property
+      </PageText>
+
       <PageSubtitle value="Dragging & Toggling with context menu Reset" />
       <DraggingTogglingResetExample />
       <CodeBlock language="typescript" content={code['reset']} />

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mantine-datatable-turborepo",
-  "version": "6.0.6",
+  "version": "6.0.7",
   "description": "Monorepo for mantine-datatable; see package/package.json for more info",
   "private": true,
   "workspaces": [
@@ -22,21 +22,21 @@
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
     "@faker-js/faker": "^8.3.1",
-    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/jest-dom": "^6.2.0",
     "@testing-library/react": "^14.1.2",
     "@testing-library/react-hooks": "^8.0.1",
-    "@testing-library/user-event": "^14.5.1",
+    "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.11",
-    "@typescript-eslint/eslint-plugin": "^6.15.0",
-    "@typescript-eslint/parser": "^6.15.0",
+    "@typescript-eslint/eslint-plugin": "^6.18.1",
+    "@typescript-eslint/parser": "^6.18.1",
     "babel-jest": "^29.7.0",
     "eslint": "^8.56.0",
     "eslint-config-next": "^14.0.4",
     "eslint-config-prettier": "^9.1.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "prettier": "^3.1.1",
-    "turbo": "^1.11.2",
+    "turbo": "^1.11.3",
     "typescript": "^5.3.3"
   },
   "engines": {

diff --git a/package/DataTableHeaderCell.tsx b/package/DataTableHeaderCell.tsx
@@ -291,7 +291,7 @@ export default function DataTableHeaderCell<T>({
                     <Group key={column.accessor}>
                       <Checkbox
                         size="xs"
-                        label={column.accessor}
+                        label={column.title ?? humanize(column.accessor)}
                         checked={column.toggled}
                         onChange={(e) => {
                           setColumnsToggle(

diff --git a/package/DataTableResizableHeaderHandle.tsx b/package/DataTableResizableHeaderHandle.tsx
@@ -85,7 +85,7 @@ export const DataTableResizableHeaderHandle = (props: DataTableResizableHeaderHa
 
     setColumnWidth(accessor, columnRef.current.style.width as string);
 
-    columnRef.current.style.width = '';
+    columnRef.current.style.width = 'initial';
 
     setDeltaX(0);
   };

diff --git a/package/hooks.ts b/package/hooks.ts
@@ -108,7 +108,8 @@ export function useElementOuterSize<T extends HTMLElement>() {
 }
 
 export type DataTableColumnToggle = {
-  accessor: string | undefined;
+  accessor: string;
+  title: string | undefined;
   defaultToggle: boolean;
   toggleable: boolean;
   toggled: boolean;
@@ -128,16 +129,17 @@ export const useDataTableColumns = <T>({
 
   // create an array of object with key = accessor and value = width
   const defaultColumnsWidth =
-    (columns && columns.map((column) => ({ [column.accessor]: column.width ?? 'auto' }))) || [];
+    (columns && columns.map((column) => ({ [column.accessor]: column.width ?? 'initial' }))) || [];
 
   // Default columns id toggled is the array of columns which have the toggleable property set to true
   const defaultColumnsToggle =
     columns &&
     columns.map((column) => ({
       accessor: column.accessor,
       defaultToggle: column.defaultToggle || true,
+      title: column.title,
       toggleable: column.toggleable,
-      toggled: column.defaultToggle || true,
+      toggled: column.defaultToggle === undefined ? true : column.defaultToggle,
     }));
 
   // Store the columns order in localStorage
@@ -154,7 +156,7 @@ export const useDataTableColumns = <T>({
     getInitialValueInEffect: true,
   });
 
-  // Store the columns with in localStorage
+  // Store the columns width in localStorage
   const [columnsWidth, setColumnsWidth] = useLocalStorage<DataTableColumnWidth[]>({
     key: `${key}-columns-width`,
     defaultValue: defaultColumnsWidth as DataTableColumnWidth[],
@@ -165,7 +167,9 @@ export const useDataTableColumns = <T>({
   // we got issue with rendering
   const resetColumnsOrder = () => setColumnsOrder(defaultColumnsOrder as string[]);
 
-  const resetColumnsToggle = () => setColumnsToggle(defaultColumnsToggle as DataTableColumnToggle[]);
+  const resetColumnsToggle = () => {
+    setColumnsToggle(defaultColumnsToggle as DataTableColumnToggle[]);
+  };
 
   const resetColumnsWidth = () => setColumnsWidth(defaultColumnsWidth as DataTableColumnWidth[]);
 
@@ -176,13 +180,16 @@ export const useDataTableColumns = <T>({
 
     const result = columnsOrder
       .map((order) => columns.find((column) => column.accessor === order))
-      .filter((column) => {
-        return columnsToggle.find((toggle) => {
-          return toggle.accessor === column?.accessor;
-        })?.toggled;
-      });
-
-    const newWith = result.map((column) => {
+      .map((column) => {
+        return {
+          ...column,
+          hidden: !columnsToggle.find((toggle) => {
+            return toggle.accessor === column?.accessor;
+          })?.toggled,
+        };
+      }) as DataTableColumn<T>[];
+
+    const newWidths = result.map((column) => {
       return {
         ...column,
         width: columnsWidth.find((width) => {
@@ -191,7 +198,7 @@ export const useDataTableColumns = <T>({
       };
     });
 
-    return newWith;
+    return newWidths;
   }, [columns, columnsOrder, columnsToggle, columnsWidth]);
 
   const setColumnWidth = (accessor: string, width: string | number) => {

diff --git a/package/package.json b/package/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mantine-datatable",
-  "version": "6.0.6",
+  "version": "6.0.7",
   "description": "The dependency-free datatable component for Mantine UI, featuring asynchronous data loading support, pagination, multple rows selection, column sorting, custom cell data rendering, row context menu, row expansion and more",
   "keywords": [
     "mantine",
@@ -58,10 +58,10 @@
   "devDependencies": {
     "@mantine/core": "^6.0.21",
     "@mantine/hooks": "^6.0.21",
-    "@tabler/icons-react": "^2.44.0",
-    "@types/react": "^18.2.45",
+    "@tabler/icons-react": "^2.45.0",
+    "@types/react": "^18.2.47",
     "@types/react-dom": "^18.2.18",
-    "esbuild": "^0.19.10",
+    "esbuild": "^0.19.11",
     "react": "^18.2.0",
     "typescript": "^5.3.3"
   },