material-react-table. Behavior on Edit using custom input field

Question

After editing using a custom date-field(@mui/x-date-pickers/DatePicker), the behavior is the field is sticking onto the screen. This is happening for all the custom input fields. If I use the MRT 'text' | 'select' fields, when clicking on outside, it's automatically renders the text value instead of the field.

If i try to edit another field(or clicking on any row/column) then only it is rendered as a text/value.

Adding configurations below.

const table = useMaterialReactTable({
    columns: data.length > 1 ? columnData : [],
    data,
    enableColumnActions: false,
    enableRowActions: editableIcons ? true : false,
    positionActionsColumn: 'last',
    initialState: { showColumnFilters: false, showGlobalFilter: true },
    enablePagination: false,
    enableGlobalFilter: isConfiguredOnTable(searchFilter, false),
    enableDensityToggle: false,
    enableFullScreenToggle: false,
    enableHiding: false,
    enableStickyHeader: true,
    enableRowSelection: isConfiguredOnTable(rowSelect, false),
    displayColumnDefOptions: {
      'mrt-row-actions': {
        header: 'Action Name',
        size: 150,
      },
    },
    renderTopToolbarCustomActions: toolBarBtns
      ? toolBarBtns
      : () => <h3 className={Styles.tableHeading}>{tableName} </h3>,
    renderEmptyRowsFallback: () => <Box className={Styles.emptyWrapper}>{translate('NO_RECORDS')}</Box>,
    renderRowActions: editableIcons ? editableIcons : false,
    enableEditing: enableEditing,
    editDisplayMode: 'cell',
    enableCellActions: true,
    getRowId: getRowId,
    muiTableBodyCellProps: ({ cell, column, table }) => ({
      onClick: () => {
        table.setEditingCell(cell); //set editing cell
      },
      onBlur: (event) => {
        console.log('@123', event);
      },
    }),
  });

Edit configuration:

Edit: ({ column, row, table }: any) => {
        const onAccept = (event: any) => {
          const isoDate = dayjs.utc(event).toISOString();

          row._valuesCache[column.id] = isoDate;
          table.setEditingRow(null);
        };

        return <DatePickerField value={dayjs(row.original.hireDate)} name="hire-date" onAccept={onAccept} />;
      };

Objective:

When i am done editing and clicking on ouside should hide the custom input-field and should show the text-content/value of that field.

Ps: DatePicker doen't have onBlur, so onAccept. I have tested with @mui/material/TextField. But got the same behavior. On the side note, I am expecting muiTableBodyCellProps is the place i can make the api call with the modified data. Please correct me if I'm wrong.

Thanks in advance.

pope_maverick · Accepted Answer · 2024-05-17 01:20:35Z

0

muiTableBodyCellProps: ({ cell, column, table, row }) => ({
      onClick: () => {
        table.setEditingCell(cell);
      },
      onBlur: async (event: React.FocusEvent) => {
        event.preventDefault();
        // api calls if any

        table.setEditingRow(null); // set back to null.
        table.setEditingCell(null);      
      },
}),

Even though you set the edit mode to cell,

[editDisplayMode="cell"]

table.setEditingRow is also set by the MRT. So you need to set that back to null as well in the onBlur function.

answered May 17, 2024 at 1:20

pope_maverick

9808 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

material-react-table. Behavior on Edit using custom input field

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related