diff --git a/packages/mantine-react-table/src/hooks/useMRT_DisplayColumns.tsx b/packages/mantine-react-table/src/hooks/useMRT_DisplayColumns.tsx index b582eef11..6174dfe59 100644 --- a/packages/mantine-react-table/src/hooks/useMRT_DisplayColumns.tsx +++ b/packages/mantine-react-table/src/hooks/useMRT_DisplayColumns.tsx @@ -29,7 +29,7 @@ export const useMRT_DisplayColumns = = {}>( const { creatingRow, columnOrder, grouping, tableOptions } = params; return useMemo(() => { const order = tableOptions.state?.columnOrder ?? columnOrder; - const ret = [ + const displayColumns = [ makePinColumn(params, order), makeDragColumn(params, order), makeRowActionsColumn(params, order), @@ -37,8 +37,7 @@ export const useMRT_DisplayColumns = = {}>( makeRowSelectColumn(params, order), makeRowNumbersColumn(params, order), ].filter((x) => x) as MRT_ColumnDef[]; - console.log('displayColumns', ret); - return ret; + return displayColumns; }, [ creatingRow, columnOrder, diff --git a/packages/mantine-react-table/src/hooks/useMRT_TableInstance.ts b/packages/mantine-react-table/src/hooks/useMRT_TableInstance.ts index 93589e1c2..5b46b65d1 100644 --- a/packages/mantine-react-table/src/hooks/useMRT_TableInstance.ts +++ b/packages/mantine-react-table/src/hooks/useMRT_TableInstance.ts @@ -55,8 +55,8 @@ export const useMRT_TableInstance: = {}>( const initialState: Partial> = useMemo(() => { const initState = tableOptions.initialState ?? {}; - // initState.columnOrder = - // initState.columnOrder ?? getDefaultColumnOrderIds(tableOptions); + initState.columnOrder = + initState.columnOrder ?? getDefaultColumnOrderIds(tableOptions); initState.globalFilterFn = tableOptions.globalFilterFn ?? 'fuzzy'; return initState; }, []); diff --git a/packages/mantine-react-table/stories/features/Editing.stories.tsx b/packages/mantine-react-table/stories/features/Editing.stories.tsx index 6389f7c0b..4fcd2fd0e 100644 --- a/packages/mantine-react-table/stories/features/Editing.stories.tsx +++ b/packages/mantine-react-table/stories/features/Editing.stories.tsx @@ -5,6 +5,7 @@ import { MRT_EditActionButtons, type MRT_Cell, type MRT_TableOptions, + type MRT_ColumnOrderState, } from '../../src'; import { faker } from '@faker-js/faker'; import { Flex, Stack, Switch, Title } from '@mantine/core'; @@ -90,8 +91,6 @@ const data: Person[] = [...Array(100)].map(() => ({ export const EditingEnabledEditModeModalDefault = () => { const [tableData, setTableData] = useState(data); - const [enableRowNumbers, setEnableRowNumbers] = useState(false); - const [enableEditing, setEnableEditing] = useState(false); const handleSaveRow: MRT_TableOptions['onEditingRowSave'] = ({ exitEditingMode, row, @@ -102,48 +101,38 @@ export const EditingEnabledEditModeModalDefault = () => { exitEditingMode(); }; + const columns = [ + { + header: 'First Name', + accessorKey: 'firstName', + }, + { + header: 'Last Name', + accessorKey: 'lastName', + }, + { + header: 'Address', + accessorKey: 'address', + }, + { + header: 'State', + accessorKey: 'state', + }, + { + header: 'Phone Number', + accessorKey: 'phoneNumber', + enableEditing: false, + }, + ]; + return ( - - setEnableEditing(e.currentTarget.checked)} - label="Enable Editing" - />{' '} - setEnableRowNumbers(e.currentTarget.checked)} - label="Enable Row Numbers" - /> - - + ); }; @@ -1056,3 +1045,116 @@ export const EnableEditingConditionallyTable = () => { /> ); }; + +export const EditingTurnedOnDynamically = () => { + const [tableData, setTableData] = useState(data); + const handleSaveRow: MRT_TableOptions['onEditingRowSave'] = ({ + exitEditingMode, + row, + values, + }) => { + tableData[row.index] = values; + setTableData([...tableData]); + exitEditingMode(); + }; + + const columns = [ + { + header: 'First Name', + accessorKey: 'firstName', + }, + { + header: 'Last Name', + accessorKey: 'lastName', + }, + { + header: 'Address', + accessorKey: 'address', + }, + { + header: 'State', + accessorKey: 'state', + }, + { + header: 'Phone Number', + accessorKey: 'phoneNumber', + enableEditing: false, + }, + ]; + + const [enableRowNumbers, _setEnableRowNumbers] = useState(false); + const [enableEditing, _setEnableEditing] = useState(false); + + const [columnOrder, setColumnOrder] = useState(() => { + return [ + enableEditing && 'mrt-row-actions', + enableRowNumbers && 'mrt-row-numbers', + ...columns.map((c) => c.accessorKey), + ].filter(Boolean) as MRT_ColumnOrderState; + }); + + const updateColumnOrder = ({ + enableEditing, + enableRowNumbers, + }: { + enableEditing: boolean; + enableRowNumbers: boolean; + }) => { + let newColumnOrder = columnOrder; + if (enableRowNumbers) { + newColumnOrder = ['mrt-row-numbers', ...newColumnOrder]; + } else { + newColumnOrder = newColumnOrder.filter( + (col) => col !== 'mrt-row-numbers', + ); + } + if (enableEditing) { + newColumnOrder = ['mrt-row-actions', ...newColumnOrder]; + } else { + newColumnOrder = newColumnOrder.filter( + (col) => col !== 'mrt-row-actions', + ); + } + setColumnOrder(newColumnOrder); + }; + + const setEnableEditing = (value: boolean) => { + _setEnableEditing(value); + updateColumnOrder({ + enableEditing: value, + enableRowNumbers, + }); + }; + + const setEnableRowNumbers = (value: boolean) => { + _setEnableRowNumbers(value); + updateColumnOrder({ + enableEditing, + enableRowNumbers: value, + }); + }; + + return ( + + setEnableEditing(e.currentTarget.checked)} + label="Enable Editing" + />{' '} + setEnableRowNumbers(e.currentTarget.checked)} + label="Enable Row Numbers" + /> + + + ); +};