diff --git a/packages/mantine-react-table/stories/features/Editing.stories.tsx b/packages/mantine-react-table/stories/features/Editing.stories.tsx index b84214a42..dfa173c82 100644 --- a/packages/mantine-react-table/stories/features/Editing.stories.tsx +++ b/packages/mantine-react-table/stories/features/Editing.stories.tsx @@ -1,5 +1,5 @@ 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, @@ -7,6 +7,7 @@ import { 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 = () => { ); }; + +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 }) => ( +