From a0da23aaa1aee32bfdc73860d221dc0cc0ad7053 Mon Sep 17 00:00:00 2001 From: Alessandro Cuppari Date: Fri, 30 Aug 2024 17:27:23 +0100 Subject: [PATCH 1/2] feat: added creation stories --- .../stories/features/Creating.stories.tsx | 405 ++++++++++++++++++ 1 file changed, 405 insertions(+) create mode 100644 packages/mantine-react-table/stories/features/Creating.stories.tsx diff --git a/packages/mantine-react-table/stories/features/Creating.stories.tsx b/packages/mantine-react-table/stories/features/Creating.stories.tsx new file mode 100644 index 000000000..8fdd932c7 --- /dev/null +++ b/packages/mantine-react-table/stories/features/Creating.stories.tsx @@ -0,0 +1,405 @@ +import { useState } from 'react'; +import { IconPlus } from '@tabler/icons-react'; +import { Button, ActionIcon, Select } from '@mantine/core'; +import { + type MRT_TableOptions, + MantineReactTable, + createRow, + MRT_Row, + useMantineReactTable, +} from '../../src'; +import { faker } from '@faker-js/faker'; +import { type Meta } from '@storybook/react'; + +const meta: Meta = { + title: 'Features/Creating Examples', +}; + +export default meta; + +type Person = { + address: string; + firstName: string; + lastName: string; + phoneNumber: string; + state: string; +}; + +const data: Person[] = [...Array(100)].map(() => ({ + address: faker.location.streetAddress(), + firstName: faker.person.firstName(), + lastName: faker.person.lastName(), + phoneNumber: faker.phone.number(), + state: faker.location.state(), +})); + +const expandingData = [...Array(5)].map(() => ({ + address: faker.location.streetAddress(), + firstName: faker.person.firstName(), + lastName: faker.person.lastName(), + phoneNumber: faker.phone.number(), + subRows: [...Array(faker.number.int(4))].map(() => ({ + address: faker.location.streetAddress(), + firstName: faker.person.firstName(), + lastName: faker.person.lastName(), + phoneNumber: faker.phone.number(), + subRows: [...Array(3)].map(() => ({ + address: faker.location.streetAddress(), + firstName: faker.person.firstName(), + lastName: faker.person.lastName(), + phoneNumber: faker.phone.number(), + subRows: [...Array(2)].map(() => ({ + address: faker.location.streetAddress(), + firstName: faker.person.firstName(), + lastName: faker.person.lastName(), + phoneNumber: faker.phone.number(), + })), + })), + })), +})); + +export const CreateRowIndexTop = () => { + const [tableData, setTableData] = useState(data); + + const handleSaveRow: MRT_TableOptions['onEditingRowSave'] = ({ + exitEditingMode, + row, + values, + }) => { + tableData[row.index] = values; + setTableData([...tableData]); + exitEditingMode(); + }; + + const table = useMantineReactTable({ + 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', + }, + ], + createDisplayMode: 'row', + data: tableData, + editDisplayMode: 'row', + enableEditing: true, + onCreatingRowSave: () => {}, + onEditingRowSave: handleSaveRow, + positionCreatingRow: 'top', + renderTopToolbarCustomActions: ({ table }) => ( + + ), + }); + + return ; +}; + +export const CreateRowIndexBottom = () => { + const [tableData, setTableData] = useState(data); + + const handleSaveRow: MRT_TableOptions['onEditingRowSave'] = ({ + exitEditingMode, + row, + values, + }) => { + tableData[row.index] = values; + setTableData([...tableData]); + exitEditingMode(); + }; + + const table = useMantineReactTable({ + 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', + }, + ], + createDisplayMode: 'row', + data: tableData, + editDisplayMode: 'row', + enableEditing: true, + onCreatingRowSave: () => {}, + onEditingRowSave: handleSaveRow, + positionCreatingRow: 'bottom', + renderTopToolbarCustomActions: ({ table }) => ( + + ), + }); + + return ; +}; + +export const CreateRowIndexIndex = () => { + const [tableData, setTableData] = useState(data); + + const handleSaveRow: MRT_TableOptions['onEditingRowSave'] = ({ + exitEditingMode, + row, + values, + }) => { + tableData[row.index] = values; + setTableData([...tableData]); + exitEditingMode(); + }; + + const table = useMantineReactTable({ + 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', + }, + ], + createDisplayMode: 'row', + data: tableData, + editDisplayMode: 'row', + enableEditing: true, + onCreatingRowSave: () => {}, + onEditingRowSave: handleSaveRow, + positionCreatingRow: 5, + renderTopToolbarCustomActions: ({ table }) => ( + + ), + }); + + return ; +}; + +export const CreateRowIndexIndexVirtualized = () => { + const [tableData, setTableData] = useState(data); + + const handleSaveRow: MRT_TableOptions['onEditingRowSave'] = ({ + exitEditingMode, + row, + values, + }) => { + tableData[row.index] = values; + setTableData([...tableData]); + exitEditingMode(); + }; + + const table = useMantineReactTable({ + 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', + }, + ], + createDisplayMode: 'row', + data: tableData, + editDisplayMode: 'row', + enableEditing: true, + enableRowVirtualization: true, + onCreatingRowSave: () => {}, + onEditingRowSave: handleSaveRow, + positionCreatingRow: 5, + renderTopToolbarCustomActions: ({ table }) => ( + + ), + }); + + return ; +}; + +export const CreateRowIndexIndexExpanding = () => { + const [creatingRowIndex, setCreatingRowIndex] = useState< + number | undefined + >(); + + const table = useMantineReactTable({ + columns: [ + { + accessorKey: 'firstName', + header: 'First Name', + }, + { + accessorKey: 'lastName', + header: 'Last Name', + }, + { + accessorKey: 'address', + header: 'Address', + }, + { + accessorKey: 'phoneNumber', + enableEditing: false, + header: 'Phone Number', + }, + ], + createDisplayMode: 'row', + data: expandingData, + editDisplayMode: 'row', + enableEditing: true, + enableExpanding: true, + initialState: { expanded: true }, + onCreatingRowSave: () => {}, + positionCreatingRow: creatingRowIndex, + renderRowActions: ({ row, renderedRowIndex, table }) => { + return ( + { + setCreatingRowIndex((renderedRowIndex || 0) + 1); + table.setCreatingRow( + createRow( + table, + { + address: '', + firstName: '', + lastName: '', + phoneNumber: '', + subRows: [], + }, + -1, + row.depth + 1, + ), + ); + }} + > + + + ); + }, + renderTopToolbarCustomActions: ({ table }) => ( + + ), + }); + + return ; +}; + +export const CreateWithCustomEditCell = () => { + const [tableData, setTableData] = useState(data); + const [creatingRow, setCreatingRow] = useState | null>(null); + + const handleSaveRow: MRT_TableOptions['onEditingRowSave'] = ({ + exitEditingMode, + row, + values, + }) => { + tableData[row.index] = values; + setTableData([...tableData]); + exitEditingMode(); + }; + + const table = useMantineReactTable({ + columns: [ + { + accessorKey: 'firstName', + header: 'First Name', + }, + { + accessorKey: 'lastName', + header: 'Last Name', + }, + { + accessorKey: 'address', + header: 'Address', + }, + { + accessorKey: 'state', + header: 'State', + Edit: ({ cell }) => ( +