Merge pull request #785 from icflorescu/next

Release 8.3.10

Author: icflorescu

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.
 
+## 8.3.10 (2025-12-15)
+
+- Fix [#784](https://github.com/icflorescu/mantine-datatable/issues/784) - pagination still producing **some** output when recordsLength is 0
+- Update deps to ensure compatibility with Mantine 8.3.10
+
 ## 8.3.9 (2025-12-05)
 
 - Implement comprehensive RTL support, thanks to [Reem Assaf](https://github.com/ReemX) (see [PR #781](https://github.com/icflorescu/mantine-datatable/pull/781/))

app/examples/rtl-support/RTLSupportExample.module.css

@@ -0,0 +1,4 @@
+.buttonSectionRtl {
+  margin-left: var(--mantine-spacing-xs);
+  margin-right: 0;
+}

app/examples/rtl-support/RTLSupportExample.tsx

@@ -3,8 +3,10 @@
 import { ActionIcon, Box, Button, DirectionProvider, Group, SegmentedControl, Stack, Text } from '@mantine/core';
 import { IconColumns3, IconEdit, IconEye, IconTrash } from '@tabler/icons-react';
 import { DataTable, useDataTableColumns, type DataTableSortStatus } from '__PACKAGE__';
+import clsx from 'clsx';
 import { useMemo, useState } from 'react';
 import { companies, employees, type Employee } from '~/data';
+import classes from './RTLSupportExample.module.css';
 
 // Example 1: Basic table without pinned columns
 export function RTLBasicExample({ direction }: { direction: 'ltr' | 'rtl' }) {
@@ -46,7 +48,13 @@ export function RTLDraggingExample({ direction }: { direction: 'ltr' | 'rtl' })
       <Box dir={direction}>
         <Stack gap="xs">
           <Group gap="xs">
-            <Button size="xs" variant="light" leftSection={<IconColumns3 size={16} />} onClick={resetColumnsOrder}>
+            <Button
+              classNames={{ section: clsx({ [classes.buttonSectionRtl]: direction === 'rtl' }) }}
+              size="xs"
+              variant="light"
+              leftSection={<IconColumns3 size={16} />}
+              onClick={resetColumnsOrder}
+            >
               Reset order
             </Button>
           </Group>

app/examples/rtl-support/page.tsx

@@ -7,15 +7,19 @@ import { PageNavigation } from '~/components/PageNavigation';
 import { PageTitle } from '~/components/PageTitle';
 import { Txt } from '~/components/Txt';
 import { readCodeFile } from '~/lib/code';
-import { getRouteMetadata } from '~/lib/utils';
+import { allPromiseProps, getRouteMetadata } from '~/lib/utils';
 import { RTLSupportExample } from './RTLSupportExample';
 
 const PATH: Route = '/examples/rtl-support';
 
 export const metadata = getRouteMetadata(PATH);
 
 export default async function RTLSupportExamplePage() {
-  const code = await readCodeFile<string>(`${PATH}/RTLSupportExample.tsx`);
+  // const code = await readCodeFile<string>(`${PATH}/RTLSupportExample.tsx`);
+  const code = await allPromiseProps({
+    'RTLSupportExample.tsx': readCodeFile<string>(`${PATH}/RTLSupportExample.tsx`),
+    'RTLSupportExample.module.css': readCodeFile<string>(`${PATH}/RTLSupportExample.module.css`),
+  });
 
   return (
     <>
@@ -35,7 +39,7 @@ export default async function RTLSupportExamplePage() {
       </Txt>
       <RTLSupportExample />
       <Txt>Here is the code:</Txt>
-      <CodeBlock code={code} />
+      <CodeBlock tabs={{ code, keys: ['RTLSupportExample.tsx', 'RTLSupportExample.module.css'] }} />
       <Txt>Head over to the next example to discover more features.</Txt>
       <PageNavigation of={PATH} />
     </>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mantine-datatable",
-  "version": "8.3.9",
+  "version": "8.3.10",
   "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",
@@ -77,41 +77,41 @@
     "@faker-js/faker": "^10.1.0",
     "@formkit/auto-animate": "^0.9.0",
     "@hello-pangea/dnd": "^18.0.1",
-    "@mantine/code-highlight": "^8.3.9",
-    "@mantine/core": "^8.3.9",
-    "@mantine/dates": "^8.3.9",
-    "@mantine/hooks": "^8.3.9",
-    "@mantine/modals": "^8.3.9",
-    "@mantine/notifications": "^8.3.9",
-    "@next/eslint-plugin-next": "^15.5.7",
-    "@tabler/icons-react": "^3.35.0",
+    "@mantine/code-highlight": "^8.3.10",
+    "@mantine/core": "^8.3.10",
+    "@mantine/dates": "^8.3.10",
+    "@mantine/hooks": "^8.3.10",
+    "@mantine/modals": "^8.3.10",
+    "@mantine/notifications": "^8.3.10",
+    "@next/eslint-plugin-next": "^15.5.9",
+    "@tabler/icons-react": "^3.36.0",
     "@tanstack/react-query": "^5.90.12",
     "@types/lodash": "^4.17.21",
-    "@types/node": "^24.10.1",
+    "@types/node": "^25.0.2",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
-    "@typescript-eslint/eslint-plugin": "^8.48.1",
-    "@typescript-eslint/parser": "^8.48.1",
+    "@typescript-eslint/eslint-plugin": "^8.49.0",
+    "@typescript-eslint/parser": "^8.49.0",
     "clsx": "^2.1.1",
     "cssnano": "^7.1.2",
     "dayjs": "^1.11.19",
-    "eslint": "^9.39.1",
-    "eslint-config-next": "^15.5.7",
+    "eslint": "^9.39.2",
+    "eslint-config-next": "^15.5.9",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-react-hooks": "^7.0.1",
     "lodash": "^4.17.21",
     "mantine-contextmenu": "^8.3.11",
-    "next": "^15.5.7",
+    "next": "^15.5.9",
     "postcss": "^8.5.6",
     "postcss-cli": "^11.0.1",
     "postcss-import": "^16.1.1",
     "postcss-preset-mantine": "^1.18.0",
     "postcss-simple-vars": "^7.0.1",
     "prettier": "^3.7.4",
-    "react": "^19.2.1",
-    "react-dom": "^19.2.1",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
     "sharp": "^0.34.5",
-    "shiki": "^3.19.0",
+    "shiki": "^3.20.0",
     "swr": "^2.3.7",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3"

package/DataTable.tsx

@@ -434,7 +434,7 @@ export function DataTable<T>({
             </Table>
           </TableWrapper>
         </DataTableScrollArea>
-        {page && (
+        {page && recordsLength && (
           <DataTablePagination
             className={classNames?.pagination}
             style={styles?.pagination}