Merge pull request #675 from icflorescu/next

Docs website: add interactive empty state example

Author: icflorescu

app/examples/empty-state/EmptyStateExamples.tsx

@@ -1,4 +1,7 @@
-import { Box, Image, Stack, Text } from '@mantine/core';
+'use client';
+
+import { Box, Button, Image, Stack, Text } from '@mantine/core';
+import { notifications } from '@mantine/notifications';
 import { IconMoodSad } from '@tabler/icons-react';
 import { DataTable } from '__PACKAGE__';
 import classes from './EmptyStateExamples.module.css';
@@ -87,3 +90,32 @@ export function EmptyStateExampleCustomContent() {
   );
   // example-end
 }
+
+export function EmptyStateExampleCustomInteractiveContent() {
+  // example-start custom-interactive-content
+  return (
+    <DataTable
+      minHeight={280}
+      records={[]}
+      emptyState={
+        <Stack align="center" gap="xs">
+          <Text c="dimmed" size="sm">
+            No data found...
+          </Text>
+          <Button
+            style={{ pointerEvents: 'all' }} // 👈 enable button pointer events
+            onClick={() => notifications.show({ message: 'Should add a new record' })}
+          >
+            Add a record
+          </Button>
+        </Stack>
+      }
+      // example-skip
+      withTableBorder
+      withColumnBorders
+      columns={[{ accessor: 'name' }, { accessor: 'email' }]}
+      // example-resume
+    />
+  );
+  // example-end
+}

app/examples/empty-state/page.tsx

@@ -2,6 +2,7 @@ import { Code } from '@mantine/core';
 import type { Route } from 'next';
 import { CodeBlock } from '~/components/CodeBlock';
 import { PageNavigation } from '~/components/PageNavigation';
+import { PageSubtitle } from '~/components/PageSubtitle';
 import { PageTitle } from '~/components/PageTitle';
 import { Txt } from '~/components/Txt';
 import { readCodeFile } from '~/lib/code';
@@ -10,6 +11,7 @@ import {
   EmptyStateExample,
   EmptyStateExampleCustomContent,
   EmptyStateExampleCustomIconAndText,
+  EmptyStateExampleCustomInteractiveContent,
   EmptyStateExampleCustomText,
 } from './EmptyStateExamples';
 
@@ -19,9 +21,12 @@ export const metadata = getRouteMetadata(PATH);
 
 export default async function EmptyStateExamplePage() {
   const rawCode = await allPromiseProps({
-    tsx: readCodeFile<Record<'default' | 'custom-text' | 'custom-icon-and-text' | 'custom-content', string>>(
-      `${PATH}/EmptyStateExamples.tsx`
-    ),
+    tsx: readCodeFile<
+      Record<
+        'default' | 'custom-text' | 'custom-icon-and-text' | 'custom-content' | 'custom-interactive-content',
+        string
+      >
+    >(`${PATH}/EmptyStateExamples.tsx`),
     css: readCodeFile<string>(`${PATH}/EmptyStateExamples.module.css`),
   });
 
@@ -65,6 +70,15 @@ export default async function EmptyStateExamplePage() {
       </Txt>
       <EmptyStateExampleCustomContent />
       <CodeBlock code={code['custom-content']} />
+      <PageSubtitle value="Interactive custom empty state content" />
+      <Txt>
+        The empty state component has the <Code>pointer-events</Code> CSS property set to <Code>none</Code>.
+        <br />
+        Which means that if you need to add interactive content to the custom empty state, you’ll have to enable pointer
+        interactions using the <Code>pointer-events</Code> CSS prop:
+      </Txt>
+      <EmptyStateExampleCustomInteractiveContent />
+      <CodeBlock code={code['custom-interactive-content']} />
       <Txt>Head over to the next example to discover more features.</Txt>
       <PageNavigation of={PATH} />
     </>