Add docs on column pinning not being supported in nested tables

icflorescu · May 10, 2024 · ad49f6b · ad49f6b
1 parent a8f4df4
commit ad49f6b
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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'] }} />