From ad49f6b624ae7624cac2c0de69c1a491e214ae34 Mon Sep 17 00:00:00 2001
From: Ionut-Cristian Florescu <ionut.florescu@gmail.com>
Date: Fri, 10 May 2024 13:32:57 +0300
Subject: [PATCH] Add docs on column pinning not being supported in nested
 tables

---
 CHANGELOG.md                                   |  1 +
 .../page.tsx                                   | 18 ++++++++++++++++++
 .../page.tsx                                   | 14 ++++++++++++--
 app/examples/nested-tables/page.tsx            | 14 ++++++++++++--
 4 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a9955d672..ae859f522 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@ Minor versions that are not listed in the changelog are bug fixes and small impr
 - 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)
 
diff --git a/app/examples/nested-tables-with-async-data-loading-and-sorting/page.tsx b/app/examples/nested-tables-with-async-data-loading-and-sorting/page.tsx
index 85f8851a7..a0f18940b 100644
--- a/app/examples/nested-tables-with-async-data-loading-and-sorting/page.tsx
+++ b/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>
diff --git a/app/examples/nested-tables-with-async-data-loading/page.tsx b/app/examples/nested-tables-with-async-data-loading/page.tsx
index b1a372671..f8658ae57 100644
--- a/app/examples/nested-tables-with-async-data-loading/page.tsx
+++ b/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
diff --git a/app/examples/nested-tables/page.tsx b/app/examples/nested-tables/page.tsx
index 2e78da5c5..be81ccb35 100644
--- a/app/examples/nested-tables/page.tsx
+++ b/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'] }} />