Add one more example for row actions cell

icflorescu · Jan 31, 2024 · f8a4014 · f8a4014
1 parent 3b58007
commit f8a4014
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 8 deletions.
diff --git a/...ow-actions-cell/RowActionsCellExample.tsx → ...w-actions-cell/RowActionsCellExamples.tsx b/...ow-actions-cell/RowActionsCellExample.tsx → ...w-actions-cell/RowActionsCellExamples.tsx
@@ -15,16 +15,16 @@ const showModal = ({ company, action }: { company: Company; action: 'view' | 'ed
       action === 'view'
         ? 'Showing company information'
         : action === 'edit'
-        ? 'Editing company information'
-        : 'Deleting company',
+          ? 'Editing company information'
+          : 'Deleting company',
     children: (
       <Stack>
         <Text>
           {action === 'view'
             ? 'Here’s where you could show more information...'
             : action === 'edit'
-            ? 'Here’s where you could put an edit form...'
-            : 'Here’s where you could ask for confirmation before deleting...'}
+              ? 'Here’s where you could put an edit form...'
+              : 'Here’s where you could ask for confirmation before deleting...'}
         </Text>
         <Grid gutter="xs">
           <GridCol span={2}>ID</GridCol>
@@ -39,7 +39,7 @@ const showModal = ({ company, action }: { company: Company; action: 'view' | 'ed
 };
 
 export function RowActionsCellExample() {
-  // example-start
+  // example-start default
   return (
     <DataTable
       withTableBorder
@@ -86,3 +86,59 @@ export function RowActionsCellExample() {
   );
   // example-end
 }
+
+export function RowActionsCellExampleConstrainWidth() {
+  return (
+    // example-start constrain-width
+    <DataTable
+      withTableBorder
+      withColumnBorders
+      columns={[
+        // example-skip other columns
+        { accessor: 'name' },
+        { accessor: 'city' },
+        { accessor: 'state' },
+        // example-resume
+        {
+          accessor: 'actions',
+          title: <Box mr={6}>Actions</Box>,
+          width: '0%', // 👈 set width to 0%
+          textAlign: 'right',
+          render: (company) => (
+            // 👇 make sure the actions don't wrap
+            <Group gap={4} wrap="nowrap">
+              {/* example-skip action icons */}
+              <ActionIcon
+                size="sm"
+                variant="subtle"
+                color="green"
+                onClick={() => showModal({ company, action: 'view' })}
+              >
+                <IconEye size={16} />
+              </ActionIcon>
+              <ActionIcon
+                size="sm"
+                variant="subtle"
+                color="blue"
+                onClick={() => showModal({ company, action: 'edit' })}
+              >
+                <IconEdit size={16} />
+              </ActionIcon>
+              <ActionIcon
+                size="sm"
+                variant="subtle"
+                color="red"
+                onClick={() => showModal({ company, action: 'delete' })}
+              >
+                <IconTrash size={16} />
+              </ActionIcon>
+              {/* example-resume */}
+            </Group>
+          ),
+        },
+      ]}
+      records={records}
+    />
+    // example-end
+  );
+}
diff --git a/app/examples/row-actions-cell/page.tsx b/app/examples/row-actions-cell/page.tsx
@@ -1,21 +1,23 @@
 import { Code } from '@mantine/core';
 import type { Route } from 'next';
+import { MANTINE_LINK } from '~/app/config';
 import { CodeBlock } from '~/components/CodeBlock';
 import { ExternalLink } from '~/components/ExternalLink';
 import { InternalLink } from '~/components/InternalLink';
 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';
 import { getRouteMetadata } from '~/lib/utils';
-import { RowActionsCellExample } from './RowActionsCellExample';
+import { RowActionsCellExample, RowActionsCellExampleConstrainWidth } from './RowActionsCellExamples';
 
 const PATH: Route = '/examples/row-actions-cell';
 
 export const metadata = getRouteMetadata(PATH);
 
 export default async function RowActionsCellExamplePage() {
-  const code = await readCodeFile<string>(`${PATH}/RowActionsCellExample.tsx`);
+  const code = await readCodeFile<Record<'default' | 'constrain-width', string>>(`${PATH}/RowActionsCellExamples.tsx`);
 
   return (
     <>
@@ -28,7 +30,7 @@ export default async function RowActionsCellExamplePage() {
       </Txt>
       <RowActionsCellExample />
       <Txt>Here is the code:</Txt>
-      <CodeBlock code={code} />
+      <CodeBlock code={code['default']} />
       <Txt info title="Heads up">
         If you need to combine row actions with{' '}
         <InternalLink to="/examples/handling-row-clicks">clickable rows</InternalLink>,{' '}
@@ -46,6 +48,16 @@ export default async function RowActionsCellExamplePage() {
         See <InternalLink to="/examples/links-or-buttons-inside-clickable-rows-or-cells">this example</InternalLink> for
         more information.
       </Txt>
+      <PageSubtitle value="Constraining the actions column width" />
+      <Txt>
+        If you want to constrain the actions column to be no wider than its content, you can set its <Code>width</Code>{' '}
+        to <Code>&apos;0%&apos;</Code> and, if you have more than one action icon, make sure the actions are wrapped in
+        a <ExternalLink to={`${MANTINE_LINK}/core/group/`}>Mantine Group</ExternalLink> component with{' '}
+        <Code>wrap=&apos;nowrap&apos;</Code>:
+      </Txt>
+      <RowActionsCellExampleConstrainWidth />
+      <Txt>Here is the code:</Txt>
+      <CodeBlock code={code['constrain-width']} />
       <Txt>Head over to the next example to discover more features.</Txt>
       <PageNavigation of={PATH} />
     </>