Merge pull request #638 from icflorescu/next

Fix #627, #614

Author: icflorescu

.github/workflows/publish-and-deploy.yml

@@ -29,7 +29,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '22.8'
+          node-version: '22.6'
           cache: yarn
       - name: Restore cache
         uses: actions/cache@v4

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.12.4 (2024-09-04)
+
+- Fix [#627](https://github.com/icflorescu/mantine-datatable/issues/627)
+- Fix [#614](https://github.com/icflorescu/mantine-datatable/issues/614)
+
 ## 7.12.3 (2024-09-04)
 
 - Fix [#625](https://github.com/icflorescu/mantine-datatable/issues/625) - after implementing row dragging support, inputs inside columns were losing focus

app/examples/column-dragging-and-toggling/DynamicColumnExample.tsx

@@ -2,10 +2,9 @@
 
 import { Button, Group, Stack, Text } from '@mantine/core';
 import { IconBuildingCommunity, IconBuildingSkyscraper, IconMap, IconRoadSign } from '@tabler/icons-react';
-import { DataTable, useDataTableColumns } from '__PACKAGE__';
+import { DataTable, DataTableColumn, useDataTableColumns } from '__PACKAGE__';
 import { useState } from 'react';
 import { companies } from '~/data';
-import { DataTableColumn } from '~/dist';
 
 export default function DynamicColumnExample() {
   const key = 'dynamic-column-example';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mantine-datatable",
-  "version": "7.12.3",
+  "version": "7.12.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",

package/DataTablePagination.tsx

@@ -50,14 +50,12 @@ export const DataTablePagination = forwardRef(function DataTablePagination(
   ref: ForwardedRef<HTMLDivElement>
 ) {
   let paginationTextValue: React.ReactNode;
-  if (fetching) {
-    paginationTextValue = loadingText;
-  } else if (!totalRecords) {
-    paginationTextValue = noRecordsText;
-  } else {
-    const from = (page! - 1) * recordsPerPage! + 1;
-    const to = from + recordsLength! - 1;
+  if (totalRecords) {
+    const from = (page - 1) * recordsPerPage + 1;
+    const to = from + (recordsLength || 0) - 1;
     paginationTextValue = paginationText!({ from, to, totalRecords });
+  } else {
+    paginationTextValue = fetching ? loadingText : noRecordsText;
   }
 
   const isAbovePaginationWrapBreakpoint = useMediaQueryStringOrFunction(

package/hooks/useDataTableColumns.ts

@@ -232,9 +232,11 @@ export const useDataTableColumns = <T>({
       .map((column) => {
         return {
           ...column,
-          hidden: !columnsToggle.find((toggle) => {
-            return toggle.accessor === column?.accessor;
-          })?.toggled,
+          hidden:
+            column?.hidden ||
+            !columnsToggle.find((toggle) => {
+              return toggle.accessor === column?.accessor;
+            })?.toggled,
         };
       }) as DataTableColumn<T>[];
 
@@ -282,4 +284,4 @@ export const useDataTableColumns = <T>({
     setColumnWidth,
     resetColumnsWidth,
   } as const;
-};
+};