Using custom editing components

[TheLoneDeveloper]

const columns = [ { accessorKey: 'project', header: 'Project', Edit: ({ cell, column, table }) => <NativeSelect data={[...]} />, }, ... ];

Do i have to manually manage the state from this select or is there a handleChange?
So the values are automatically passed on to onEditingRowSave?

[n3x7j2]

That's what I want to discuss. Should allow cell editing mode with click event (for now, just doubleClick event) and render editing fields (like date picker, color picker, multiple select, ....) and using Tab and Shift + Tab key to switch between fields

[stevenlollivierpoc]

@TheLoneDeveloper have you managed to get it work ?

[cetracker-admin]

I would love to see an example on this.
Edit: ({ cell, column, table }) => <DatePicker /> looks a bit awkward for a start ;-)
The documentation mentions it, but without elaborating further:
https://www.mantine-react-table.com/docs/guides/editing#use-custom-editing-components

[dungeon2567]

Example:

 Edit: (props) => {
          return <GroupMultiSelect {...props} />;
        },

       function GroupMultiSelect(props) {
  const { classes } = useStyles();

  const { value, handleOnChange, handleBlur } = useEdit(props);
  
    return (
    <MultiSelect
      data={data}
      value={value}
      onBlur={handleBlur}
      onChange={handleOnChange}
    />
  );
       ```

[BahaaZidan]

Thanks a lot @dungeon2567 !
Your solution works. Here's the same solution with types:

import {
  MRT_Cell,
  MRT_Column,
  MRT_Row,
  MRT_TableInstance,
} from "mantine-react-table";
import { useState } from "react";

type MantineTableCellProps<TData extends Record<string, any>> = {
  cell: MRT_Cell<TData>;
  column: MRT_Column<TData>;
  row: MRT_Row<TData>;
  table: MRT_TableInstance<TData>;
};

function useEdit<TData extends Record<string, any>>(
  props: MantineTableCellProps<TData>,
) {
  const { cell, column, table } = props;

  const [value, setValue] = useState(() => cell.getValue());

  const { setEditingRow, setEditingCell, getState } = table;

  const { editingRow } = getState();

  const handleOnChange = (newValue: unknown) => {
    setValue(newValue);

    if (editingRow) {
      setEditingRow({
        ...editingRow,
        _valuesCache: { ...editingRow._valuesCache, [column.id]: newValue },
      });
    }
  };

  const handleBlur = () => {
    setEditingCell(null);
  };

  return { value, handleOnChange, handleBlur };
}

[Xt-Man]

Hi @BahaaZidan ,
Thanks for your typed solution, but can you provide an example?
I'm trying to use "useEdit" with a mantine checkbox controlled by a boolean interface property, but i can´t figure out

[mnemyx]

I couldn't get the typescript example to work as-is but was able to adjust it based on how the MRT_EditCellTextInput.tsx was written so:

import {
    MRT_Cell,
    MRT_Column,
    MRT_Row,
    MRT_TableInstance,
} from "mantine-react-table";
import { useState } from "react";


export type MantineTableCellProps<TData extends Record<string, any>> = {
    cell: MRT_Cell<TData>;
    column: MRT_Column<TData>;
    row: MRT_Row<TData>;
    table: MRT_TableInstance<TData>;
};

export function useEdit<TData extends Record<string, any>>(
    props: MantineTableCellProps<TData>,
) {
    const {
        cell,
        column,
        row,
        table
    } = props;
    const {
        getState,
        setEditingCell,
        setEditingRow,
        setCreatingRow
    } = table;
    const {
        editingRow,
        creatingRow
    } = getState();

    const [value, setValue] = useState(() => cell.getValue());
    const isCreating = creatingRow?.id === row.id;
    const isEditing = editingRow?.id === row.id;

    const handleOnChange = (newValue: unknown) => {
        //@ts-ignore
        row._valuesCache[column.id] = newValue;
        if (isCreating) setCreatingRow(row);
        else if (isEditing) setEditingRow(row);
        setValue(newValue);
    };

    const handleBlur = () => {
        setEditingCell(null);
    };

    return { value, handleOnChange, handleBlur };
}

And then use it like

function EditCheckbox(props: MantineTableCellProps<Machine>) {
    const { value, handleOnChange, handleBlur } = useEdit(props);
    return (
        <Center>
            <Checkbox
                checked={value as boolean}
                onBlur={handleBlur}
                onChange={(e) => handleOnChange(e.currentTarget.checked)}
            />
        </Center>
    )
}

With my column def:

//...
            {
                accessorKey: 'available',
                header: 'Availability',
                size: 50,
                mantineTableHeadCellProps: {
                    align: 'center',
                },
                mantineTableBodyCellProps: {
                    align: 'center',
                },
                Cell: ({cell}) => {
                    return cell.getValue() ? <IconCheck/> : <IconX/>
                },
                Edit: (props) => {
                    return <EditCheckbox {...props}/>
                },
            },
//...

Thank you guys for having written these examples though, it helped me out a lot!

[crowbait]

This is buried deep in the Google searches although it is the perfect solution to the issue. It's also easily extended into a generic, accepting a ReactElement (your custom input).
This is not only incredibly helpful, it could easily be part of the package.
Property on column def: editType: 'text', 'boolean', 'email', 'Date', 'DateTime' ... ...

[Xt-Man]

Hi @mnemyx , your code works great for editing, but, i'm using checkbox and a select in same modal. I noted that the select is reseting the value in all checkboxes on change value, it´s very strange.

I made a refactor, it´s worked for me, maybe help others

EditTableModalCheckBox.tsx:

`import { Checkbox } from "@mantine/core";
import { MRT_Cell, MRT_Column, MRT_Row, MRT_TableInstance } from "mantine-react-table";
import { useState } from "react";

export default function EditTableModalCheckBox<T extends Record<string, any>>(props: {
cell: MRT_Cell;
column: MRT_Column;
row: MRT_Row;
table: MRT_TableInstance;
label: string
}) {

const { cell, column, table, row } = props;
const [value, setValue] = useState<boolean>(() => cell.getValue() === true);
const { setEditingRow, setEditingCell, getState, setCreatingRow } = table;
const { editingRow, creatingRow } = getState();
const isCreating = creatingRow?.id === row.id;
const isEditing = editingRow?.id === row.id;

const saveInputValueToRowCache = (newValue: null | boolean) => {
    //@ts-ignore
    row._valuesCache[column.id] = newValue;
    if (isCreating) {
      setCreatingRow(row);
    } else if (isEditing) {
      setEditingRow(row);
    }
  };

return (
    <Checkbox checked={value} label={props.label}
        onChange={(event) => {
            const newValue: boolean = event.currentTarget.checked;
            setValue(newValue);
            saveInputValueToRowCache(newValue);
        }} />
)

}`

Column def:
{ accessorKey: 'booleanProp', header: 'BOOL', mantineEditTextInputProps: { required: true, type: 'boolean', }, Edit: (props) => { return <EditTableModalCheckBox {...props} label="My label" />}, Cell: ({cell}) => ( cell.getValue<boolean>() ? <IconCircleCheck /> : <IconCircle /> ) },

[Junaid2299]

I have a Problem
I created the Component for the drop with the React Selects
and add in the columns cells with the "Cell" in the mantine react table now the drop down open and the option Hides Behind the other rows that Come After
what is the issue can you please solve this ??