Move story to Editing Examples

KevinVandy · Nov 29, 2024 · 23b0a59 · 23b0a59
1 parent 7bea27b
commit 23b0a59
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 54 deletions.
diff --git a/packages/mantine-react-table/stories/features/Editing.stories.tsx b/packages/mantine-react-table/stories/features/Editing.stories.tsx
@@ -1,12 +1,13 @@
 import { useState } from 'react';
-import { Flex, Stack, Switch, Title } from '@mantine/core';
+import { Center, Flex, Group, Stack, Switch, Title, Text } from '@mantine/core';
 import {
   type MRT_Cell,
   type MRT_ColumnOrderState,
   MRT_EditActionButtons,
   type MRT_TableOptions,
   MantineReactTable,
   MRT_ColumnDef,
+  useMantineReactTable,
 } from '../../src';
 import { faker } from '@faker-js/faker';
 import { type Meta } from '@storybook/react';
@@ -1238,3 +1239,64 @@ export const EditingTurnedOnDynamically = () => {
     </Stack>
   );
 };
+
+export const EditingInDetailPannel = () => {
+  const [withData, setWithData] = useState(false);
+
+  const columns = [
+    {
+      accessorKey: 'firstName',
+      header: 'First Name',
+    },
+    {
+      accessorKey: 'lastName',
+      header: 'Last Name',
+    },
+    {
+      accessorKey: 'address',
+      header: 'Address',
+    },
+    {
+      accessorKey: 'state',
+      header: 'State',
+    },
+    {
+      accessorKey: 'phoneNumber',
+      enableEditing: false,
+      header: 'Phone Number',
+    },
+  ];
+
+  const table = useMantineReactTable({
+    columns,
+    data: withData ? data : [],
+    renderDetailPanel: ({ table, row, internalEditComponents }) => (
+      <Center>
+        <form onSubmit={(e) => e.preventDefault()}>
+          <Group gap="md" pb={24} pt={16}>
+            {internalEditComponents}
+          </Group>
+        </form>
+        <Flex justify="flex-end">
+          <MRT_EditActionButtons row={row} table={table} variant="text" />
+        </Flex>
+      </Center>
+    ),
+    renderEmptyRowsFallback: () => (
+      <Center>
+        <Text>This table is empty, click on the chevron to add a record</Text>
+      </Center>
+    ),
+  });
+
+  return (
+    <Stack>
+      <Switch
+        checked={withData}
+        label="Show data"
+        onChange={(e) => setWithData(e.currentTarget.checked)}
+      />
+      <MantineReactTable table={table} />
+    </Stack>
+  );
+};
diff --git a/packages/mantine-react-table/stories/features/EmptyRow.stories.tsx b/packages/mantine-react-table/stories/features/EmptyRow.stories.tsx
@@ -103,56 +103,3 @@ export const EmptyRowExplanationPannel = () => {
 
   return <MantineReactTable table={table} />;
 };
-
-const sampleData: Person[] = [
-  {
-    firstName: 'Alice',
-    lastName: 'Smith',
-  },
-  {
-    firstName: 'Bob',
-    lastName: 'Johnson',
-  },
-  {
-    firstName: 'Charlie',
-    lastName: 'Williams',
-  },
-];
-
-export const AddingOrEditingInDetailPannel = () => {
-  //Now that empty row is an actual row, detail pannel is available, and can ne used as a form, maybe?
-  const [withData, setWithData] = useState(false);
-
-  const table = useMantineReactTable({
-    columns,
-    data: withData ? sampleData: data,
-    renderDetailPanel: ({ table, row, internalEditComponents }) => (
-      <Center>
-        <form onSubmit={(e) => e.preventDefault()}>
-          <Group gap="md" pb={24} pt={16}>
-            {internalEditComponents}
-          </Group>
-        </form>
-        <Flex justify="flex-end">
-          <MRT_EditActionButtons row={row} table={table} variant="text" />
-        </Flex>
-      </Center>
-    ),
-    renderEmptyRowsFallback: () => (
-      <Center>
-        <Text>This table is empty, click on the chevron to add a record</Text>
-      </Center>
-    ),
-  });
-
-  return (
-    <Stack>
-      <Switch
-        checked={withData}
-        label="Show data"
-        onChange={(e) => setWithData(e.currentTarget.checked)}
-      />
-      <MantineReactTable table={table} />
-    </Stack>
-  );
-};