Merge pull request #590 from icflorescu/next

Update deps, docs, improve styling, fix #588

CHANGELOG.md

@@ -3,7 +3,14 @@
 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.8.2 (2024-05-03)
+## 7.9.1 (2024-05-10)
+
+- Update dev dependencies to ensure compatibility with Mantine 7.9.1
+- Improve row expansion styling to hide bottom border when being rendered in the last row of the table
+- Fix [#588](https://github.com/icflorescu/mantine-datatable/issues/588) - `withRowBorders=false` being ignored in the last row
+- Add documentation notice about `pinFirstColumn` and `pinLastColumn` not being supported in combination with nested tables
+
+## 7.9.0 (2024-05-03)
 
 - Update dev dependencies to ensure compatibility with Mantine 7.9
 - Update GitHub workflow action versions

app/examples/nested-tables-with-async-data-loading-and-sorting/page.tsx

@@ -1,5 +1,7 @@
+import { Code } from '@mantine/core';
 import type { Route } from 'next';
 import { CodeBlock } from '~/components/CodeBlock';
+import { InternalLink } from '~/components/InternalLink';
 import { PageNavigation } from '~/components/PageNavigation';
 import { PageTitle } from '~/components/PageTitle';
 import { Txt } from '~/components/Txt';
@@ -23,6 +25,22 @@ export default async function NestedTablesWithAsyncDataLoadingAndSortingExampleP
   return (
     <>
       <PageTitle of={PATH} />
+      <Txt>
+        Here is how you can combine{' '}
+        <InternalLink to="/examples/asynchronous-data-loading">asynchronous data loading</InternalLink> with{' '}
+        <InternalLink to="/examples/sorting">sorting</InternalLink> in nested tables.
+      </Txt>
+      <Txt warning title="Warning">
+        Nested tables do not work with column pinning -{' '}
+        <InternalLink to="/examples/pinning-the-first-column">
+          <Code>pinFirstColumn</Code>
+        </InternalLink>{' '}
+        and{' '}
+        <InternalLink to="/examples/pinning-the-last-column">
+          <Code>pinLastColumn</Code>
+        </InternalLink>
+        .
+      </Txt>
       <Txt>Click on the column headers and the expandable rows in the table below to see it in action:</Txt>
       <NestedTablesAsyncSortingExample />
       <Txt>The above example is implemented with the following code:</Txt>

app/examples/nested-tables-with-async-data-loading/page.tsx

@@ -27,9 +27,19 @@ export default async function NestedTablesWithAsyncDataLoadingExamplePage() {
         Since the row expansion <Code>content</Code> function is <em>lazily executed</em> when a row is expanded to
         prevent creating unnecessary DOM elements, you can use this behavior to asynchronously load data for nested
         tables.
-        <br />
-        Click on the expandable rows in the table below to see it in action:
       </Txt>
+      <Txt warning title="Warning">
+        Nested tables do not work with column pinning -{' '}
+        <InternalLink to="/examples/pinning-the-first-column">
+          <Code>pinFirstColumn</Code>
+        </InternalLink>{' '}
+        and{' '}
+        <InternalLink to="/examples/pinning-the-last-column">
+          <Code>pinLastColumn</Code>
+        </InternalLink>
+        .
+      </Txt>
+      <Txt>Click on the expandable rows in the table below to see it in action:</Txt>
       <NestedTablesAsyncExample />
       <Txt>The above example is implemented with the following code:</Txt>
       <CodeBlock

app/examples/nested-tables/page.tsx

@@ -30,9 +30,19 @@ export default async function NestedTablesExamplePage() {
           the <Code>noHeader</Code> property
         </InternalLink>{' '}
         to create nested tables.
-        <br />
-        Click on the expandable rows in the table below to see it in action:
       </Txt>
+      <Txt warning title="Warning">
+        Nested tables do not work with column pinning -{' '}
+        <InternalLink to="/examples/pinning-the-first-column">
+          <Code>pinFirstColumn</Code>
+        </InternalLink>{' '}
+        and{' '}
+        <InternalLink to="/examples/pinning-the-last-column">
+          <Code>pinLastColumn</Code>
+        </InternalLink>
+        .
+      </Txt>
+      <Txt>Click on the expandable rows in the table below to see it in action:</Txt>
       <NestedTablesExample />
       <Txt>The above example is implemented with the following code:</Txt>
       <CodeBlock tabs={{ code, keys: ['NestedTablesExample.tsx', 'NestedTablesExample.module.css', 'data.ts'] }} />

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mantine-datatable",
-  "version": "7.9.0",
+  "version": "7.9.1",
   "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",
@@ -63,7 +63,7 @@
     "./styles.layer.css": "./dist/styles.layer.css"
   },
   "scripts": {
-    "dev": "next dev --turbo",
+    "dev": "next dev",
     "build:package": "rm -rf dist; tsup --config scripts/tsup.esm.ts; tsup --config scripts/tsup.cjs.ts; tsup --config scripts/tsup.dts.ts; postcss package/styles*.css --dir dist",
     "build:docs": "next build",
     "build": "yarn build:package && yarn build:docs",
@@ -72,19 +72,19 @@
   },
   "devDependencies": {
     "@docsearch/react": "^3.6.0",
-    "@ducanh2912/next-pwa": "^10.2.6",
+    "@ducanh2912/next-pwa": "^10.2.7",
     "@faker-js/faker": "^8.4.1",
     "@formkit/auto-animate": "^0.8.2",
-    "@mantine/code-highlight": "^7.9.0",
-    "@mantine/core": "^7.9.0",
-    "@mantine/dates": "^7.9.0",
-    "@mantine/hooks": "^7.9.0",
-    "@mantine/modals": "^7.9.0",
-    "@mantine/notifications": "^7.9.0",
+    "@mantine/code-highlight": "^7.9.1",
+    "@mantine/core": "^7.9.1",
+    "@mantine/dates": "^7.9.1",
+    "@mantine/hooks": "^7.9.1",
+    "@mantine/modals": "^7.9.1",
+    "@mantine/notifications": "^7.9.1",
     "@tabler/icons-react": "^3.3.0",
-    "@tanstack/react-query": "^5.32.1",
-    "@types/lodash": "^4.17.0",
-    "@types/node": "^20.12.8",
+    "@tanstack/react-query": "^5.35.1",
+    "@types/lodash": "^4.17.1",
+    "@types/node": "^20.12.11",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^7.8.0",
@@ -96,7 +96,7 @@
     "eslint-config-next": "^14.2.3",
     "eslint-config-prettier": "^9.1.0",
     "lodash": "^4.17.21",
-    "mantine-contextmenu": "^7.9.0",
+    "mantine-contextmenu": "^7.9.1",
     "next": "^14.2.3",
     "postcss": "^8.4.38",
     "postcss-cli": "^11.0.0",

package/DataTable.tsx

@@ -313,7 +313,8 @@ export function DataTable<T>({
                 [TEXT_SELECTION_DISABLED]: textSelectionDisabled,
                 'mantine-datatable-vertical-align-top': verticalAlign === 'top',
                 'mantine-datatable-vertical-align-bottom': verticalAlign === 'bottom',
-                'mantine-datatable-last-row-border-bottom-visible': tableHeight < scrollViewportHeight,
+                'mantine-datatable-last-row-border-bottom-visible':
+                  otherProps.withRowBorders && tableHeight < scrollViewportHeight,
                 'mantine-datatable-pin-last-column': pinLastColumn,
                 'mantine-datatable-pin-last-column-scrolled': !scrolledToRight && pinLastColumn,
                 'mantine-datatable-selection-column-visible': selectionColumnVisible,

package/DataTableRowExpansion.css

@@ -3,7 +3,9 @@
 }
 
 .mantine-datatable-row-expansion-cell-content {
-  border-bottom: rem(1px) solid var(--mantine-datatable-row-border-color);
+  tr:not(:last-of-type) & {
+    border-bottom: rem(1px) solid var(--mantine-datatable-row-border-color);
+  }
   border-top: rem(1px) solid var(--mantine-datatable-row-border-color);
   [data-with-row-border] & {
     border-top: 0;