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 }) => ( +
+
e.preventDefault()}> + + {internalEditComponents} + +
+ + + +
+ ), + renderEmptyRowsFallback: () => ( +
+ This table is empty, click on the chevron to add a record +
+ ), + }); + + return ( + + setWithData(e.currentTarget.checked)} + /> + + + ); +}; diff --git a/packages/mantine-react-table/stories/features/EmptyRow.stories.tsx b/packages/mantine-react-table/stories/features/EmptyRow.stories.tsx index ef29a1e54..930e687af 100644 --- 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 ; }; - -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 }) => ( -
-
e.preventDefault()}> - - {internalEditComponents} - -
- - - -
- ), - renderEmptyRowsFallback: () => ( -
- This table is empty, click on the chevron to add a record -
- ), - }); - - return ( - - setWithData(e.currentTarget.checked)} - /> - - - ); -};