Merge pull request #510 from icflorescu/next

Fix default column toggling & a few updates
icflorescu · Jan 10, 2024 · c91e0d1 · c91e0d1
2 parents 9d8c4eb + a8724be
commit c91e0d1
Show file tree

Hide file tree

Showing 8 changed files with 133 additions and 119 deletions.
diff --git a/.github/workflows/publish-and-deploy.yml b/.github/workflows/publish-and-deploy.yml
@@ -27,7 +27,7 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
       - name: Setup Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: '20'
           cache: yarn
@@ -48,11 +48,11 @@ jobs:
         env:
           GITHUB_PAGES: 'TRUE'
       - name: Upload pages artifact
-        uses: actions/upload-pages-artifact@v2
+        uses: actions/upload-pages-artifact@v3
         with:
           path: ./out
       - name: Upload package artifact
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: package
           path: |
@@ -61,19 +61,17 @@ jobs:
             ./README.md
             ./LICENSE
 
-            # NPM publishing job
-
   # NPM publishing job
   publish:
     environment:
       name: npm-registry
     runs-on: ubuntu-latest
     needs: build
     steps:
-      - uses: actions/download-artifact@v3
+      - uses: actions/download-artifact@v4
         with:
           name: package
-      - uses: JS-DevTools/npm-publish@v2
+      - uses: JS-DevTools/npm-publish@v3
         with:
           token: ${{ secrets.NPM_TOKEN }}
 
@@ -87,4 +85,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v2
+        uses: actions/deploy-pages@v4
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.4.2 (2024-01-10)
+
+- Improve default column toggling behavior
+
 ## 7.4.1 (2024-01-08)
 
 - Implement `pinFirstColumn` feature

diff --git a/app/examples/column-dragging-and-toggling/TogglingExample.tsx b/app/examples/column-dragging-and-toggling/TogglingExample.tsx
@@ -10,7 +10,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', textAlign: 'right' },

diff --git a/app/examples/column-dragging-and-toggling/page.tsx b/app/examples/column-dragging-and-toggling/page.tsx
@@ -56,8 +56,12 @@ export default async function DraggingExamplePage() {
       <Txt idea>
         The default order of the columns is the order in which they are defined in the <Code>columns</Code> prop.
       </Txt>
-
       <PageSubtitle value="Column toggling" />
+      <Txt>
+        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.
+      </Txt>
       <TogglingExample />
       <Txt>
         In order to enable <strong>column toggling</strong> you’ll have to:
@@ -75,8 +79,9 @@ export default async function DraggingExamplePage() {
         </li>
       </UnorderedList>
       <CodeBlock code={code['TogglingExample.tsx']} />
-      <Txt idea>
-        The default toggled columns are the ones with <Code>defaultToggle: true</Code> property.
+      <Txt info>
+        You may define which columns will be toggled by default by setting the <Code>defaultToggle</Code> property to{' '}
+        <Code>false</Code>.
       </Txt>
       <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.4.1",
+  "version": "7.4.2",
   "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,20 +75,20 @@
     "@ducanh2912/next-pwa": "^10.1.0",
     "@faker-js/faker": "^8.3.1",
     "@formkit/auto-animate": "^0.8.1",
-    "@mantine/code-highlight": "^7.4.0",
-    "@mantine/core": "^7.4.0",
-    "@mantine/dates": "^7.4.0",
-    "@mantine/hooks": "^7.4.0",
-    "@mantine/modals": "^7.4.0",
-    "@mantine/notifications": "^7.4.0",
+    "@mantine/code-highlight": "^7.4.1",
+    "@mantine/core": "^7.4.1",
+    "@mantine/dates": "^7.4.1",
+    "@mantine/hooks": "^7.4.1",
+    "@mantine/modals": "^7.4.1",
+    "@mantine/notifications": "^7.4.1",
     "@tabler/icons-react": "^2.45.0",
     "@tanstack/react-query": "^5.17.9",
     "@types/lodash": "^4.14.202",
-    "@types/node": "^20.10.7",
+    "@types/node": "^20.10.8",
     "@types/react": "^18.2.47",
     "@types/react-dom": "^18.2.18",
-    "@typescript-eslint/eslint-plugin": "^6.18.0",
-    "@typescript-eslint/parser": "^6.18.0",
+    "@typescript-eslint/eslint-plugin": "^6.18.1",
+    "@typescript-eslint/parser": "^6.18.1",
     "clsx": "^2.1.0",
     "cssnano": "^6.0.3",
     "dayjs": "^1.11.10",

diff --git a/package/DataTableHeaderCell.tsx b/package/DataTableHeaderCell.tsx
@@ -221,7 +221,7 @@ export 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/hooks/useDataTableColumns.ts b/package/hooks/useDataTableColumns.ts
@@ -3,7 +3,8 @@ import { useMemo } from 'react';
 import type { DataTableColumn } from '../types/DataTableColumn';
 
 export type DataTableColumnToggle = {
-  accessor: string | undefined;
+  accessor: string;
+  title: string | undefined;
   defaultToggle: boolean;
   toggleable: boolean;
   toggled: boolean;
@@ -33,16 +34,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,
+      title: column.title,
       defaultToggle: column.defaultToggle || true,
       toggleable: column.toggleable,
-      toggled: column.defaultToggle || true,
+      toggled: column.defaultToggle === undefined ? true : column.defaultToggle,
     }));
 
   // Store the columns order in localStorage
@@ -59,7 +61,7 @@ export const useDataTableColumns = <T>({
     getInitialValueInEffect: true,
   });
 
-  // Store the columns with in localStorage
+  // Store the columns widths in localStorage
   const [columnsWidth, setColumnsWidth] = useLocalStorage<DataTableColumnWidth[]>({
     key: `${key}-columns-width`,
     defaultValue: defaultColumnsWidth as DataTableColumnWidth[],
@@ -70,7 +72,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[]);
 
@@ -81,13 +85,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) => {
@@ -96,7 +103,7 @@ export const useDataTableColumns = <T>({
       };
     });
 
-    return newWith;
+    return newWidths;
   }, [columns, columnsOrder, columnsToggle, columnsWidth]);
 
   const setColumnWidth = (accessor: string, width: string | number) => {